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.