Easiest Flex Grid Ever

easiest-flex-grid-ever.markdown

Easiest Flex Grid Ever

A responsive grid based on flexbox. Requires only two classes to function, and is infinitely expandable! I also added a semantic version.

A Pen by Tania Rascia on CodePen.

License.

index.html

<h1>Easiest Flex Grid Ever</h1>
<div class="row">
  <div class="column">
    100%
  </div>
</div>

<div class="row">
  <div class="column">
    50%
  </div>
  <div class="column">
    50%
  </div>
</div>

<div class="row">
  <div class="column">
    33.3%
  </div>
  <div class="column">
    33.3%
  </div>
  <div class="column">
    33.3%
  </div>
</div>

<div class="row">
  <div class="column">
    25%
  </div>
  <div class="column">
    25%
  </div>
  <div class="column">
    25%
  </div>
  <div class="column">
    25%
  </div>
</div>

<div class="row">
  <div class="column">
    20%
  </div>
  <div class="column">
    20%
  </div>
  <div class="column">
    20%
  </div>
  <div class="column">
    20%
  </div>
  <div class="column">
    20%
  </div>
</div>

<div class="row">
  <div class="column">
    16.6%
  </div>
  <div class="column">
    16.6%
  </div>
  <div class="column">
    16.6%
  </div>
  <div class="column">
    16.6%
  </div>
  <div class="column">
    16.6%
  </div>
  <div class="column">
    16.6%
  </div>
</div>

<div class="row">
  <div class="column">
    14.2%
  </div>
  <div class="column">
    14.2%
  </div>
  <div class="column">
    14.2%
  </div>
  <div class="column">
    14.2%
  </div>
  <div class="column">
    14.2%
  </div>
  <div class="column">
    14.2%
  </div>
  <div class="column">
    14.2%
  </div>
</div>

<div class="row">
  <div class="column">
    12.5%
  </div>
  <div class="column">
    12.5%
  </div>
  <div class="column">
    12.5%
  </div>
  <div class="column">
    12.5%
  </div>
  <div class="column">
    12.5%
  </div>
  <div class="column">
    12.5%
  </div>
  <div class="column">
    12.5%
  </div>
  <div class="column">
    12.5%
  </div>
</div>

<div class="row">
  <div class="column">
    11.1%
  </div>
  <div class="column">
    11.1%
  </div>
  <div class="column">
    11.1%
  </div>
  <div class="column">
    11.1%
  </div>
  <div class="column">
    11.1%
  </div>
  <div class="column">
    11.1%
  </div>
  <div class="column">
    11.1%
  </div>
  <div class="column">
    11.1%
  </div>
  <div class="column">
    11.1%
  </div>
</div>

<div class="row">
  <div class="column">
    10%
  </div>
  <div class="column">
    10%
  </div>
  <div class="column">
    10%
  </div>
  <div class="column">
    10%
  </div>
  <div class="column">
    10%
  </div>
  <div class="column">
    10%
  </div>
  <div class="column">
    10%
  </div>
  <div class="column">
    10%
  </div>
  <div class="column">
    10%
  </div>
  <div class="column">
    10%
  </div>
</div>

<div class="row">
  <div class="column _25">
    Twenty-five Percent
  </div>
  <div class="column _75">
    Seventy-five Percent
  </div>
</div>

<div class="row">
  <div class="column">
    <div class="row">
      <div class="column">
        Nested
      </div>
      <div class="column">
        Nested
      </div>
    </div>
  </div>
  <div class="column">
    Nothing Nested
  </div>
</div>

<h2>Contained Grid</h2>

<main>
  <div class="row">
    <div class="column _25">
      Twenty-five Percent
    </div>
    <div class="column _5">
      Fifty Percent
    </div>
    <div class="column _25">
      Twenty-five Percent
    </div>
  </div>
</main>

script.js

/**
* Easiest Flex Grid Ever
* Responsive!
*/

style.css

/* Grid */

.column {
  flex-basis: 100%;
}

@media screen and (min-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .column {
    flex: 1;
  }
  ._25 {
    flex: 2.5;
  }
  ._5 {
    flex: 5;
  }
}
/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

h1,
h2 {
  text-align: center;
}

styles

<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet" />