Building page layouts and partials
With the release of CSS Grid, page layouts started to use actual grid layouts instead of pseudo-grids built with Flexbox. As we’ve seen in the examples of Awesome Analytics, CSS Grid is made for the job: we can build entire pages with CSS Grid only, even having collapsible sidebars. However, behind the scenes, even these examples have used Flexbox to arrange some elements, namely the header and navigation elements.
As with form layouts, we must choose the right tool for the job. Depending on the design, a header or a footer can be built with Flexbox or CSS Grid. Let’s look at a few page partials and build an entire page layout with a mix of Flexbox and CSS Grid.
Headers and navigation
There are several different approaches to building navigations and header bars. For example, some pages hide the menus entirely behind hamburger icons. Even on the desktop, other pages show partial navigation that enlarges once the user hovers...