トップページ  > CSS  > grid

★CSSリファレンス

grid …… グリッドについてまとめて指定する
Google Chrome Safari Firefox Opera
広告

gridプロパティは、グリッドについてまとめて指定する際に使用します。

gridプロパティで指定できるのは、 明示的なグリッドに関する grid-template-rowsgrid-template-columnsgrid-template-areasプロパティの値、 または、暗黙的なグリッドに関する grid-auto-rows, grid-auto-columns, grid-auto-flowプロパティの値です。

上記プロパティのすべての値を1つのgridプロパティの宣言で指定できるのではなく、 1つのgridプロパティ宣言では、明示的なグリッドに関するプロパティの値のみ、または、暗黙的なグリッドに関するプロパティの値のみが指定できます。

■値

grid-templateの値
grid-templateプロパティは、 grid-template-rowsgrid-template-columnsgrid-template-areasのショートハンド。 各プロパティのページを参照
grid-template-rowsの値 / grid-template-columnsの値
各プロパティのページを参照
grid-auto-rowsの値 / grid-auto-columnsの値
各プロパティのページを参照
grid-template-areasの値
grid-template-areasを参照
auto-flow dense
grid-auto-flowを参照

■初期値・適用対象・値の継承

初期値
各プロパティのページを参照
適用対象
グリッドコンテナ
値の継承
しない

■使用例

CSSソースは外部ファイル(sample.css)に記述

div.sample {
	display: grid;
	grid: 80px 100px 40px / 50px 100px 40px;
}

div.sample div {
	margin:4px; border-radius:4px;
	background-color:#66cc99;
}

HTMLソース

<div class="sample">
<div>一</div>
<div>ニ</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
<div>七</div>
<div>八</div>
<div>九</div>
<div>十</div>
</div>
↓↓↓

ブラウザ上の表示

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ