My take on CSS Grids
For a long time, I was against the use of modern CSS properties and tools. This was because the organization that I used to work for supports older versions of Internet Explorer. So Flexbox and Grid were out of the equation. It was just position display float clear text-align vertical-align properties that I was using for positioning.
Later when I moved to a new organization, there were no such restrictions. All I had to do was make the web pages load faster and look good on all devices and browsers. Then I took interest in flexbox. I almost use all the flex properties regularly and they are stored in my mind as a fresh copy. This shift in my work environment was akin to my experience when I moved from Vim to Neovim.
Even when I was working with flexbox, I always looked up to CSS Grids as something awesome. Every time I try to learn/read and understand it, I would get bored or screw up my understanding. But now, after eons, I guess I've finally cracked up the mystery behind CSS Grids.
Recently, I played a game that has like 80 levels in it, which progressively teaches you about CSS grids. It took me 3 days to complete all the levels. I played it during my leisure time, it was fun. Thanks to the creator. You can give it a try, it's interesting. This game reminded me of the time I used Gatsby and GitHub Actions to create faster builds.
Play it here - Coding fantasy - CSS Grid game
Do we need media queries? I guess not.
There are functions in CSS!! Yes, you heard me - functions! What if I told you that you are already using them!? Yes, rgb(), rgba(), hsl(), calc(), etc all these are CSS functions. Grids introduce few new functions to use repeat()and minmax(). This concept of functions in CSS is no different from the time I learned about Computed State in React.
WTH is minmax()?
With minmax() we can avoid writing media queries and breakpoints. All you have to do is define a minimum width and a maximum width for your grid cells. The rest would be taken care of by CSS.
minmax(minimum-value, max-value)
The values can be any of these px, %, fr, min-content, max-content. Alright, we have talked a lot about CSS and grids. Let's see some code.
Tile layout
Previously, tile layout was difficult and we had to write a bunch of CSS code. Now with grid, it has become a breeze. I use the CSS grid for my blog listing page. Do check it out! You might also want to check out this article on Coding Standards with TypeScript and Husky.
.grid {
display: grid;
grid-gap: 15px;
// auto-fit takes care of the number of columns it can fit into
// the given space
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px;
grid-auto-flow: dense;
}
Breaking down into bits
Okay, let me break down the above style into some readable components
display: gridObviously, This is required.grid-gap:15pxThis is used to define a gap between the grid cells. Forget about margins. If it is a grid, we usegaporgrid-gapgrid-template-columnsThis is used to define the blueprint of the grid columns - describes how many columns and the width of each column.repeat()As mentioned earlier, this is a CSS function, that repeats whatever is passed as a 2nd argument for the number of times passed in the 1st argument.auto-fitCalculates the number of columns that need to be generated based on the specified width.minmax()This also is a CSS function, we've already covered it above.grid-auto-rowsThis property defines a standard height for the rows so that you don't have to specify explicit heights.grid-auto-flowThis property is used to specify the algorithm that is used to fill the grid. By default it isrow.densefills the gap with smaller items wherever possible. This makes the grid look dense.
I've shared my thoughts and understanding. Feedbacks are valuable. Do follow this blog for more updates, especially if you found this post and my article on Bookmarklets useful.
Written with StackEdit.