gridプロパティ
gridプロパティは、
グリッドコンテナのすべての列と行に関するプロパティの
一括指定です。すべての
値は1行でスラッシュで区切って記述します。
gridを使用して1行で記述できるのは、
一つの種類のプロパティのみです -
明示的なプロパティ(grid-template-rows、
grid-template-columns、
grid-template-areas)
または暗黙的なプロパティ(grid-auto-rows、
grid-auto-columns、
grid-auto-flow)。
指定されなかったプロパティは、
デフォルト値を取ります。
構文
セレクター {
grid: グリッドプロパティ;
}
例
gridプロパティを使ってテーブルを作成してみましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
例
次に、2行目と3行目に同じ高さを設定し、 各列に異なる幅を設定してみましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 60px 1fr 60px / 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
例
前の例のテーブルで、 一番上の行の高さを2frに、 最初の列の幅を0.5frにしてみましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
関連項目
-
grid-templateプロパティ、
要素の列と行の数とサイズを設定します -
grid-template-rowsプロパティ、
グリッドの行の数とサイズを設定します -
grid-template-columnsプロパティ、
グリッドの列の数とサイズを設定します -
grid-template-areasプロパティ、
グリッド内の要素の配置を設定します -
grid-auto-flowプロパティ、
グリッド内のアイテムの自動配置方法を設定します