備忘録的プログラミングリファレンス

grid-auto-columns プロパティ

 grid-auto-columns プロパティは、display:grid; によるエレメント(グリッドコンテナ)の子エレメント(グリッドアイテム)の幅を指定するプロパティです。 grid-auto-columns プロパティの値は、全ての子エレメントに設定されます。
 grid-auto-columns プロパティは、display:grid; が設定されたエレメントで指定します。

グリッドアイテムの幅を全体の 30% に指定
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 AnimationYes

Example

グリッドアイテムの並びと大きさを指定

 grid-auto-columnsの例です。 grid-auto-columnsが指定された値にグリッドアイテムのサイズは設定されます。空きの部分が出ることが分かります。

 グリッドアイテムの並びを設定するgrid-templateプロパティをコメントアウトしています。