Card grid

Card grid.markdown

Card grid ('-' * 9) A flexbox grid system with a float fallback. Easy classes to apply for the intended layout.

A Pen by Brad Czerniak on CodePen.

License.

index.html

<div class="page">
<p>Introductory text.</p>
<div class="cards container grid four">
  <div><h3>Subhead 1</h3><p>Some text is here. Some text is also here.</p></div>
  <div><h3>Subhead 2</h3><p>Some text is here. Some text is also here.</p></div>
  <div><h3>Subhead 3</h3><p>Some text is here. Some text is also here.</p></div>
  <div><h3>Subhead 4</h3><p>Some text is here. Some text is also here.</p></div>
  <div><h3>Subhead 5</h3><p>Some text is here. Some text is also here.</p></div>
  <div><h3>Subhead 6</h3><p>Some text is here. Some text is also here.</p></div>
  <div><h3>Subhead 7</h3><p>Some text is here. Some text is also here.</p></div>
  <div><h3>Subhead 8</h3><p>Some text is here. Some text is also here.</p></div>
  <div><h3>Subhead 9</h3><p>Some text is here. Some text is also here.</p></div>
  <div><h3>Subhead 10</h3><p>Some text is here. Some text is also here.</p></div>
  <div><h3>Subhead 11</h3><p>Some text is here. Some text is also here.</p></div>
</div>
<p>Text after, to show the clearfix?</p>
</div>

style.css

.cards {}
  .cards > div {
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px rgba(50,50,50,.5);
    padding: 10px;
  }
  .cards > div h3 {
    color: #666;
    margin: 0 0 .1em;
  }
.grid {
  margin-left: -10px;
}
  .grid > div {
    box-sizing: border-box;
    float: left;
    margin: 0 0 20px 10px;
    min-width: 10em;
  }
  .grid:after {
    content: ' ';
    display: table;
    clear: both;
  }
  .grid.two > div {
    width: 47%;
  }
  .grid.three > div {
    width: 31%;
  }
  .grid.four > div {
    width: 23%;
  }
  @supports (display: flex) or (display: -webkit-flex) {
    .grid {
      -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-wrap: wrap;
    }
      .grid:after {
        display: none;
      }
      .grid > div {
        -webkit-flex: auto;
        -ms-flex: auto;
        flex: auto;
        float: none;
      }
      .grid.two > div {
        /* 33% < n > 50% is 2 per line */
        -webkit-flex: 1 0 35%;
        -ms-flex: 1 0 35%;
        flex: 1 0 35%;
        width: inherit;
      }
      .grid.three > div {
        -webkit-flex: 1 0 26%;
        -ms-flex: 1 0 26%;
        flex: 1 0 26%;
        width: inherit;
      }
      .grid.four > div {
        -webkit-flex: 1 0 19%;
        -ms-flex: 1 0 19%;
        flex: 1 0 19%;
        width: inherit;
      }
       .grid.five > div {
        -webkit-flex: 1 0 17%;
        -ms-flex: 1 0 17%;
        flex: 1 0 17%;
        width: inherit;
      }
  }
.page {
  border: 1px solid #fc0;
  margin: 0 auto;
  max-width: 960px;
  width: 960px;
}
  @media screen and (min-width: 1px) {
    .page {
      width: inherit;
    }
  }