Learn by example — Grid GardenYoav GanbarBlockedUnblockFollowFollowingFeb 3I’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.
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 a grid .
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: auto-fit, minmax,Let’s look at some levels from CSS Grid Garden: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;:Hope this short post gave you enough to go around and play with CSS Grid.
Stay tuned for part 3: Real world example.
.