もっとも標準的なCSS Gridの例

もう少し具体的にCSS Gridについて見ていきましょう。
下記の例では、3つの列と2つの行で構成されているCSS Grid Layoutです。
一番右のセルは2行にまたがっているように見えます。

box.png

これをコードに直してみると、以下のようになるでしょう。

.container {
  display: grid;
  grid-template-columns: [col1] 33% [col2] 33% [col3] 33%;
  grid-gap: 10px;
  grid-template-rows: [row1] 47% [row2] 47%;
  text-align: center;
  color: #fcfcfc;
}

.grid-item-1 {
  background-color: #0060e6;
  padding: 25px;
  border-radius: 6px;
}

.grid-item-2 {
  background-color: #0060e6;
  padding: 25px;
  border-radius: 6px;
}

.grid-item-3 {
  background-color: #0060e6;
  padding: 25px;
  border-radius: 6px;
}

.grid-item-4 {
  background-color: #0060e6;
  padding: 25px;
  border-radius: 6px;
}

.grid-item-5 {
  background-color: #ff1493;
  grid-column: 3 ;
  grid-row: 1 / 3;
  padding: 25px;
  border-radius: 6px;
}

HTMLは以下のようになります。

<div class="container">
  <div class="grid-item-1”>1</div>
  <div class="grid-item-2”>2</div>
  <div class="grid-item-3”>3</div>
  <div class="grid-item-4”>4</div>
  <div class="grid-item-5”>5</div>
</div>

「.container」内では列の横幅や行の高さを指定します。
また、ブラケットを使うことで名前を指定することもできます。
「.grid-cell-5」については、「grid-column: 3;」をつけることで、3番目の列に来るように指定しています。
「grid-row: 1/3」は、最初の行から(実際には存在しない)3行目までにラインを伸ばすように指定をしています。