grid-auto-columns

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

grid-auto-columns は CSS のプロパティで、暗黙的に生成されたグリッドの列トラックまたはトラックのパターンの大きさを指定します。

試してみましょう

grid-auto-columns: auto;

grid-auto-columns: 1fr;

grid-auto-columns: min-content;

grid-auto-columns: minmax(10px, auto);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div></div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

#example-element > div:nth-child(1) {
  grid-column: 1 / 3;
}

#example-element > div:nth-child(2) {
  grid-column: 2;
}

グリッドアイテムが grid-template-columns で明示的に大きさが指定されていない列に配置された場合、暗黙的に grid トラックが作成され、そのアイテムを保持します。これには、範囲外の列に明示的に配置する場合と、自動配置アルゴリズムによって追加の列が作成される場合があります。

構文

css
/* キーワード値 */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/* <length> 値 */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/* <percentage> 値 */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/* <flex> 値 */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/* minmax() 値 */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/* fit-content() 値 */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/* multiple track-size 値 */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr)
  minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

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

値

<length>

負の値ではない長さです。

<percentage>

グリッドコンテナーのインライン方向の寸法に対する相対値で、負ではない <percentage> です。グリッドコンテナーのインライン方向の寸法が不定の場合は、パーセント値は auto のように扱われます。

<flex>

fr の単位の付いた負の数ではない値で、トラックのフレックス係数を指定します。 <flex> の寸法のトラックは、残りの空間をフレックス係数の割合に比例して分け合います。

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

max-content

グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。

min-content

グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。

minmax(min, max)

min 以上、max 以下の寸法の範囲を定義する関数記法です。 max が min より小さい場合は、 max は無視され、 min として扱われます。<flex> の値は、最大値として、トラックのフレックス係数を設定します。最小値としては、ゼロ（または、グリッドコンテナーの寸法が最小コンテンツの制約を受けている場合は、最小コンテンツ）として扱われます。

fit-content( [ <length> | <percentage> ] )

min(max-content, max(auto, argument)) という式を表します。この式は、トラックの寸法が auto の最小値よりも大きい場合に argument で固定されることを除いて、auto と同様 (すなわち minmax(auto, max-content)) に計算されます。

auto

最大値としては、そのトラック内のアイテムの最大の max-content のサイズを表します。

最小値としては、そのトラック内のアイテムの最大の最小サイズ（アイテムの min-width/min-height で指定します）を表します。これは常にではありませんが、 min-content のサイズであることが多いです。

minmax() 表記の外で使用した場合、 auto は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、 minmax(min-content,max-content) と同様の動作をします。

メモ: トラックの寸法が auto の場合は、align-contentとjustify-contentのプロパティによって引き伸ばすことができます。従って既定では、 auto サイズのトラックはグリッドコンテナーの残りの空間を占めます。

公式定義

初期値auto
適用対象グリッドコンテナー
継承なし
パーセント値コンテンツ領域の対応する寸法に対する相対値
計算値指定されたパーセント値または絶対的な長さ
アニメーションの種類計算値の型による

形式文法

grid-auto-columns = 
  <track-size>+  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>

例

グリッド列の寸法を設定

HTML

html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

css
#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}

結果

仕様書

Specification
CSS Grid Layout Module Level 2
# auto-tracks

ブラウザーの互換性

関連情報