もっとも標準的な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行目までにラインを伸ばすように指定をしています。