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 and footer occupy 100% of the viewport width, main meanwhile is centered and occupies only say 80% of the width
2) 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 body4 Replies
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
display: flex, flex-direction: column and justify-content: space-between 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 width: min(80%, 80rem) and margin-inline: auto to center it
grid
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