CSSのグリッドレイアウトでボックスを配置する

CSSのグリッドレアウトでボックスを配置する

大きさの異なるボックスを自由に配置できるCSSのグリッドレイアウトについてまとめていきます。

グリッドレイアウト

グリッドレイアウトを組むときに重要になるのが、コンテンツ全体を囲む要素です。この親要素にdisplay: grid;を指定しその中に子要素を配置していきます。

下記は、親要素「.container」にdisplay: grid;を指定し、子要素に「item」というクラスを付与しています。

<div class="container">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
  <div class="item five">5</div>
  <div class="item six">6</div>
  <div class="item seven">7</div>
  <div class="item eight">8</div>
  <div class="item nine">9</div>
</div>	

親要素の「container」 に以下のスタイルを適応させると、図の様に子要素に余白を付けることができます。

.container {
  display: grid; /* grid layout */
  grid-gap: 15px; /* 子要素の余白を指定 */
}

グリッドレイアウト

グリッドトラックの指定

トラックとはグリッド上の2本の線の間にある空間のことで、列(横方向)grid-template-columnsと行(縦方向)grid-template-rowsプロパティを使用して指定します。

grid-template-columns

トラックを指定する数値はpx%などでも可能ですが、より柔軟なグリッドトラックを作成するためにfr(fraction:比率)という単位で指定してあげます。

例えば、親要素に対して、子要素を3分割するのであれば、grid-template-columns: 1fr 1fr 1fr;と指定します。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 横3分割 */
}

repeatを使用する場合

  • grid-template-columns: repeat(3, 1fr); - 繰り返し【1fr 1fr 1frと同じ意味です】

grid-template-rows

トラックの高さを指定します。行によって高さが異なる場合は半角スペースで区切って指定してあげます。

.container {
  display: grid;
  grid-template-rows: 80px 120px 80px 100px auto; /* トラックの高さを1行〜5行目まで指定 */
}

ボックスを配置する

それでは、「item」を配置していきたいと思います。グリッドレイアウトでは縦・横に並ぶグリッドラインを基本に配置したいラインの番号を指定することで要素を配置できます。

グリッドレイアウト

「1」という要素は縦(行)の1~4番目までを占めてしるので、grid-rowプロパティを使って下記の様に記述し、配置する範囲を指定します。

.one {
  grid-row: 1 / 4; /* 1~4番目まで */
  grid-row: 1 / span 3; /* 上記と同じ意味なので好きな書き方で */
}

上の図の例では、「1〜9」までのボックスの位置指定はこの様になっています。

CSS

.one {
  grid-row: 1 / 4;
}
.two {
  grid-row: 1 / 3;
}
.three {
  grid-column: 3 / 5;
}
.four {
  grid-column: 3 / 5;
}
.six {
  grid-column: 3 / 4;
  grid-row: 3 / 5;
}
.seven {
  grid-column: 4 / 5;
  grid-row: 3 / 5;
}
.eight {
  grid-column: 1 / 3;
}
.nine {
  grid-column: 1 / 5;
}	

レスポンシブ対応させる

スマホなどで見た時は、要素が縦に一列に並ぶ様にしたいので、grid-template-columns: 1fr;を指定し、1カラムになるようにします。そして、高さについてはコンテンツに合わせるためにgrid-template-rows: auto;としてあげます。

各ボックスについても、指定していは範囲を解除しましょう。

@media (max-width: 740px) {
  .container {
    grid-template-columns: 1fr; /* 1カラムに指定 */
    grid-template-rows: auto; /* 高さはauto指定 */
  }
  .one,
  .two,
  .three,
  .four,
  .five,
  .six,
  .seven,
  .eight,
  .nine {
    grid-column: 1; 
    grid-row: auto; 
  }
}	

See the Pen CSS - grid layout by uquico (@uquico) on CodePen.


CSSのFlex boxと似ていますが、グリッドレイアウトは縦横自由に配置できます。対応ブラウザについてはこちらで確認してください。

Leave a Comment