4.2-grid.md

title	permalink	key
Grid	/docs/en/grid	docs-grid

<style> .grid-example { background-color: rgba(37, 147, 252, .28); } .content { padding: 5px 0; overflow: auto; color: #fff; word-wrap: normal; background-color: #2593fc; border: 1px rgba(0, 0, 0, .4) solid; } .content--auto { background-color: #ff69b4; } </style>

Base

6 cells

2 cells

4 cells

<div class="grid">
  <div class="cell cell--6">6 cells</div>
  <div class="cell cell--2">2 cells</div>
  <div class="cell cell--4">4 cells</div>
</div>

Responsive

12/12/6 cells

12/4/2 cells

12/8/4 cells

<div class="grid">
  <div class="cell cell--12 cell--lg-6 content">12/12/6 cells</div>
  <div class="cell cell--12 cell--md-4 cell--lg-2 content">12/4/2 cells</div>
  <div class="cell cell--12 cell--md-8 cell--lg-4 content">12/8/4 cells</div>
</div>

Auto Sizing

2 cells

Whatever's left!

<div class="grid">
  <div class="cell cell--2">2 cells</div>
  <div class="cell cell--auto">whatever's left!</div>
</div>

shrink

expand

<div class="grid">
  <div class="cell cell--shrink">shrink</div>
  <div class="cell cell--auto">expand</div>
</div>

Gutters

6 cells

6 cells

6 cells

6 cells

<div class="grid-container">
  <div class="grid grid--p-3">
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
  </div>
</div>

6 cells

6 cells

6 cells

6 cells

<div class="grid-container">
  <div class="grid grid--px-3">
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
  </div>
</div>

6 cells

6 cells

6 cells

6 cells

<div class="grid-container">
  <div class="grid grid--py-3">
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
  </div>
</div>

Overflow

loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong

loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong

loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong

loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong

loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong

loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong