CSS grid-template-columnsプロパティ
例
4列のグリッドコンテナを作成する：
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
試してみる »
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。
| プロパティ | |||||
|---|---|---|---|---|---|
| grid-template-columns | 57 | 16 | 52 | 10 | 44 |
プロパティの定義と使用説明
grid-template-columns プロパティは、グリッドレイアウトの列数と幅を設定するために使用します。
| デフォルト値: | auto |
|---|---|
| 継承: | no |
| アニメーション: | サポートされています。詳細はこちらanimatable 試してみる |
| バージョン: | CSS グリッドレイアウトモジュール Level 1 |
| JavaScript 構文: | object.style.gridTemplateColumns="50px 50px 50px" 試してみる |
構文
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
| 值 | 説明 |
|---|---|
| none | デフォルト値で、列のサイズを指定しません。 |
| auto | 列のサイズは、コンテナのサイズと列内のグリッド要素のコンテンツサイズによって決まります。 |
| max-content | 各列のサイズは、その列内の最大のグリッド要素のサイズに設定されます。 |
| min-content | 各列のサイズは、その列内の最小のグリッド要素のサイズに設定されます。 |
| length | 長さの値。px単位の数値またはパーセンテージ%を指定できます。0がデフォルト値です。詳細はこちら長さの単位。 |
| initial | このプロパティをデフォルト値に設定します。initial の詳細はこちら |
| inherit | 親要素からこのプロパティを継承します。 inherit の詳細はこちら |
その他の例
例
4列のグリッドコンテナを作成し、各列にサイズを設定する：
.grid-container {
display: grid;
grid-template-columns: 30px 200px auto 100px;
}
試してみる »
関連記事
CSS チュートリアル:CSS グリッドレイアウト
CSS リファレンス:grid-areaプロパティ
CSS リファレンス:grid-template-rowsプロパティ
CSS リファレンス:grid-template-columnsプロパティ
CSS リファレンス:grid-template-areasプロパティ
その他の拡張