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:

 

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<header>Header</header>
		<div class="wrapper">
			<nav>Navigation</nav>
			<main>Content</main>
			<aside>Sidebar</aside>
		</div>
		<footer>Footer</footer>
	</body>
</html>

 

style.css

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 *