diff options
Diffstat (limited to 'files/pt-br/glossary/grid/index.html')
| -rw-r--r-- | files/pt-br/glossary/grid/index.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/files/pt-br/glossary/grid/index.html b/files/pt-br/glossary/grid/index.html new file mode 100644 index 0000000000..ee60bf19a9 --- /dev/null +++ b/files/pt-br/glossary/grid/index.html @@ -0,0 +1,69 @@ +--- +title: Grade +slug: Glossario/Grade +translation_of: Glossary/Grid +--- +<p>Uma <em>grade no CSS </em>é definida usando o valor <code>grid</code> 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")}}.</p> + +<p>A grade que você define usando essas propriedades é descrita como uma <em>grade explícita</em>.</p> + +<p>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 <em>grade implícita</em> é a grade criada automaticamente devido ao conteúdo adicionado fora das faixas definidas.</p> + +<p>No exemplo abaixo, criamos uma <em>grade explícita</em> de três colunas e duas linhas. A terceira linha da grade é uma <em>faixa implícita de linha da grade</em>, formada por serem mais do que os seis os itens que preenchem as faixas explícitas.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; +} +</pre> + +<pre class="brush: html notranslate"><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> +</pre> +</div> + +<p>{{ EmbedLiveSample('example', '500', '330') }}</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li>CSS Grid Layout Guide:<br> + <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li> + <li>Property reference + <ol> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-template")}}</li> + </ol> + </li> +</ol> +</section> |