Grid

Grid templates for articles, special sections, call to action etc.

No more container:

Template inspired by Kevin Powell

Content without containers

It can be useful to have a system in place that’s easy to go full-width, or have a “breakout” section for calls to action or blockquotes, or other things you want to call attention to.

Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid, and with the recent additions of subgrid to all the evergreen browsers, maybe there’s a better way to do things?

It has it’s downsides, as the code is more complex, and it’s not as obvious how it works when we’re so used to the old pattern.

That said, we shouldn’t limit ourselves just because we are used to working in a specific way.

This section has a different background-color

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum nobis maiores doloremque, nostrum deleniti!

Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium ex alias?

Back to normal

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto nam at praesentium cumque rem molestia searum officia neque nemo sunt laboriosam vero eum optio, saepe dolorem exercitationem quod asperiores iste?

Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.

Adipisicing non est incididunt ipsum eiusmod enim ullamco esse incididunt nisi id excepteur. Aliquip veniam occaecat sunt do ullamco voluptate. Incididunt dolore deserunt tempor eu amet ut reprehenderit ex ipsum. Irure minim commodo irure elit. Dolore culpa in est veniam labore voluptate ut ut Lorem aute culpa ullamco incididunt. Ipsum adipisicing irure do ut deserunt deserunt.

Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well

Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well.

Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.

Officia est non in non veniam in enim do adipisicing aliquip. Irure non duis reprehenderit fugiat sunt dolore excepteur nulla labore commodo occaecat fugiat non. Voluptate non dolore ullamco ullamco veniam est sint aute irure labore. Minim mollit sunt qui amet reprehenderit fugiat anim et duis tempor velit. Aute excepteur cupidatat voluptate duis nisi dolore nulla occaecat adipisicing minim est culpa. Aute eiusmod labore ex minim eu laborum velit proident adipisicing anim nulla sunt.Eu magna mollit cupidatat occaecat aute sunt aliqua nulla cillum in consequat ipsum sunt. Aliquip deserunt nulla sit aliquip est elit id. Amet eu labore id ad laboris voluptate consectetur sunt elit mollit. Culpa irure velit velit ipsum quis dolore esse dolor excepteur Lorem.

Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well

Images as full-bleed works too

Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.

Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in, necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam, voluptate voluptas natus corporis.

Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum ratione vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.

Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam voluptas magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?

content

Code

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="html"><code><main class="flow content-grid text-xl bg-white pt-8"> <h1 class='article-title'>Content without containers</h1> <p>It can be useful to have a system in place that's easy to go full-width, or have a "breakout" section for calls to action or blockquotes, or other things you want to call attention to.</p> <p class="breakout">Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid, and with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?</p> <p>It has it's downsides, as the code is more complex, and it's not as obvious how it works when we're so used to the old pattern.</p> <p>That said, we shouldn't limit ourselves just because we are used to working in a specific way.</p> <section class="full-width bg-primary text-white section-padding flow"> <h2>This section has a different background-color</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum nobis maiores doloremque, nostrum deleniti!</p> <p>Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium ex alias?</p> </section> <h2>Back to normal</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto nam at praesentium cumque rem molestia searum officia neque nemo sunt laboriosam vero eum optio, saepe dolorem exercitationem quod asperiores iste?</p> <p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p> <p>Adipisicing non est incididunt ipsum eiusmod enim ullamco esse incididunt nisi id excepteur. Aliquip veniam occaecat sunt do ullamco voluptate. Incididunt dolore deserunt tempor eu amet ut reprehenderit ex ipsum. Irure minim commodo irure elit. Dolore culpa in est veniam labore voluptate ut ut Lorem aute culpa ullamco incididunt. Ipsum adipisicing irure do ut deserunt deserunt.</p> <p class='breakout call-to-action border-l-4 border-blue-400 text-2xl font-headlight'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p> <p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p> <p class='breakout call-to-action bg-gray-200 text-xl font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well.</p> <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p> <p>Officia est non in non veniam in enim do adipisicing aliquip. Irure non duis reprehenderit fugiat sunt dolore excepteur nulla labore commodo occaecat fugiat non. Voluptate non dolore ullamco ullamco veniam est sint aute irure labore. Minim mollit sunt qui amet reprehenderit fugiat anim et duis tempor velit. Aute excepteur cupidatat voluptate duis nisi dolore nulla occaecat adipisicing minim est culpa. Aute eiusmod labore ex minim eu laborum velit proident adipisicing anim nulla sunt.Eu magna mollit cupidatat occaecat aute sunt aliqua nulla cillum in consequat ipsum sunt. Aliquip deserunt nulla sit aliquip est elit id. Amet eu labore id ad laboris voluptate consectetur sunt elit mollit. Culpa irure velit velit ipsum quis dolore esse dolor excepteur Lorem.</p> <p class='breakout call-to-action border-2 border-blue-darker font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p> <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p> <h3>Images as full-bleed works too</h3> <img class='full-width' src="https://unsplash.it/1600/400" alt="" /> <p>Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.</p> <p>Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in, necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam, voluptate voluptas natus corporis.</p> <p>Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum ratione vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.</p> <p>Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam voluptas magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?</p> <section class="bg-primary text-white full-width"> <h3>content</h3> </section> </main></code></pre>

Full-width variants

Additional utility classes for more flexible full-width layouts.

Full-width with Flexbox

Use .full-width-flex when you need flexbox layout across the full width instead of grid.

Full-width Flexbox Example

The section below uses flexbox for horizontal layout across the full width.

Feature 1

Flexbox layout

Feature 2

Full width span

Feature 3

Easy alignment

Back to regular content width.

Full-width Uncontained

Use .full-width-uncontained when you want a full-width section where children also span the full width (not constrained to content area).

Full-width Uncontained Example

The section below has a full-width background and its children span the full width too.

This heading spans the entire width

This paragraph also spans the entire width

Back to regular content width.

Full-width Block

Use .full-width-block for simple block-level full-width containers without grid or flex layout.

Full-width Block Example

The image below is wrapped in a full-width-block container.

Back to regular content width.

Comparison

.full-width - Grid layout with children constrained to content area (default behavior)
.full-width-flex - Flexbox layout across full width
.full-width-uncontained - Grid layout with children spanning full width
.full-width-block - Simple block container at full width