<div class="container">
  <div class="header">
    <p class="logo"><a href="#"><i class="fa fa-file-code-o" aria-hidden="true"></i></a></p>
    <nav>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      <button>Login</button>
  </div>
  <div class="hero"></div>
  <aside class="sidebar">
     
    <h3>Recent Posts</h3>
        <ul>
            <li><a href="#">Post One</a></li>
            <li><a href="#">Post Two</a></li>
            <li><a href="#">Post Three</a></li>
            <li><a href="#">Post Four</a></li>
            <li><a href="#">Post Five</a></li>
          </ul>
  </aside>
  
  <div class="main">
<!--     <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/combined-layout-header.jpg"> -->
            <h2>Flexbox and CSS Grid Layout</h2>

            <p>It's okay to combine CSS Grid Layout and Flexbox.</p>
    
    <p>Is the content in a straight line or column (cards, navigation items, or other content blocks)? For occasions that require elements to line up in one direction, meaning it is more “one-dimensional”, typically Flexbox is the better option. Also, Flexbox is good at dynamically scaling elements. Maybe you’ve tried this in a row of boxes, by adding display:flex; on a parent element and flex properties on the child elements, there’s a nice line formed and this is an efficient way to make sure they are all the same height.  </p>
    
    <p>**If things do not look right, make sure your browser is in "Experimental Mode".
    </p>
    
  </div>
  <div class="extra">
    <div class="content-block-info">
      <h3>View Grid Help</h3>
      <p>See tips and tricks for CSS Grid Layouts...</p>
      <button>Read</button>
    </div>
    <div class="content-block-info">
      <h3>View Flexbox Help</h3>
      <p>See tips and tricks for Flexbox layouts...</p>
      <button>Read</button>
    </div>
    <div class="content-block-info">
      <h3>View Combined Help</h3>
      <p>See tips and tricks for combined layouts...</p>
      <button>Read</button>
    </div>
  </div><!-- /extra -->
  
  <div class="related-images">
  
    <div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-06.jpg"></div>
    
    <div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-05.jpg"></div>
    
    <div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-04.jpg"></div>
    
    <div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-03.jpg"></div>
    
     <div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-02.jpg"></div>
 
    
    <div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-01.jpg"></div>
  
  
  </div>
  <div class="related-posts">
    <h4>Related Posts</h4>
    <ul>
            <li><a href="#">Post One</a></li>
            <li><a href="#">Post Two</a></li>
            <li><a href="#">Post Three</a></li>
          </ul>
  
  </div>
  <footer>
    <h3>CSS Grid and Flexbox Layout Example</h3>
    <p>Hope you enjoyed learning about combined layouts!</p></footer>
</div>
@import url('//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

body {
  background-color: #eee;
  color: #434344;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

p {
  font-size: 1.5rem;
}

.container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 0.4fr 0.3fr 0.3fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  background-color: #fff;
}

.grid {
}

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  color: #9f9c9c;
  text-transform: uppercase;
  border-bottom: 2px solid #b0e0ea;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header nav {
   
}

.header nav ul {
    display: flex;
/*     align-items: baseline; */
    list-style-type: none;
}

.header nav li {
    margin-right: 15px;
}

.header button {
    border: none;
    padding: 8px 25px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    border-radius: 1.25rem;
    background-color: #51bb7b;
}

.logo {
  font-size: 2rem;
  margin-right: 1.5rem;
  color: #50c6db;
}

.hero {
  grid-column: 1 / 2;
  grid-row-start: 2 / 3;
  background-color: #d5c9e2;
  min-height: 300px;
  background-image: url("http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/combined-layout-hero-1.jpg");
}

.hero-unit img {
 width: 100%; 
 height: auto;   
}

.sidebar {
  grid-column: 1 / 2;
  grid-row: 3 / 5;
  padding: 20px;
  border-top: 3px solid #693f7e;
  background-color: #f9f9f9;
}

.sidebar h3 {
  margin-top: .75rem;
}

.sidebar ul {
  list-style-type: none;
  margin-top: 1rem;
  font-size: .75rem;
}

.sidebar ul > li {
    padding: .25rem 0;
}

.sidebar img {
  max-width: 100%;
}

.main {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
/*   min-height: 500px; */
}

.main h2 {
    font-size: 32px;
    margin-bottom: 1rem;
    color: #50c6db;
}

.main p {
    font-size: 1rem;
    margin-bottom: .75rem;
}

.main img {
    width: 100%;
}

.extra {
  grid-column: 2 / 4;
  grid-row: 4 / 5;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ececec;
  justify-content: space-between;
}

.extra h3 {
  font-weight: 500;
  margin-bottom: .5rem;
  flex: 1 0 auto;
}

.extra p {
  font-size: .75rem;
  margin-bottom: .75rem;
}

.extra button {
  background-color: white;
  border: 2px solid #50c6db;
  color: #50c6db;
  padding: .5rem;
}
.content-block-info {
   flex: 0 1 calc(33% - .5rem);
}

.related-images {
  grid-column: 1 / 3;
  grid-row: 5 / 6;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap: 1rem;
}

.related-images .icon {
    background-color: white;
    flex: 1 1 150px;
}

.related-images .icon img {
 max-width: 100%;
}

.related-posts {
  grid-column: 3 / 4;
  grid-row: 5 / 6;
  padding: 0 2rem;
}

.related-posts h4 {
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  font-size: 1.5rem;
  border-bottom: 1px solid #ececec;
}

.related-posts ul {
  margin-left: 1.5rem;
}

footer {
  grid-column: 1 / 4;
  grid-row: 6 / 7;
  color: #fff;
  text-align: center;
  padding: 20px 0;
  background-color: #9f9c9c;
}  

footer p {
    color: #434344;
    font-size: 12px;
    padding: 10px;
}

    
    

External CSS

  1. https://fonts.googleapis.com/css?family=Dosis
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.