design2019

layout

content

The client provides the goals and content. The content determines the layout. It is useful to make a content inventory.

viewport

The viewport is the visible rectangle within the browser window. This is the part that you can see. The actual document may extend beyond the viewport width and require scrollbars to view the rest of the document.

grids

There are two main css ways of creating grids: flexbox and css Grid. Flexbox is one dimensional: you may lay out items horizontally or vertically. Css Grid is two dimensional: you lay out items both in columns and rows.

There are tons of tutorials on both. CSS Tricks does a good job of explaining both: A Complete Guide to Flexbox and A Complete Guide to Grid.

Flexbox works really well with small components like menus. Grid is more for a larger scale layout. They are not mutually exclusive.