takanorip/holy-grail-layout.markdown

## holy-grail-layout.markdown

      
        

                Raw

        
        
          
            
          
          
            
              holy-grail-layout.markdown
            
          
        
      
      
    Holy Grail Layout
A Pen by takanorioki on CodePen.
License.

  

  

## index.html
<body>
  <header>header</header>
  <div class="holyGrail">
    <main class="content">HolyGrail</main>
    <nav class="side-nav">nav</nav>
    <aside class="side-bar">side</aside>
  </div>
  <footer>footer</footer>
</body>

## style.css
body {
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  flex-direction: column;
  text-align: center;
}

header,
footer {
  width: 100%;
  padding: 2% 0;
  font-size: 1.2rem;
  color: #fff;
  flex: 0;
}

header {
  background: #006e54;
}

footer {
  background: #727171;
}

.holyGrail {
  display: flex;
  flex: 1;
}

.content {
  flex: 1;
}

.side-nav,
.side-bar{
  width: 200px;
  background: #fddea5;
}

.side-nav {
  order: -1;
}
	<body>
	<header>header</header>
	<div class="holyGrail">
	<main class="content">HolyGrail</main>
	<nav class="side-nav">nav</nav>
	<aside class="side-bar">side</aside>
	</div>
	<footer>footer</footer>
	</body>
	body {
	display: -webkit-flex;
	display: flex;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	flex-direction: column;
	text-align: center;
	}

	header,
	footer {
	width: 100%;
	padding: 2% 0;
	font-size: 1.2rem;
	color: #fff;
	flex: 0;
	}

	header {
	background: #006e54;
	}

	footer {
	background: #727171;
	}

	.holyGrail {
	display: flex;
	flex: 1;
	}

	.content {
	flex: 1;
	}

	.side-nav,
	.side-bar{
	width: 200px;
	background: #fddea5;
	}

	.side-nav {
	order: -1;
	}