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.
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
- Every child of a
gridelement is a
- You can define the size of the
- Works like
flexjust with 2 dimensions instead of one.
- New “functions” to help you out like
minmax, and the very handy
- You can align grid children similar to
justify-selfand a few more properties.
Let’s look at some levels from CSS Grid Garden and try and understand how CSS grid works:
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
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”:
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:
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
.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:
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
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.