プロパティ grid-auto-columns
プロパティ grid-auto-columns は、
暗黙的グリッド内で要素が占める列の数と幅を
指定します。
暗黙的グリッド - これは、要素が
すでに定義されたグリッドの枠を超える場合に
自動的に作成されるグリッドです。
プロパティの値では、サイズの単位で
列の幅を指定します。
このプロパティは親要素に指定され、
子孫要素の列の幅を定義します。
構文
セレクタ {
grid-auto-columns: 列幅;
}
例
暗黙的グリッド内の要素の列幅を設定してみましょう：
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: 40px 40px;
grid-auto-columns: 200px;
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
関連項目
-
プロパティ
grid-auto-rows,
これは暗黙的グリッド内の行の数と高さを指定します -
プロパティ
grid-template-columns,
これはグリッド内の列の数と幅を指定します
