02. Mobile-First/01. Structural Layout (💪 problem)

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 Grid that contains two children (grid cells)
  • the gap should 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.
Edit on GitHub
problemsolutiondiffchat
Loading "Structural Layout"