1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
|
---
title: grid-auto-flow
slug: Web/CSS/grid-auto-flow
tags:
- pt-br
translation_of: Web/CSS/grid-auto-flow
---
<p>A propriedade de CSS <strong><code>grid-auto-flow </code></strong> controla como o algoritmo de arrumação automática funciona, especificando exatamente como os itens fluirão no grid.</p>
<pre class="brush: css no-line-numbers">/* Keywords Chaves */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;
/* Valores globais */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;
</pre>
<p>{{cssinfo}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<p>Esta propriedade pode ser de duas maneiras:</p>
<ul>
<li>uma única keyword (palavra-chave): <code>row(linha)</code>, <code>column</code>(coluna), ou <code>dense(denso)</code>.</li>
<li>duas keywords (palavras-chave): <code>row dense(linha densa)</code> ou <code>column dense(coluna densa)</code>.</li>
</ul>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>row (linha)</code></dt>
<dd>Keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloca os itens preenchendo cada linha de uma vez, adicionando novas linhas se necessário. Se nem <code>row</code>(linha) ou <code>column(coluna) </code>for especificado, <code>row (linha)</code> é assumido.</dd>
<dt><code>column (coluna)</code></dt>
<dd>É uma keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloque os itens preenchendo colunas, adicionando novas se necessário.</dd>
</dl>
<dl>
<dt><code>dense (denso)</code></dt>
<dd>Keyword (palavra-chave) que determina que o algoritmo de arrumação automática use um formato de compactação "denso", que tenta preencher os espaços anteriores do grid caso receba itens menores após. Isto talvez deixe os itens fora de ordem, preenchendo espaços deixados por itens maiores.</dd>
<dd>Se omitido, o algoritmo "esparso" é utilizado, onde o algoritmo de arrumação somente "avança" no grid ao colocar os itens, nunca voltando para preencher os espaços. Isso garante que todos os itens colocados automaticamente apareçam "em ordem", mesmo que deixem espaçs que poderiam ser preenchidos por itens posteriores.</dd>
</dl>
<h3 id="Sintaxe_Formal">Sintaxe Formal</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemplo">Exemplo</h2>
<h3 id="Conteúdo_HTML">Conteúdo HTML</h3>
<pre class="brush: 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" onchange="changeGridAutoFlow()">
<option value="column">column</option>
<option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
<label for="dense">dense</label>
</pre>
<h3 id="Conteúdo_CSS">Conteúdo CSS</h3>
<pre class="brush: css; highlight[7]">#grid {
height: 200px;
width: 200px;
display: grid;
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;
}</pre>
<pre class="brush: 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;
}</pre>
<p>{{EmbedLiveSample("Example", "200px", "230px")}}</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}</td>
<td>{{Spec2("CSS3 Grid")}}</td>
<td>Definição Inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
<p>{{Compat("css.properties.grid-auto-flow")}}</p>
<h2 id="Veja_Também">Veja Também</h2>
<ul>
<li>Propriedades CSS relacionadas: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid")}}</li>
<li>Guia de Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Arrumação automática no grid layout </a></em></li>
<li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduzindo arrumação automática no grid e ordem</a></em></li>
</ul>
<section class="Quick_links" id="Quick_Links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
<li data-default-state="open"><a href="#"><strong>Guias</strong></a>
<ol>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceitos básicos do grid layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relacionamento com outros tipos de layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Arrumação baseada em linha</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout usando named grid lines</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Arrumação automática no grid layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alinhamento de Box no grid layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values e writing modes</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout e Acessibilidade</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout e Progressive Enhancement</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Identificando layouts comuns usando grids</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>Propriedades</strong></a>
<ol>
<li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>Glossário</strong></a>
<ol>
<li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
<li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
<li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
<li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
<li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
<li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
<li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
</ol>
</li>
</ol>
</section>
|
