grid-auto-columns プロパティ
grid-auto-columns プロパティは、display:grid; によるエレメント(グリッドコンテナ)の子エレメント(グリッドアイテム)の幅を指定するプロパティです。
grid-auto-columns プロパティの値は、全ての子エレメントに設定されます。
grid-auto-columns プロパティは、display:grid; が設定されたエレメントで指定します。
grid-auto-columns: 30%;
詳しくはExample
を参照してください。
ページ内 Index
構文(Syntax)
CSS
grid-auto-columns: auto | max-content | min-content | minmax(a,b) | fit-content(length) | length ;
DOM ( JavaScript )
String = object.style.gridAutoColumns;
object.style.gridAutoColumns=" auto | max-content | min-content | minmax(a,b) | fit-content(length) | length ";
値(Values)
Value | 摘要 |
---|---|
auto | 初期値(default値) |
max-content | 最大サイズ |
min-content | 最小サイズ |
minmax(a,b) | a以上b以下で自動調整 |
fit-content(length) | 最大lengthのサイズ |
length | 数値で指定 |
備考(Remarks)
初期値(Default value) | auto |
継承(Inherited) | No |
CSS Animation | Yes |
Example
グリッドアイテムの並びと大きさを指定
grid-auto-columnsの例です。 grid-auto-columnsが指定された値にグリッドアイテムのサイズは設定されます。空きの部分が出ることが分かります。
グリッドアイテムの並びを設定するgrid-templateプロパティをコメントアウトしています。
関連するプロパティ
以下は関連するプロパティです。
display:grid; | 並びを設定することができるdisplayプロパティ |
grid-area | グリッドアイテムに名称を指定 |
grid-auto-columns | グリッドアイテムの幅 |
grid-auto-flow | グリッドコンテナの領域を自動的に拡張 |
grid-auto-rows | 全てのグリッドアイテムの高さ |
grid-column | グリッドアイテムの列単位の位置と連結数 |
grid-column-end | 列単位の位置や連結数 |
grid-column-gap | 列同士のギャップ幅 |
grid-column-start | 列単位(横)の位置や連結数 |
grid-gap | グリッドアイテムどうしのギャップのサイズ |
grid-row | 行単位の位置と連結数 |
grid-row-end | 行単位の位置や連結数 |
grid-row-gap | 行同士のギャップ幅 |
grid-row-start | 行単位の位置や連結 |
grid-template | グリッドアイテムの並び数やサイズ |
grid-template-areas | グリッドアイテムの配置や連結 |
grid-template-columns | グリッドアイテムの列の並び数、幅 |
grid-template-rows | グリッドアイテムの行の並び数と高さ |