CSS グリッドレイアウト
CSS グリッドレイアウトは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。
表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。
基本的な例
次の例では、最小値100ピクセル、最大値 auto で作成された列を含む、3つの行を表示します。要素は line-based placement に従ってグリッド上に配置されます。
HTML
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>CSS
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
リファレンス
CSS プロパティ
grid-template-columnsgrid-template-rows(en-US)grid-template-areasgrid-templategrid-auto-columns(en-US)grid-auto-rows(en-US)grid-auto-flow(en-US)gridgrid-row-start(en-US)grid-column-startgrid-row-end(en-US)grid-column-end(en-US)grid-rowgrid-columngrid-area(en-US)row-gapcolumn-gapgapmasonry-auto-flow(en-US)align-tracks(en-US)justify-tracks(en-US)
CSS 関数
CSS データ型
用語集
ガイド
外部リソース
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Grid Layout Module Level 2 | 草案 | サブグリッドの追加 |
| CSS Grid Layout | 勧告候補 | 初回定義 |