cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="page">
  <div class="page-title">
    <h1>grid.</h1>
  </div>
  <ul class="page-nav">
    <li><a href="#" class="page-nav-link">New Articles</a>
    <li><a href="#" class="page-nav-link">Gallery</a></li>
    <li><a href="#" class="page-nav-link">About</a></li>
    <li><a href="#" class="page-nav-link">Contact Us</a></li>
    <li><a href="#" class="page-nav-link">Social Media</a></li>
  </ul>
  
  <div class="ie-separator" role="presentation"></div>
  
  <div class="article-meta">
    <div class="article-meta-author-portrait">
      <img src="https://image.ibb.co/dkprYw/profile.jpg" alt="Article Author Jane Loughlin's Profile Picture" />
    </div>
    <div class="article-meta-author">Written by Jane Loughlin</div>
    <div class="article-meta-date">September 30th, 2017</div>
  </div>
  
  <div class="article" role="document">
    <h2>The Story Of The Grid And The Browser</h2>
    <h3>Of Frames and Tables</h3>
    <img src="https://image.ibb.co/bTzYDw/pexels_photo_372470_cropped_800x800.jpg" class="right article-img" alt="A purple-hued aerial photo of a European city during the late evening." />
    <p>During the birth of the web, frames were a popular construct for laying out our pages in a grid-like fashion. Frames allowed us to easily lay out a page that kept navigation on the side, a footer at the bottom, a banner at the top, and the content in the middle. However, frames were handled inconsistently between browsers, and broke the relationship between a URL and the page content, making bookmarking and link sending less than trivial.</p>
    <p>Eventually, tables became the most common way to create a two-dimensional grid layout. However, between the difficulty in maintaining complex hierarchies of nested tables, and accessibility concerns, we needed a better way.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h3>Floats and Flexboxes</h3>
    <p>After finally realizing the importance of giving tabular data meaningful and accessible markup, while using CSS to drive the visual layout of the page, we achieved a greater purity in our HTML markup. However, we were left with very few tools that could help us accomplish two-dimensional layout structures, and were forced to use calculations and percentages to drive column-based designs.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <img src="https://image.ibb.co/gdAn6G/pexels_surf_cropped.jpg" class="left article-img" alt="A male carrying a surfboard along the sandy sea shore" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h3>Finally, A Proper Tool For The Job!</h3>
    <p>With HTML and CSS quickly becoming the de-facto cross-platform tools for marking up stand-alone documents, creating layouts for blogs and magazines on the web, and in writing declaritive desktop and mobile app UI, we needed something that could help us achieve the goal of making a proper grid layout, without manually calculating widths or percentages based on the number of columns or rows.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="article-quote">"Using CSS to drive the visual layout of the page, we achieved a greater purity in our HTML markup"</div>
  <div class="article-footer">
    <div>(c) 2017 Sample Copyright Information</div>
    <div>Images provided by Pexels</div>
  </div>
</div>
<div class="footer">
  <div class="footer-about">
    <h5>About Us</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="footer-contact">
    <h5>Contact</h5>
    <p>123 Main St.</p>
    <p>P.O. Box 567</p>
    <p>New York, NY 12345</p>
  </div>
  <div class="footer-logos">
    <img src="http://via.placeholder.com/300x75?text=Logo" />
    <img src="http://via.placeholder.com/300x75?text=Logo" />
  </div>
</div>
            
          
!
            
              html, body {
  background-color: #fafafa;
  color: #202020;
  font-family: 'Cabin', 'Helvetica', 'Tahoma', sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2rem;
  font-family: 'Josefin Sans', 'Helvetica', 'Tahoma', sans-serif;
  margin: 0;
}

.page {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0.25rem 1rem;
}

.page-title {
  float: left; /* IE */
  display: block;
  width: 75%;
}

.page-nav {
  float: right; /* IE */
  width: 25%;
}

.ie-separator {
  background-color: #202020;
  height: 1px;
  width: 100%;
  float: none;
  clear: both;
}

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

.page-nav-link {
  float: left;
  background-color: #5566ff;
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  *zoom: 1;
  *display: inline;
  margin-right: 5px; /* A small px margin for IE 8 */
  margin-left: 1rem;
  margin-bottom: 1rem;
  padding: 0.35rem 0.25rem 0.25rem 0.25rem;
}

.article {
  width: 74%;
  float: right;
  overflow: hidden;

  grid-column: 2 / 5;
  grid-row: 2 / 5;
  padding: 1rem 1rem 0 1rem;
}

img.right {
  float: right;
  margin: 0.75rem 0 0.75rem 0.75rem;
}

img.left {
  float: left;
  margin: 0.75rem 0.75rem 0.75rem 0;
}

.article-img {
  max-width: 30%;
}

.article-img {
  max-width: 25%;
}

.article-meta {
  float: left;
  width: 24%;
  
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: 2rem;
  text-align: center;
}

.article-meta-author-portrait img {  
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.article-quote {
  float: left;
  width: 22%;
  padding: 1%;
  
  margin-top: 100px;
  margin-bottom: 100px;
  
  border-top: 2px solid #aaaaaa;
  border-bottom: 2px solid #aaaaaa;
  font-size: 1.5rem;
  padding: 0.5rem 0.25rem;
  background-color: #f0f0f0;
  
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  align-self: start;
}

.article-footer {
  float: left;
  width: 24%;
  clear: both;
  margin-bottom: 50px;
  
  grid-column: 1 / 2;
  grid-row: 4 / 5;
  align-self: end;
  text-align: center;
}

.article p:last-child {
  margin-bottom: 0;
}

.footer {
  clear: both;
  overflow: hidden;
  padding: 1rem;
  margin-top: 3rem;
  color: #fafafa;
  background-color: #202020;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.footer p {
  font-size: 0.75rem;
}

.footer-about {
  float: left;
  width: 25%;
  
  grid-column: 1 / 2;
}

.footer-contact {
  float: left;
  width: 23%;
  margin-left: 1%;
  margin-right: 1%;
  
  grid-column: 2 / 3;
}

.footer-logos {
  float: left;
  width: 50%;
  
  grid-column: 3 / 4;
  justify-self: end;
  text-align: right;
}

@supports (display: grid) {
  .page-title {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    justify-self: stretch;
    align-self: stretch;
    display: flex;
    align-content: stretch;
    align-items: center;
    width: auto;
    min-height: auto;
    border-bottom: 1px solid #202020;
  }
  
  .page-nav {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
    min-height: auto;
    width: auto;
    border-bottom: 1px solid #202020;
  }
  
  .page-nav-link {
    margin-right: 0;
  }
  
  .article, .article-quote, .article-meta, .article-footer {
    width: auto;
  }
  
  .article-quote {
    padding: 0.5rem 0.25rem;
  }
  
  .article-footer {
    margin-bottom: 0;
  }
  
  .footer-contact {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  
  .footer-about, .footer-contact, .footer-logos {
    width: auto;
  }
  
  .ie-separator {
    display: none;
  }
}

            
          
!
999px
Loading ..................

Console