Get (g)rid of position: absolute;

Angel Davchev
Sep 24 · 4 min read

How you can use CSS Grid to avoid using position: absolute.


Mockup of a tab system
Mockup of a tab system

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.

‘Member these babies?

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.

display: grid; 
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;

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.

CSS Grid is an amazing tool, and I stress the word amazing.

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 innerHeight() of the content’s content and give the tab’s content height equivalent of the inner height using JavaScript each time the page loads or resizes. But that’s just dumb hacking.

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:

display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;

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.

It’s nice, isn’t it?

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!

Angel Davchev

Written by

UI/UX designer

wearelaika

Laika is a free platform where Tech professionals can find a job they love in the Balkans.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade