Template for the typical centered layout?

I recall Kevin's responsive course on scrimba or perhaps a video provided a simple template/recipe for those typical website layout which goes like this:

1)

header

header

and

footer

footer

occupy 100% of the viewport width,

main

main

meanwhile is centered and occupies only say 80% of the width
2)

main

main

also has a max width cap and can't grow beyond say 80rem

Does anyone know which video it was or perhaps know how he did it? Can't seem to recall any solution which doesn't involve me overengineering a grid on the

body

body

MarkBoots•2/10/24, 9:28 AM

not that complicated to be honest. the scenario you describe can easily be done with flex or grid.

set the min-height of the body to the full size.

flex:

set the body to , and to have the header at top, main in the middle and footer at the bottom
the header and footer already have a width of 100% (block element),
so you only need to contain the main. for that you can use and to center it

MarkBoots•2/10/24, 9:29 AM

MarkBoots•2/10/24, 9:32 AM

grid

curiousmissfox•2/10/24, 6:52 PM

You could also have main take up 100% of the vp width then, put its content into a container that has a max width and a margin inline of auto