Sunday, January 12, 2014

Simple Responsive Grid

Simple Responsive Grid

A simple responsive grid layout with minimal markup.

<div>Simple Responsive Grid</div>
  <span class="grid">
    <div class="unit-2">Simple Responsive Grid</div>
    <div class="unit-2">Simple Responsive Grid</div>
        
    <div class="unit-3">Simple Responsive Grid</div>
    <div class="unit-3">Simple Responsive Grid</div>
    <div class="unit-3">Simple Responsive Grid</div>
        
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
  </span>
    
<img src="http://placehold.it/400x300">
  <span class="grid">
    <img class="unit-2" src="http://placehold.it/400x300">
    <img class="unit-2" src="http://placehold.it/400x300">
        
    <img class="unit-3" src="http://placehold.it/400x300">
    <img class="unit-3" src="http://placehold.it/400x300">
    <img class="unit-3" src="http://placehold.it/400x300">
        
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
  </span>

div {
    font-family: monospace;
    text-align: center;
}

div, img {
    width: 100%;
    font-size: 80%;
    margin-bottom: 10px;
    color: white;
    background-color: black; /* optional border color */
    padding: 10px; /* optional border width */
    box-sizing: border-box;
}

.grid {
    display: block;
    margin-left: -10px;
}

.unit-2, .unit-3, .unit-4 {
    float: left;
    border-left: 10px solid transparent;
    box-sizing: border-box;
    background-clip: padding-box;
}

.unit-2 { width: 50%; }
.unit-3 { width: 33.3%; }
.unit-4 { width: 25%; }



via CSS Deck by