CSS Grid Essentials. The New way to do web layout
Introduction
CSS grid is the new way to do web layout. It is released in 2017. Currently, It has 83% of all browser support vs 95% on flexbox. 2018 should be the breakout year for CSS grid. There are some major companies that are already using CSS grid on their website such as NY Times.
You can check out other CSS grid that are currently in production. (link)
Why should you use grid?
Because it makes sense. Since web development has been invented, we have been solving web layout issues with hacks.
First, we use tables, then floats, which are suppose to be used so our web looks like magazines. Next, we have flexbox. It’s great for one dimensional but for two-dimensional layout, it’s still weird and not intuitive.
Finally, in 2017 we have CSS grid, we can make complex masonry or any 2D layout with ease like the ones below.
Basics
Here I’ll teach you the basics on how to use grid property, all we need to do is to change the display property to a grid.
.container {
display: grid;
grid-template-columns: <track-size>;
grid-template-rows: <track-size>;
grid-gap: <gap-size.;
}
To do the layout above
//HTML
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>//CSS.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 15px;
}.col {
width: 100%;
height: 150px;
background: #fff;
}
After we set our display to grid, we set the number of columns with grid-template-columns. We set three columns with giving it 3 frs (fractional unit).
fr is a new flexible unit that only works with CSS grid. It is really similar to flex-grow from flexbox. Anyways 1fr means 1 part of the available free space. So, in this case, there are 3 frs which mean 100% divided by 3 so 33.33%.
Finally, grid-gap is just the space between each grid unit(column and element).
BOOM! That’s it ! SO EASY.
Should you use grid?
If you believe most of your visitor are tech savvy, and younger audience, I recommend you use CSS grid. Because they will be using modern browsers. If your audience is an older generation, and still uses the older browser, then CSS grid is not a good fit for you.
Either way, I still recommend you to learn CSS grid, because CSS Grid is the future!! Plus it’s easier to write and maintain.
Resources:
Here are some resources, I recommend for learning CSS grid