Structural Layout
Loading "Structural Layout"
Run locally for transcripts
Our markup needs to be wrapped in a couple of layout containers:
- a full-page container responsible for centering the whole design in the viewport
- a layout grid that manages the positioning of our two main content sections: the logo list and the text content
Full-page container
๐ฆ Wrap the entire page markup in a
div that has at minimum the full-screen height, and centers its children with a grid.That wrapper should also handle the horizontal and vertical "gutter" page padding, according to the Figma design.
๐ฐ Check out the ๐ min-height
and ๐ Place-items (Grid) Tailwind docs if needed!
Layout grid
๐จ Wrap the markup once again, to create another grid which will be the common parent to both the logo list and the text content.
๐จโ๐ผ Here are some aspects of this wrapping inner
div you should make sure are covered:- it's a
Gridthat contains two children (grid cells) - the
gapshould be set according to the Figma design - children should be centered on both axes
๐ฐ Just sharing the ๐ Place-items (Grid) docs here once again ๐
Grouping the logo, h1 and paragraph
๐ฆ With CSS Grid, we could technically skip this wrapper, but one extra div is not going to hurt anyone, nor be the performance bottleneck of our website.
๐จ Wrap the Logo, h1 and paragraph in a common parent div, so they become one of the layout grid's two children.