Getting Started With CSS Grid — Part 2: What can you do with CSS Grid? Learn by example — Grid Garden

I’ve already said that CSS Grid is awesome. Now, I want to show you why.

I think the best way to learn things, is by getting your hands dirty. In one of the links in my previous post about CSS Grid, there is a game called CSS Gird Garden which demonstrates the power of the grid.

The reason I keep pushing Grid Garden is that it’s a perfect example of getting down and dirty. I like going back to it whenever I feel I need a refresher.

Unlike my first post, I’m trying something new here, and that’s to give the essence of my topic in a very TLDR; format. That is the motto for FedBites.

My favorite software engineering principle is K.I.S.S (Keep It Simple Stupid / Keep it Stupid Simple)

So, a few things to know about CSS Grid in general:

• Any element can be a grid parent.
• Every child of a grid element is a grid-child.
• You can define the size of the columns, rows, and gaps.
• Works like flex just with 2 dimensions instead of one.
• New “functions” to help you out like auto-fit, minmax, and the very handy fr (fraction) unit.
• You can align grid children similar to flex-box with align-self, justify-self and a few more properties.

Let’s look at some levels from CSS Grid Garden and try and understand how CSS grid works:

Grid Garden tries to really teach you the basics. Like with most things in CSS you have long and short syntax.

Let’s break down

What we see in the picture (Level 3). We have a #garden , that is a grid . The number of columns for said grid is 5 as defined with grid-template-columns: 20% 20% 20% 20% 20% . The number of rows is also 5 as defined by grid-template-rows. The solution to the puzzle is either grid-column-end: 4 (because we have grid-column-start: 1 )or grid-column: 1 / 4 which is a sorter way to say the same.

Something else to notice is the fact we want to cover 3 cells of the grid with water, but we don’t even use the number 3. That is because of the grid syntax which is index based. What that means is in order to get 3 cells we actually divide the end from the start (4–1= 3).

It also works the other way around, you can start from the end and move “forward”:

Not always very intuitive.

Another example that is worth sharing is when you want to cover all of the columns you can just use: grid-column: 1 / -1;:

So what have we learned?

We can place gird children in a 2 dimension axis according to our parent’s grid “settings”, for example:

Simple grid demo

So in the example above we have a grid parent with a 3x3 grid, divided into 3 fractions, i.e. 3 equal containers for columns and rows. Then we have 3 grid-children each assigned to a different column. The interesting thing about what you see is the fact that the .second and .third divs are affected by the column position of the first child.

Another tricky shorthand property is the grid-area. It’s a bit funky and confusing if you ask me, but as soon as you break it down, it’s not so hard:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-area: 1 / 2 / 4 / 6;
// grid-column-start / grid-row-start / grid-column-end / grid-row-end /
}

Hope this short post gave you enough to go around and play with CSS Grid.

I’m still updating this post as I think of more things. Please let me know if anything is not understood in the comment section

Stay tuned for part 3: Real world example.