Using Flexbox and CSS Grid together

Teutonic CSS is my recently published CSS framework. Yes —crazy —yet another CSS framework. Anyways.

Teutonic CSS incorporates two similar content iteration grid systems. One is based on CSS Grid and the other is based on Flexbox. They have overlapping features, yet they are different. And, I believe, it makes sense to have both of them around. Here is my journey.

First there was Flexbox

So, I started off with a “traditional” Flexbox grid, see it in action here. It’s cleaner than legacy floating and inline-block grids. It iterates content over rows, has span classes and gaps.

Flexbox features I learned to love: You don’t need to know the number of items upfront. Items distribute themselves in smart, flexible ways.

The outer div.flex has a negative margin to the left and the inner ones have paddings

But it also has some quirks. My Flexbox grid system—like traditional floating grids—uses a combination of negative margins and padding to achieve the gaps between the items. That means encapsulation: an extra layer of divs. Additionally included: margin collapsing issues, when the next items has a margin to the top, which will not get applied as the margins are collapsing. …

So I tried out CSS Grid

No padding, just a gap!

CSS Grid has a gap CSS property. That means: No more negative margins hacks to achieve gutters between grid items. Just a simple very clear line of CSS to do that. No extra encapsulated div markup. Sexy and compelling.

So, I was sold. The new task was to recreate the Flexbox grid in CSS Grid.

Turned out that it’s not so easy. I achieved similar features. It also iterates over rows, has span classes and gaps. But…

Naming things

Two grids, both do the same thing, but the naming has to be different

My initial goal was to have the same CSS class names, for Flexbox and CSS Grid. Turned out that this is not that easy when it comes to the spans. With Flexbox, a grid item can span half of a row, so the class name naturally is .span-half.

With CSS Grid, this is different. First of all, you need to define the number of grid columns. Well, ok. 12 is an often used standard, so let’s go for that. So half of the grid span across 6 columns. Easy. But. … What if I later want to change the number of columns? When the grid has only 7 columns, half is not even possible. I finally settled with different naming patterns respecting the different layout modes:

In Flexbox a span can take half of a row, no questions asked, it’s .span-half, .span-third or .span-quarter.

In CSS Grid, we can only know over how many columns an item spans. So .span-6, .span-4 or .span-3 in a grid with 12 columns has the same effect, as before mentioned.

See? It’s a table, basically.

CSS Grid is pretty much 90ies table layout. The grid is rigid. Some features I love with Flexbox, like a .span-auto that occupies only as much space as it actually needs, are not possible with CSS Grid. But apart from the gap property, CSS Grid also has some other cool features missing with Flexbox.

min-max in action. The items are taking care of themselves.

While CSS element queries are a future feature, CSS Grid min-max comes pretty close. The items themselves distribute in smart ways on different viewport sizes in an implicit grid—without media queries. See my min-max CSS grid in action here.

Summary

So that’s why there are two main content iterating grids with Teutonic CSS.

CSS Grid also can do x and y axis at the same time. Flexbox is one-dimensional, but has columns for top-down contents.

Both Flexbox and CSS Grid in particular have powerful layout features, not covered with the Teutonic content grids. The content grids are just a short-cut for iterating over similar contents, like some kind of list. You don’t need to just use a “framework” for page layout, pure CSS Grid is a good candidate to position your main page elements like header, content, aside and footer.

I care about design and like to nerd-out about those different methods. I like to have all these options at my fingertips. But I also see that CSS at it’s current state has gained quite a complexity. It’s hard to understand the subtle yet important differences between all the different available options.

With rising popularity of CSS Grid, Flexbox became a bit sidelined. I believe that it will have a comeback.

The new gap is coming!

Did you know? The gap property is getting an overhaul. Instead of grid-gap, we can just use gap, for vertical and horizontal gaps column-gap and row-gap respectively. And the same syntax will apply to Flexbox and CSS Grid. For Flexbox this means: no more margin hacks and great freedom.

Bonus

Haha. There is even a third content iteration method with Teutonic CSS: CSS Columns, but that’s a different story.

Thanks for reading.