CSS Garden

Cool! I can put grids in the middle of my sentences. Pinch me. I must be dreaming.

Next up, I need to look at grid-template-rows, and grid-template-columns. These let me define the grid lines for the layout. Something like this:

That's pretty neat! I can set sizes of my columns using any type of unit. Let's try this:

So this didn't do anything for me, which I think has to do with the fact that I'm asking for 350px of columns + 50% of a 500px box. Let's try this again with a lower percentage:

Very cool. Moving on.

Evidently you can name your gridlines like this:

I'm not entirely sure what this does, but from what I have read it looks like these will be helpful when I start to position children elements.

Moving on to some rows:

Now that we have a handle on how these properties work, lets try some fractional units.

A fractional fr unit allows us to size our gridlines dynamically by adding the total number of fr units and then dividing 1 by that number.

For example if you setup your grid-template-columns to have 4 fractions like this: 1fr 1fr 1fr 1fr, that would be the same as 1 divided by 4 or 0.25.

If you resize this window you will see that the columns in this grid resize dynamically with the window.

What's neat about the fr unit, is that you can easily combine it with fixed length units like so.

Now you can see that the left column stays the same size while the right columns collapse as the page shrinks.

Let's talk about minmax() now.

minmax() allows us to define a minimum size for a column or row so that it doesn't get too small.

Take the previous example, but let's say we don't want the second column to get smaller than 100px:

Notice how as the screen is resized Box 2 shrinks at the same rate as 3 and 4 until it hits the 150px mark and then stops.

As it turns out, the minmax() function can't be applied in reverse, that is, you can't ask for a column to be 1fr up to 500px.

I thought that was a little weird.

But what if we want the columns to size based on the size of the content within... max-content to the rescue!

Test content.

Test content is getting wider than the picture.

In this case I have some pictures with predetermined widths inside of divs. Notice how when I add content that exceeds the width of the picture, the column expands around it. Neat!

Here's a problem: if I was to set my content like the above but the grid container was smaller than what was required, the content expands past the boundaries of the grid like so:

Test content.

Test content is getting wider than the picture.

The recommendation around this is to wrap max-content in a minmax() function like so:

Test content.

Test content is getting wider than the picture.

Next, let's look at fit-content. This one was really tricky to get my head around the first time I saw it. The example from the CSS definitive guide made it easier to understand.

See what's happening? I'm telling the grid to size to the content up to a certain size. So if the content is 1ch big, make the column 1 character big, and size up the column until you reach the 20 character max.

To make a bunch of columns at once, use repeat()

Test content.

Test content that's a little longer than the last content that was a little longer than the content before it.

You can repeat any sequence you like.

And work your other columns around the repeated colunns