CSSプロパティ grid-auto-flow: グリッドレイアウトの自動配置を制御

grid-auto-flow プロパティは、CSSグリッドレイアウトにおいて、**明示的に配置されていないグリッドアイテム**がどのように配置されるかを制御します。言い換えれば、grid-template-columns や grid-template-rows で定義されたグリッド線の外側にアイテムが配置される場合の動作を指定します。

構文

```css /* キーワード値 */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: row dense; grid-auto-flow: column dense; /* グローバル値 */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: revert; grid-auto-flow: unset; ```

値

row: (デフォルト) グリッドアイテムは行方向に順番に配置されます。行がいっぱいになると、次の行に配置されます。
column: グリッドアイテムは列方向に順番に配置されます。列がいっぱいになると、次の列に配置されます。
dense: 密集配置モードを有効にします。ブラウザは、ソースコード上の順番を無視して、グリッド内の隙間を埋めるようにアイテムを配置しようとします。
row dense / column dense: row もしくは column と dense を組み合わせた効果です。それぞれ行方向、列方向への配置と密集配置を組み合わせた動作になります。

例

以下は、grid-auto-flow プロパティの様々な値の効果を示す例です。

デフォルト動作 (row)

デフォルトでは、グリッドアイテムは行方向に自動配置されます。


<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  background-color: #2197E8;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h2>grid-auto-flow: row;</h2>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>

列方向への配置 (column)

grid-auto-flow: column を使用すると、グリッドアイテムは列方向に自動配置されます。


<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  background-color: #2197E8;
  padding: 10px;
  grid-auto-flow: column;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h2>grid-auto-flow: column;</h2>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>

密集配置 (dense)

grid-auto-flow: dense を使用すると、密集配置モードが有効になります。この例では、アイテム1と2によって隙間ができていますが、アイテム3は密集配置によってその隙間に配置されます。


<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #2197E8;
  padding: 10px;
  grid-auto-flow: dense;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.item2 { grid-column: 3 / 4; grid-row: 1 / 2; }
</style>
</head>
<body>

<h2>grid-auto-flow: dense;</h2>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div>3</div>
  <div>4</div> 
</div>

</body>
</html>

ブラウザ対応状況

grid-auto-flow プロパティは、主要なブラウザで広くサポートされています。

ブラウザ	バージョン
Chrome	57+
Firefox	52+
Safari	10.1+
Edge	16+
Opera	44+

詳細については、以下のリソースを参照してください。 * MDN Web Docs: grid-auto-flow * Can I use: grid-auto-flow

CSSプロパティ grid-auto-flow: グリッドレイアウトの自動配置を制御

構文

値

例

デフォルト動作 (row)

列方向への配置 (column)

密集配置 (dense)

ブラウザ対応状況

関連FAQ