grid-auto-flow
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
grid-auto-flow
は CSS のプロパティで、自動配置のアルゴリズムの動作を制御し、自動配置されたアイテムがどのようにグリッドに流れ込むかを正確に指定するものです。
試してみましょう
メモ: masonry-auto-flow
プロパティは、CSS のメイソンリーレイアウトにありましたが、 grid-auto-flow
に取って代わられ、廃止されました。
詳細は csswg-drafts #10231 をご覧ください。
構文
/* キーワード値 */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
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: revert-layer;
grid-auto-flow: unset;
このプロパティは、次のいずれかの形態を取ることができます。
- 単一のキーワード:
row
、column
、dense
のうち 1 つ - 2 つのキーワード:
row dense
またはcolumn dense
値
row
-
アイテムは、各行を順番に埋めていき、必要に応じて新しい行を追加していくことで配置されます。
row
とcolumn
のどちらも指定されなかった場合は、row
とみなされます。 column
-
アイテムは、各列を順番に埋めていき、必要に応じて新しい列を追加していくことで配置されます。
dense
-
"dense" パッキングアルゴリズムは、小さいアイテムが後で出てきた場合、グリッドの早い段階で穴を埋めようとします。そのため、より大きなアイテムが残した穴を埋めるために、アイテムが順番通りに表示されないことがあります。
これを省略すると、 "sparse" アルゴリズムが使用され、配置アルゴリズムはアイテムを配置するときにグリッド内を「前に進む」だけで、穴を埋めるために後ろに戻ることはありません。これにより、自動配置されたアイテムはすべて「順番通り」に表示され、たとえ後から配置したアイテムで埋められるはずの穴が残っていたとしても、確実に埋められるようになります。
公式定義
初期値 | row |
---|---|
適用対象 | グリッドコンテナー |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
グリッドの自動配置を設定する
HTML
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
<div id="item5"></div>
</div>
<select id="direction">
<option value="column">column</option>
<option value="row">row</option>
</select>
<input id="dense" type="checkbox" />
<label for="dense">dense</label>
CSS
#grid {
height: 200px;
width: 200px;
display: grid;
gap: 10px;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */
}
#item1 {
background-color: lime;
grid-row-start: 3;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
#item4 {
grid-column-start: 2;
background-color: red;
}
#item5 {
background-color: aqua;
}
結果
仕様書
Specification |
---|
CSS Grid Layout Module Level 2 # grid-auto-flow-property |
ブラウザーの互換性
BCD tables only load in the browser