Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
209 lines (186 sloc) 5.22 KB
title permalink key
Gird
/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
You can’t perform that action at this time.