Not using wrappers or containers but a grid - option 4
Uses css grid with line labels to structure the page and provide page width options
as class names. Can use flow content-grid classes in a plain div or main div but does
need something. These class names are added to headers and paragraph classes
directly rather than creating a separate div. This paragraph is set to breakout column label.
Using Kevin Powell - new approach to container and wrapper classes. This paragraph is set to content column label
Content line label = middle column (1fr),
breakout line label = content + next column (+100px),
full-width line label = spans all columns (+100px).
Added a nested grid of images within the column. This is set to a full width column label.
column in a section div.
Header (content)
(content) Lorem ipsum dolor sit amet consectetur adipisicing elit.
Animi, est! Voluptatibus facilis blanditiis laudantium nam cum quas eaque consequuntur
similique vero ipsa magni, ratione mollitia beatae? Consectetur quas animi sit?
(content) Lorem ipsum dolor sit amet consectetur adipisicing elit.
Animi, est! Voluptatibus facilis blanditiis laudantium nam cum quas eaque consequuntur
similique vero ipsa magni, ratione mollitia beatae? Consectetur quas animi sit?
The following images are set in a nested grid. This text is set on the left side.
- in the middle 20px-
Whereas this is set to the right
This is a text filler amongst images.
(full-width) Lorem ipsum dolor sit amet consectetur adipisicing elit.
Animi, est! Voluptatibus facilis blanditiis laudantium nam cum quas eaque consequuntur
similique vero ipsa magni, ratione mollitia beatae? Consectetur quas animi sit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Header 2 (content)
(breakout) Animi, est! Voluptatibus facilis blanditiis laudantium nam cum quas eaque consequuntur
similique vero ipsa magni, ratione mollitia beatae? Consectetur quas animi sit?
