CSS Grid Snippets

September 3, 2019


Web Dev

These are just raw notes on CSS Grid. They aren’t necessarily organized in any specific way, this is more of a board to place things I learn about the topic. I used to have these unorganized within the notes app on my phone, but by placing them here I hope that someone else can use them too. If you have any questions on the notes or a question on a particular snippet feel free to reach out to me using the form at the bottom of this page.

Responsive grid without media queries:

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(calc(10% + 7.5rem), 1fr));
grid-auto-rows: 100px;

This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

Use order: 2; to set the order of a specific element (In this case it will be the 2nd item)

Use writing-mode for vertical text that still adheres to CSS grid

when spanning an element from the first to the last column you can use this notation:

grid-column: 1 / -1;

Name your grid, don’t just use numbers – grid-template-columns: [sidebar] 1fr [content] 2fr;

Minmax is easier than you think – just set a min and max for each item and let the browser figure out how many items fit in each row.

auto-fill and auto-fit allow for responsive layouts without media queries. Try it out.

@joekotlan on Twitter