No more 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 molestias earum officia neque nemo sunt laboriosam vero eum optio, saepe dolorem exercitationem quod asperiores iste?

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.

Images as full-bleed works too

Exercitationem dolorum animi at autem tempore omnis, dolorem saepe sint totam architecto, vitae cum doloribus illo? Laudantium laboriosam saepe eligendi ipsam corrupti molestias expedita tempora eos minima, facere, eius dicta.

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