From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/grid-auto-flow/index.html | 207 ++++++++++++++++++++++++++ 1 file changed, 207 insertions(+) create mode 100644 files/pt-br/web/css/grid-auto-flow/index.html (limited to 'files/pt-br/web/css/grid-auto-flow') diff --git a/files/pt-br/web/css/grid-auto-flow/index.html b/files/pt-br/web/css/grid-auto-flow/index.html new file mode 100644 index 0000000000..ae212a18a6 --- /dev/null +++ b/files/pt-br/web/css/grid-auto-flow/index.html @@ -0,0 +1,207 @@ +--- +title: grid-auto-flow +slug: Web/CSS/grid-auto-flow +tags: + - pt-br +translation_of: Web/CSS/grid-auto-flow +--- +

A propriedade de CSS grid-auto-flow controla como o algoritmo de arrumação automática funciona, especificando exatamente como os itens fluirão no grid.

+ +
/* 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;
+
+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Esta propriedade pode ser de duas maneiras:

+ + + +

Valores

+ +
+
row (linha)
+
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 row(linha) ou column(coluna) for especificado, row (linha) é assumido.
+
column (coluna)
+
É uma keyword (palavra-chave) que determina que o algoritmo de arrumação automática coloque os itens preenchendo colunas, adicionando novas se necessário.
+
+ +
+
dense (denso)
+
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.
+
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.
+
+ +

Sintaxe Formal

+ +
{{csssyntax}}
+ +

Exemplo

+ +

Conteúdo 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>
+
+ +

Conteúdo CSS

+ +
#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;
+}
+ + + +

{{EmbedLiveSample("Example", "200px", "230px")}}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}{{Spec2("CSS3 Grid")}}Definição Inicial
+ +

Compatibilidade de Browser

+ + + +

{{Compat("css.properties.grid-auto-flow")}}

+ +

Veja Também

+ + + + -- cgit v1.2.3-54-g00ecf