DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Grid vs. Flex: A Tale of a "Simple" Promo Space
Bryan Robinson
Bryan Robinson

Posted on • Originally published at bryanlrobinson.com on

Grid vs. Flex: A Tale of a "Simple" Promo Space

I love the new layout modes in CSS. Grid and Flexbox are both amazing features. They each have their place. What if I told you that if you used the β€œwrong” one, you could double your CSS and HTML?

Let’s take a look at what appears to be a simple promo grid.

Image of a promo space with one 50% item spanning 2 row, 1 at the top right spanning 50% and 1 row and 2 spanning 25% and 1 row

In this example, we have 4 promotional items. This stems from my time working in an agency setting. Every client wants a rotator at the top of their page. We would use asymmetric promotional spaces like this to work multiple calls to action into one area. This would allow us to avoid a carousel that we knew wouldn’t convert.

It’s important to give a user a sense of hierarchy with the design. To do that, we used different sizes to denote importance.

The design was done in Photoshop. This is really easy to accomplish in a design program.

At the time, we were still doing our primary layout in Flex. As it turns out, this is still quite complex in Flex.

The code required for Flexbox

It requires a lot of additional markup and quite a bit of extra CSS that is specific to the markup and display. In other words, the code was bloated and inflexible.

<div class="promos">
    <div class="left-column">
        <a href="#" class="promo">Promo Space 1</a>
    </div>
    <div class="right-column">
        <a href="#" class="promo">Promo Space 2</a>
        <div class="columns">
            <a href="#" class="promo">Promo space 3</a>
            <a href="#" class="promo">Promo space 4</a>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode
.promo {
    background-image: url(https://images.unsplash.com/photo-1552297166-e1e2a9f945d4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: lightblue;
    background-blend-mode: overlay;
}
.promos {
    display: flex;
    justify-content: space-between;
}
.promo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30vh;
}
.column {
    width: calc(50vw - .5rem);
    display: flex;
    flex-direction: column;
}
.columns {
    display: flex;
    justify-content: space-between;
}
.columns > .promo {
    flex: 1;
}
.columns > .promo:first-child {
    margin-right: 1rem;  
}
.right-column > .promo {
    margin-bottom: 1rem;
}
.left-column .promo {
    height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Our line count is at 12 lines of HTML and 40 lines of layout-based CSS.

The code required for Grid

Let’s take a peek at what we need to make this layout work with Grid.

<div class="promos">
    <a href="#" class="promo">Promo Space 1</a>
    <a href="#" class="promo">Promo Space 2</a>
    <a href="#" class="promo">Promo space 3</a>
    <a href="#" class="promo">Promo space 4</a>
</div>
Enter fullscreen mode Exit fullscreen mode

No unnecessary nesting. Just four promo spaces inside of one container. This is the ideal amount of markup for this layout.

Because Grid allows us to specify our layout and flow our content into the layout, we’re saved many hacks that require additional markup.

The HTML line count is at six. Exactly half the line count of our flex example. Our CSS line count is at 20. Exactly half our CSS line count!

In this case, we use grid-gap to keep our margins clean, grid-template-columns to specify our column sizes and grid-template-areas to define areas we can place our content in.

.promos {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas: "main second second"
                         "main third  fourth";
    grid-auto-rows: minmax(20vh, 1fr);
    grid-gap: 1rem;
}
.promo:first-child {
    grid-area: main;
}
.promo:nth-child(2) {
    grid-area: second;
}
.promo:nth-child(3) {
    grid-area: third;
}
.promo:nth-child(4) {
    grid-area: fourth;
}
Enter fullscreen mode Exit fullscreen mode

Each promo gets its own named area with the grid-area property and that’s it. No more code necessary. This isn’t a hack. This isn’t the combination of layout tricks with additional markup. This is layout as a first-class citizen of the web.

Conclusion

Both these versions will work. Flexbox still has the edge in support. Think about this, though. If all things are equal, half the code with fewer hacks is much better to maintain long term. It’s all about picking the right tool for the job.

It’s an amazing time to be doing web design work. Things that weren’t possible before are. Things that were annoyingly difficult before are mind-bogglingly simple now.

What are some design patterns that were more annoying than they should have been that Grid makes super simple.

Practical CSS Grid - Learn about this revolution in Web design!

Whether you're new to CSS Grid or have played with it, finding practical examples of this new layout mechanism is the best way to learn it's power. Sign up below for two hours of practical grid knowledge just for you!

Start Learning Now!

Top comments (5)

Collapse
 
mutton profile image
Florian R. Klein

Eww, I really should have worked with grid instead of flexbox in my last progressive web app. Flexbox was quite a good fit for the job until one dirty (meaning: non-obvious) trick needed to be done to make it work out completely.

Collapse
 
technophile profile image
Vatsal Hirpara

Great post!

Collapse
 
brob profile image
Bryan Robinson

Thanks!

Collapse
 
jplindstrom profile image
Johan Lindstrom

I like it a lot, but I'm having an immense flashback to doing table based layouts right now. I can't help it.

Collapse
 
brob profile image
Bryan Robinson

It can definitely feel like that!

The big thing to think about is that table-based layouts were highly dependent on markup and the "containers" of the

nesting. So in a lot of ways it's actually closer to the mental model of flex and floats :D

Grid gives us sibling html and no nesting. Spanning elements on top of those inner margins is really nice break from how tables would have been too ;)

A lot of the outward mental model feels a bit like tables, but the inner workings are really nice

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.