CSSgrid -template-columnsプロパティ

4列のグリッドコンテナを作成します。

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}

定義と使用法

このgrid-template-columnsプロパティは、グリッドレイアウトの列の数（および幅）を指定します。

値はスペースで区切られたリストであり、各値はそれぞれの列のサイズを指定します。

デフォルト値：	なし
遺伝性の：	いいえ
アニメート可能：	はい。アニメート可能について読む
バージョン：	CSSグリッドレイアウトモジュールレベル1
JavaScript構文：	object .style.gridTemplateColumns = "50px 50px 50px"

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
grid-template-columns	57	16	52	10	44

Value	Description	Play it
none	Default value. Columns are created if needed
auto	The size of the columns is determined by the size of the container and on the size of the content of the items in the column
max-content	Sets the size of each column to depend on the largest item in the column
min-content	Sets the size of each column to depend on the smallest item in the column
length	Sets the size of the columns, by using a legal length value. Read about length units
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

4列のグリッドコンテナを作成し、各列のサイズを指定します。

.grid-container {
display: grid;
grid-template-columns: 30px 200px auto 100px;
}