PaperCSS

the less formal CSS framework

^

Flexbox

Flexgrid

The flexgrid is a grid system that supports up to 12 columns per row. Because it uses flexbox (rather than just %widths), we also get the benefit of the fun parts of flexbox like alignment in more complex ways than normal.

col-4 col
col-4 col
col-4 col
col-3 col
col-9 col
sm-6 md-8 lg-10 col
sm-6 md-4 lg-2 col
sm-5 col
col-fill col
col-fill col
Aligned
Left (default)
Aligned
Right (flex-right)
Aligned
Center (flex-center)
Aligned
to edges (flex-edges)
Aligned
to be evenly spaced (flex-spaces)
Aligned top
Aligned top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
Aligned middle
Aligned middle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
Aligned bottom
Aligned bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
Align bottom
Align middle
Align top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.

Code:

<div class="row">
  <div class="col-4 col">col-4 col</div>
  <div class="col-4 col">col-4 col</div>
  <div class="col-4 col">col-4 col</div>
</div>
<div class="row">
  <div class="col-3 col">col-3 col</div>
  <div class="col-9 col">col-9 col</div>
</div>
<div class="row">
  <div class="sm-6 md-8 lg-10 col">sm-6 md-8 lg-10 col</div>
  <div class="sm-6 md-4 lg-2 col">sm-6 md-4 lg-2 col</div>
</div>
<div class="row">
  <div class="sm-5 col">sm-5 col</div>
  <div class="col-fill col">col-fill col</div>
  <div class="col-fill col">col-fill col</div>
</div>
<div class="row">
  <div class="sm-4 col">Aligned</div>
  <div class="sm-4 col">Left (default)</div>
</div>
<div class="row flex-right">
  <div class="sm-4 col">Aligned</div>
  <div class="sm-4 col">Right (flex-right)</div>
</div>
<div class="row flex-center">
  <div class="sm-4 col">Aligned</div>
  <div class="sm-4 col">Center (flex-center)</div>
</div>
<div class="row flex-edges">
  <div class="sm-4 col">Aligned</div>
  <div class="sm-4 col">to edges (flex-edges)</div>
</div>
<div class="row flex-spaces">
  <div class="sm-4 col">Aligned</div>
  <div class="sm-4 col">to be evenly spaced (flex-spaces)</div>
</div>
<div class="row flex-top">
  <div class="sm-6 col">Aligned top</div>
  <div class="sm-6 col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
  </div>
</div>
<div class="row flex-middle">
  <div class="sm-6 col">Aligned middle</div>
  <div class="sm-6 col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
  </div>
</div>
<div class="row flex-bottom">
  <div class="sm-6 col">Aligned bottom</div>
  <div class="sm-6 col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
  </div>
</div>
<div class="row">
  <div class="sm-3 col align-bottom">Align bottom</div>
  <div class="sm-3 col align-middle">Align middle</div>
  <div class="sm-3 col align-top">Align top</div>
  <div class="sm-3 col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
  </div>
</div>