Here’s the HTML we’ll be using for the examples. Just some basic lists, right?

Just like any display property value, it’s going to change the layout options and bring in new properties and possibilities.

If nothing else, just a nice vertical list of “stuff” and a gap is a big win.

Now we don’t have to say “put a margin top on each thing… but not if it’s the first one… “

Grid is two dimensional (unlike flex box), so you can define columns and rows as templates for the child elements to slot into. But to start, we’d suggest you stick to columns.

There are ways to make this really really confusing and messy… OR ways to define a nice clear grid and let things fall into it naturally.

An fr is a unit that suggests the column take a fraction of the available space in the grid container. So, in this case – we’re saying 1fr and 1fr and 1fr which means there’s 3 in total.

In this case – we’re saying 1fr and 2fr which means there’s 3 in total. So, it’s like we’re saying 33% and 66% of 100 but it’ll also do the math for gaps and things. Like basic fractions.

The grid items will fall into place on the defined grid.

You probably want to define different grids or how how the grids are used – at different breakpoints. (there are programmatic intrinsic sizing things you can do but that’s for later)

We didn’t tell the grid about rows. It just created them. And the size of the elements will be dictated by the content. Most academic grid education examples don’t show you real content.

We didn’t tell the grid about rows. It just created them. And the size of the elements will be dictated by the content. Most academic grid education examples don’t show you real content.

You can tell an item to go exactly where you want, but consider working WITH the system, instead of overriding it to start.

Make sure you are clear on why this is behaving the way it is.

You can start to play with spanning across rows. (remember, we haven’t explicitly set any rows yet)

You can live without it. But here’s a function that can repeat patterns of column definitions.

The key here — is to remember: columns can be whatever you want them to be in any units. Auto is default.

Here’s a case where the function is helpful!

You can make whatever fun grids you want. But we’ve found that grid is mostly a practical tool – and these types of things in all the demos are very rare.

You can make whatever fun grids you want. But we’ve found that grid is mostly a practical tool – and these types of things in all the demos are very rare.

You know what grids are great for? Grids of things!