2021/11/30 時点の英語版に同期

1 files changed, 153 insertions, 0 deletions

diff --git a/files/ja/web/css/grid-auto-flow/index.md b/files/ja/web/css/grid-auto-flow/index.md
new file mode 100644
index 0000000000..ee076184a5
--- /dev/null
+++ b/files/ja/web/css/grid-auto-flow/index.md
@@ -0,0 +1,153 @@
+---
+title: grid-auto-flow
+slug: Web/CSS/grid-auto-flow
+tags:
+  - CSS
+  - CSS グリッド
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.grid-auto-flow
+---
+{{CSSRef}}
+
+The **`grid-auto-flow`** CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
+
+{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}
+
+## 構文
+
+```css
+/* キーワード値 */
+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: unset;
+```
+
+This property may take one of two forms:
+
+- a single keyword: one of `row`, `column`, or `dense`.
+- two keywords: `row dense` or `column dense`.
+
+### 値
+
+- `row`
+  - : Items are placed by filling each row in turn, adding new rows as necessary. If neither `row` nor `column` is provided, `row` is assumed.
+- `column`
+  - : Items are placed by filling each column in turn, adding new columns as necessary.
+- `dense`
+
+  - : "dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.
+
+    If it is omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later items.
+
+## Formal definition
+
+{{cssinfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Setting grid auto-placement
+
+#### HTML
+
+```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
+
+```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;
+}
+```
+
+```js hidden
+function changeGridAutoFlow() {
+  var grid = document.getElementById("grid");
+  var direction = document.getElementById("direction");
+  var dense = document.getElementById("dense");
+  var gridAutoFlow = direction.value === "row" ? "row" : "column";
+
+  if (dense.checked) {
+    gridAutoFlow += " dense";
+  }
+
+  grid.style.gridAutoFlow = gridAutoFlow;
+}
+
+const selectElem = document.querySelector('select');
+const inputElem = document.querySelector('input');
+selectElem.addEventListener('change', changeGridAutoFlow);
+inputElem.addEventListener('change', changeGridAutoFlow);
+```
+
+#### Result
+
+{{EmbedLiveSample("Setting_grid_auto-placement", "200px", "230px")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Related CSS properties: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid")}}
+- Grid Layout Guide: _[Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)_
+- Video tutorial: _[Introducing Grid auto-placement and order](http://gridbyexample.com/video/series-auto-placement-order/)_