Sometimes an idea strikes you so hard that you have no idea why you’ve never thought of it. CSS Grid excels at creating new types of layouts. It’s also amazing at simplifying the code for old design patterns.
An idea snuck up on me when I was creating a centered column of text inside of a stripe with a full width background color.
Traditionally, this would be solved with adding an additional <div> in our markup. The HTML would look like this.
<section class="stripe">
<div class="stripe__content">
<h1>Hello Stripe world</h1>
<p>More stripe content can go here ...</p>
</div>
</section>
We use the outside <section> to apply the background color and the interior <div> to size and center the content. This is by no means a crisis of markup. The CSS is relatively clean, as well.
.stripe {
background-color: lavender;
padding: 2rem 0;
}
.stripe__content {
width: 90vw;
max-width: 1200px;
margin: auto;
}
Because this wasn’t a large transgression, I’d never thought about utilizing CSS Grid for this purpose. I’ve used Grid to create full-width stripes inside of other designs, but never for something this simple.
The lightning bolt of this application caught me completely off guard. Even though the property is grid-template-columns, we can use it for a single column. Pair that with justify-content and a small touch of padding, and voila!
A colored stripe, with a width-restricted set of content with no additional markup!
<section class="stripe">
<h1>Hello Stripe world</h1>
<p>More stripe content can go here ...</p>
</section>
.stripe {
display: grid;
grid-template-columns: minmax(auto, 1200px);
justify-content: center;
background-color: lavender;
padding: 2rem 1rem;
}
This method creates one column for our grid. It has a minimum size of auto to allow it to shrink based on its content and a maximum size of 1200px. This creates the appropriately sized elements. We use justify-content instead of dealing with auto margins. In this method, we need a left/right padding for our mobile widths.
From a box-model perspective, this makes good sense. Padding is for internal spacing. In our old way, we’re using margins which has always felt a little hacky.
I never thought about this use case, but it made so much sense when it dawned on me. As we approach a future where Grid is one of our main layout mechanisms, we’ll see more applications like this.
Grid isn’t just for complex layouts, it’s also for making resilient simple layouts, as well. What are some other layouts that at first glance don't SEEM like you'd use Grid, but that Grid would make better?
Stay up to date with Bryan
If you want to stay up to date with all the content I'm producing, be sure to follow me here, but also on other platforms as well.
Top comments (3)
Had not thought of that, until now i was always using the padding trick!
padding: 0 calc(50% - var(--half-column-width));codepen.io/walidvb/pen/VopNNO
Ooooh that's an interesting trick. I've never seen that, but it makes total sense! Gotta love
calc()!@leaverou ;)