It all started with a bang
As of October 17th 2017, Microsoft Edge has shipped support for CSS Grid. One small step for a man, one giant leap for front-end development. This meant that all major browsers now supported the famous CSS Grid. Humans, working together to bring better world for future generations.
In ancient history (pre-2015) we’ve used floats, inline-blocks and tweaked margins, padding, box models, pixels, percentages, rems and all the random words to get the dreaded three “Our services” blocks next to each other.
But then Flex-box came out
And it changed the way we write CSS forever. You need a navigation with links layed out perfectly next to each other?
display: flex. You need that same navigation to be in a header wrapper with a logo on each side? Add
justify-content: space-between. You need both the logo and the navigation centered? Add
align-items: center. It was that easy.
But when it came down to laying out the dreaded “Our services” blocks, you still had to use margins in order to space them out. Now, there’s nothing wrong with that if you’re a margin aficionado, but CSS Grid offers an easier way to do that. If you open up the example above in CodePen, you’ll see that it only takes 3 lines of code to achieve the result. CSS Grid has a property called
grid-gap that lets you define the gutter between elements. Now the dreaded blocks look like a piece of cake.
grid-template-columns: repeat(3, 1fr);
The unit that CSS Grid has that is equivalent of Flex-box’s
flex: 1 is
1fr. It measures 1 fraction unit of the whole container. You define your
grid-template-columns in the container element, and you assign fractions to each element. So if you have 3 elements, you write:
grid-template-columns: 1fr 1fr 1fr;
And that’s it.
CSS Grid has a nifty little function called
repeat() where you specify how many times you want something to repeat. In the example above, I’m using
repeat(3, 1fr). That means the
grid-template-columns repeat 3 times over 1 fraction of the container.
And now, the fun part
Did you know that you can use CSS Grid to avoid
position: absolute? One particular use case that comes to mind are tab elements. In order to stack the tab’s content into one place, we’ve been using
position: absolute for quite some time. But there’s a problem with absolute positioning of elements. In theory, it treats the elements as if they aren’t part of the DOM. It neglects margins and padding, thus you will encounter height issues and the adjacent elements in the page will collapse.
And we don’t want that, do we?
There’s a solution to this: define fixed height for the tab’s content element, or calculate the
I’m not a hater for absolute positioning of elements, there are many use cases for that. You can stick an icon or avatar in the top left corner of a card and call it a day. But when we have an element that can affect the rest of the layout,
position: absolute is not the right call.
CSS Grid comes to the rescue
Say we have a tab’s content which is defined by a parent element and three child elements. We set the parent to have:
Here’s the magic trick: we set the child elements to have
grid-column: 1/-1, which means they start at the first line of the grid that has 1 column and end where the column ends. We set the
grid-row: 1/-1 the same as we did with the column. And that’s it. You now have each three child elements stacking on top of each other, without having to use absolute positioning and affect the rest of the layout. In the example below, I’ve demonstrated this in CodePen.
The elements are treated like part of the DOM. They are brothers and sisters, children to parents, margins and padding living happily ever after.
Flex-box ❤ Grid
I’m not saying ditch Flex-box and go full on Grid mode. The best way to compose layouts is to use both displays in conjunction with each other.
I hope that you’ve liked this article and I sincerely hope that you’ve learned something new that will help you along the way. Happy hacking!