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.