Grid Layout System Components Example

Wider than normal but not full width

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Using Floats with Full-Width Sections / data-typo=comic

Mountain landscape with lake — Floated image in a full-width section

This section demonstrates how to combine our full-width approach with traditional float-based layout techniques. Notice how the text wraps beautifully around the floated image on the left.

This is done oldschool style because a grid-based named line approach does indeed have a limitation regarding floats. In a CSS Grid layout, child elements are placed in grid cells, and the traditional float behavior (where text wraps around floated elements) doesn't work the same way. Grid items exist in their own cells and don't allow other content to flow around them as floats do. Link to CSS-Tricks article

Using Floats with Full-Width Sections

This section demonstrates how to combine our full-width approach with traditional float-based layout techniques. Notice how the text wraps beautifully around the floated image on the left.

This is a different approach used in the CSS-Tricks article about creating full-width elements within a width-constrained parent. It uses a combination of relative positioning and negative margins to break out of the parent container. This technique:

Makes the element 100vw wide (viewport width)
Uses positioning and negative margins to center it relative to the viewport

This demonstrates:

A section using the alternative full-width approach
A floated image with text wrapping around it
Proper containment of the content within the full-width section using a content wrapper

This gives you the best of both worlds:

When you need the structured containment of your grid system, you use your standard classes
When you need an element to be full-width AND work with floats, you opt for the alternative class

When to Use Each Approach

The grid-based named lines approach works best for structured layouts with distinct containment zones, while the alternative full-width-float approach excels when you need traditional document flow behavior with text wrapping around elements.

By having both techniques in your toolkit, you can choose the right approach for each section of your design.

Conclusion

By leveraging CSS Grid's named lines, we can create sophisticated, responsive layouts that give us precise control over content widths. This approach simplifies our HTML, reduces the need for media queries, and creates layouts that feel intentional at every viewport size.

Try implementing this system in your next project, and you'll likely find yourself wondering how you ever lived without it. The flexibility it provides will transform how you think about content containment on the web.

Share Your Thoughts

Have you used named grid lines in your projects? I'd love to hear about your experiences in the comments below!

Using Floats with Full-Width Sections / data-typo=comic

Using Floats with Full-Width Sections

When to Use Each Approach

Conclusion

Share Your Thoughts

let's make great things

Let's Talk

Nav

Socials

Get in touch