SE学院

Gridの使い方

Grid

<div class="pure-g">
  <div class="pure-u-1-2">.pure-u-1-2</div>
  <div class="pure-u-1-2">.pure-u-1-2</div>
</div>
.pure-u-1-2
.pure-u-1-2
<div class="pure-g">
  <div class="pure-u-1-3">.pure-u-1-3</div>
  <div class="pure-u-1-3">.pure-u-1-3</div>
  <div class="pure-u-1-3">.pure-u-1-3</div>
</div>
.pure-u-1-3
.pure-u-1-3
.pure-u-1-3
<div class="pure-g">
  <div class="pure-u-1-3">.pure-u-1-3</div>
  <div class="pure-u-2-3">.pure-u-2-3</div>
</div>
.pure-u-1-3
.pure-u-2-3
<div class="pure-g">
  <div class="pure-u-2-3">.pure-u-2-3</div>
  <div class="pure-u-1-3">.pure-u-1-3</div>
</div>
.pure-u-2-3
.pure-u-1-3