Structural Layout
Structural Layout
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.