Holy Grail layout

Responsive Holy Grail layout with main elements in a flex container and it's contained elements growing as required. Footer resultingly either stays at bottom of viewport or scrolls to bottom of viewport if content is greater than viewport height:


		<link rel="stylesheet" type="text/css" href="style.css" />
		<div class="wrapper">



html {font: 2em arial;}

body {min-height:100vh; background:#ccc; margin:0 auto;}

.wrapper {flex:1 1 auto; padding:0; align-items:stretch;}

body, .wrapper {display:flex; flex-direction:column;}

body > *, .wrapper > * {padding:1em;}

header {background:#fcc; text-align:center;}

main {flex:1; background:#fff;}

nav {background:#cfc;}

aside {background:#fcf;}

footer {background:#ccf; text-align:center;}

@media (min-width: 75em) {
	.wrapper {
		flex-direction: row;


Rendered view:

Leave a Reply

Your email address will not be published. Required fields are marked *