CSS grid-auto-columns 属性

定義と使用法

grid-auto-columns属性は、グリッドコンテナ内の列のサイズを設定します。

この属性は、サイズが設定されていない列にのみ影響します。

また参照してください：

CSSチュートリアル：CSSグリッドレイアウト

CSSリファレンスマニュアル：grid-auto-rows属性

例

グリッド内の列にデフォルトのサイズを設定します：

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

実際に試してみてください

CSS文法

grid-auto-columns: auto|max-content|min-content|length;

属性値

値 説明
auto デフォルト値。コンテナのサイズに基づいて、列のサイズを決定します。
fit-content()
max-content 列の中で最も大きなアイテムに基づいて、各列のサイズを設定します。
min-content 列の中で最も小さいアイテムに基づいて、各列のサイズを設定します。
minmax(min.max) minとmaxの間で、またはminとmaxの値に等しいサイズ範囲を設定します。
length 合法な長さ値を使用して、列のサイズを設定します。参照してください：長さ単位。
% パーセント値を使用して、列のサイズを設定します。

技術的詳細

デフォルト値： auto
継承： いいえ
アニメーション作成： サポート。参照してください：アニメーション関連属性。
バージョン： CSS Grid Layout Module Level 1
JavaScript文法： object.style.gridAutoColumns="120px"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44