Responsive card ui grid

index.html

<div class="card-grid">
  <div class="card-wrap">
    <div class="card">
      <img src="http://placehold.it/500x500" class="card-img"/>
      <div>
        <h4>This is an example</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at efficitur nisl. </p>
      </div>
    </div>
  </div>
  <div class="card-wrap">
    <div class="card">
      <img src="http://placehold.it/500x500" class="card-img"/>
      <div>
        <h4>This is an example</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at efficitur nisl. </p>
      </div>
    </div>
  </div>
  <div class="card-wrap">
    <div class="card">
      <img src="http://placehold.it/500x500" class="card-img"/>
      <div>
        <h4>This is an example</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at efficitur nisl. </p>
      </div>
    </div>
  </div>
  <div class="card-wrap">
    <div class="card">
      <img src="http://placehold.it/500x500" class="card-img"/>
      <div>
        <h4>This is an example</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at efficitur nisl. </p>
      </div>
    </div>
  </div>
  <div class="card-wrap">
    <div class="card">
      <img src="http://placehold.it/500x500" class="card-img"/>
      <div>
        <h4>This is an example</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at efficitur nisl. </p>
      </div>
    </div>
  </div>
  <div class="card-wrap">
    <div class="card">
      <img src="http://placehold.it/500x500" class="card-img"/>
      <div>
        <h4>This is an example</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at efficitur nisl. </p>
      </div>
    </div>
  </div>
  <div class="card-wrap">
    <div class="card">
      <img src="http://placehold.it/500x500" class="card-img"/>
      <div>
        <h4>This is an example</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at efficitur nisl. </p>
      </div>
    </div>
  </div>
  <div class="card-wrap">
    <div class="card">
      <img src="http://placehold.it/500x500" class="card-img"/>
      <div>
        <h4>This is an example</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at efficitur nisl. </p>
      </div>
    </div>
  </div>
</div>

Responsive-card-ui-grid.markdown

Responsive card ui grid

Simple responsive grid layout with a card UI style.

A Pen by Adam Hollister on CodePen.

License.

style.css

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background:#f0f0f0;
}
img {
  max-width:100%;
}



.card-grid {
  width:100%;
}
.card-grid:after {
  content: "";
  display: table;
  clear: both;
}



.card-wrap {
  float:left;
  width:100%;
  padding:5px;
}
@media (min-width: 500px) {
  .card-wrap {
    width:50%;
  }
}
@media (min-width: 720px) {
  .card-wrap {
    width:25%;
  }
}


.card {
  background-color:white;
  border-radius:5px;
  border:1px solid #ccc;
  border-bottom:2px solid #ccc;
}
.card > div {
  padding:0 1em;
}