Simple layout

My version of the Holy Grail layout with just one centred column for the content and full width header and footer, but with all content containers width set and centralised:


	* {margin:0; padding:0;}
	.holy-grail {display:flex; min-height:100vh; flex-direction:column;}
	.holy-grail__body {display:flex; flex:1; border:solid 15px green;}
	.holy-grail__header, .holy-grail__footer {flex:0 0 10em; border:solid 15px red;}
	.holy-grail__content {margin:0 auto; width:800px; border:solid 15px purple;padding:1em;}
<body class="holy-grail">
	<header class="holy-grail__header">
		<div class="holy-grail__content">Header</div>
	<main class="holy-grail__body">
		<div class="holy-grail__content">Content</div>
	<footer class="holy-grail__footer">
			<div class="holy-grail__content">Footer</div>

*note: this example has been exaggerated to emphasise the layout, in particular line 6 'flex: 0 0 10em' has the 3rd (flex-basis) parameter set to 10em (instead of 'auto') to show the containing elements for the header & footer. Remember: flex is shorthand for flex-grow, flex-shrink and flex-basis combined.



Leave a Reply

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