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/glossario/grade/index.html | 69 ++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 files/pt-br/glossario/grade/index.html (limited to 'files/pt-br/glossario/grade') diff --git a/files/pt-br/glossario/grade/index.html b/files/pt-br/glossario/grade/index.html new file mode 100644 index 0000000000..ee60bf19a9 --- /dev/null +++ b/files/pt-br/glossario/grade/index.html @@ -0,0 +1,69 @@ +--- +title: Grade +slug: Glossario/Grade +translation_of: Glossary/Grid +--- +

Uma grade no CSS é definida usando o valor grid da propriedade {{cssxref("display")}}; você pode definir colunas e linhas na sua grade usando as propridades {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-columns")}}.

+ +

A grade que você define usando essas propriedades é descrita como uma grade explícita.

+ +

Se você colocar o conteúdo fora dessa grade explícita ou se estiver utilizando o posicionamento automático e o algoritmo da grade precisar criar linhas ou colunas adicionais {{glossary("grid tracks", "tracks")}} para manter {{glossary("grid item", "grid items")}}, então serão criadas faixas extras na grade implícita. A grade implícita é a grade criada automaticamente devido ao conteúdo adicionado fora das faixas definidas.

+ +

No exemplo abaixo, criamos uma grade explícita de três colunas e duas linhas. A terceira linha da grade é uma faixa implícita de linha da grade, formada por serem mais do que os seis os itens que preenchem as faixas explícitas.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+}
+
+ +
<div class="wrapper">
+<div> Um </div>
+    <div> dois </div>
+    <div> três </div>
+    <div> quatro </div>
+    <div> cinco </div>
+    <div> seis </div>
+    <div> sete </div>
+    <div> oito </div>
+</div>
+
+
+ +

{{ EmbedLiveSample('example', '500', '330') }}

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