CodePen

HTML

            
              <div class="pagewrap">
	<h1>Don't Overthink It Grids</h1>
	
  <!-- ROW ONE -->
  
  <div class="grid">
		<nav class="col-1-4">
			<ul class="module">
				<li><a href="#">Row One</a></li>
				<li><a href="#">Row Two</a></li>
				<li><a href="#">Row Three</a></li>
				<li><a href="#">Row Four</a></li>
			</ul>
		</nav>
    
		<section class="col-3-4">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>
	</div>
  
  <!-- END OF ROW ONE -->
  
  <!-- ROW TWO -->

	<div class="grid">
		<section class="col-2-3 ">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>

		<section class="col-1-3">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>
  </div>
  
  <!-- END OF ROW TWO -->
    
  <!-- ROW THREE -->
  
  <div class="grid">
		<section class="col-1-3">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>

		<section class="col-1-3">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>

		<section class="col-1-3">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>
  </div>
  
  <!-- END OF ROW THREE -->
  
  <!-- ROW FOUR -->
  
  <div class="grid">
		<section class="col-1-4" id="rowThree">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>
		<section class="col-1-4">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>

		<section class="col col-1-4">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>

		<section class="col-1-4">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>
  </div>
  
  <!-- END OF ROW FOUR --> 
  
  <!-- ROW FIVE -->
  
  <div class="grid">
			
		<section class="col-1" id="rowFour">
			<div class="module">	
        <h2>Header Text</h2>
			  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p><small>This is the footer text</small></p>
      </div>
		</section>
	</div>
  
  <!-- END OF ROW FIVE -->  

</div><!--pagewrap-->
            
          
!

CSS

            
              /* --- RESET --- */

*{
  font-family: 'helvetica neue', 'helvetica', 'pt sans', 'arial', sans-serif;
  color: #333333;
  font-weight: 300;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  box-sizing:border-box;
}

/* --- CONTAINER --- */

.pagewrap {
  min-width: 320px;
	width:80%;
  max-width: 800px;
	margin: 30px auto;
  padding: 20px;
	background: rgba(0,0,0,0.2);
}

/* --- NAVIGATION --- */

nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
	text-align: center;
	padding: 5px;
}
nav ul li a {
	display: block;
	text-decoration: none;
	padding: 5px;  
  background: #FFFFFF;
}

nav ul li a:hover {
	background-color: #DDDDDD;
}

/* --- GRID FRAMEWORK --- */

.grid {
	overflow: hidden;
  margin-bottom: 20px;
}

[class*='col-'] {
	float: left;
	padding-right: 20px;

}

/* --- THIS IS THE CLASS THAT YOU WERE MISSING --- */

[class*='col-']:last-child {
  padding-right: 0;
}

.col-1 {
	width: 100%;
}

.col-2-3 {
	width: 66.66%;
}

.col-1-3 {
	width: 33.33%;
}

.col-1-4 {
	width: 25%;
}

.col-3-4 {
	width: 75%;
}

.module {
	padding: 20px;
  background: rgba(0,0,0,.2);
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................