--- title: grid-template-columns slug: Web/CSS/grid-template-columns tags: - CSS - CSS Grid - CSS Property - Reference - 'recipe:css-property' translation_of: Web/CSS/grid-template-columns ---

grid-template-columns は CSS のプロパティで、{{glossary("grid column", "グリッド列")}}のライン名とトラックのサイズ変更機能を定義します。

{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}

構文

/* キーワード値 */
grid-template-columns: none;

/* <track-list> 値 */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;

/* <auto-track-list> 値 */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* グローバル値 */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

値

none
明示的なグリッドがないことを示します。どの列も暗黙的に生成され、それらのサイズは {{cssxref("grid-auto-columns")}} プロパティによって決定されます。
{{cssxref("<length>")}}
負の値ではない長さで、列の幅を指定します。
{{cssxref("<percentage>")}}
グリッドコンテナーのインライン方向の寸法に対する相対値で、負ではない {{cssxref("percentage", "<percentage>")}} です。グリッドコンテナーの寸法がトラックの寸法に依存する場合は、パーセント値を auto として扱う必要があります。
トラックの本質的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。
{{cssxref("<flex>")}}
fr の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 <flex> の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。

minmax() 表記の外に現れた場合は、最小値が自動として扱われます (つまり minmax(auto, <flex>))。

max-content
グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。
min-content
グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。
{{cssxref("minmax", "minmax(min, max)")}}
min 以上、 max 以下の寸法の範囲を定義する関数表記法です。 max が min より小さい場合、 max は無視され、関数は min として扱われます。最大値として、 <flex> 値はトラックのフレックス係数を設定します。最小値としては無効です。
auto
最大値であれば max-content と同一のキーワードです。最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。

注: トラックの寸法が auto の場合 (そして auto の場合だけ)、 {{cssxref("align-content")}} および{{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。

{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
min(max-content, max(auto, argument)) の式を表し、 auto と同様に (すなわち minmax(auto, max-content) と) 計算されますが、トラックの寸法が auto の最小値よりも大きい場合は argument でクランプされるところが異なります。
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
トラックリストの繰り返しフラグメントを表し、繰り返しパターンを示す多数の列をよりコンパクトな形式で記述できるようにします。
subgrid
subgrid の値は、グリッドがその軸に親グリッドのスパン部分を採用することを示します。グリッドの行や列のサイズは、明示的に指定されるのではなく、親グリッドの定義から取得されます。

サブグリッドの値はグリッド仕様書のレベル 2 にあり、現在のところ Firefox 71 以降でのみ実装されています。

公式定義

{{cssinfo}}

形式文法

{{csssyntax}}

例

グリッド列の寸法の指定

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

結果

{{EmbedLiveSample("Specifying_grid_column_sizes", "100%", "20px")}}

仕様書

仕様書 状態 備考
{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}} {{Spec2("CSS Grid 2")}} subgrid を追加
{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}} {{Spec2("CSS Grid")}} 初回定義

ブラウザーの互換性

{{Compat("css.properties.grid-template-columns")}}

関連情報