path: root/files/pt-pt/web/css/css_grid_layout/index.html

---
title: CSS - Layout de Grade
slug: Web/CSS/layout_de_grelha_css
tags:
  - CSS
  - Grades
  - Layout
  - Layout de Grade
  - Referencia
  - Resumo
translation_of: Web/CSS/CSS_Grid_Layout
---
<p><strong>CSS - Layout de Grade </strong>destaca-se em dividir uma página em regiões principais, ou definir a relação em termos de tamanho, posição e camada, entre partes de um controle criado a partir de HTML primitivas. <br>
  <br>
 Tal como as tabelas, o layout de grelha permite que um autor alinhe os elementos em colunas e linhas. No entanto, são possíveis muitos mais layouts ou mais fáceis com a grelha de CSS do que eram com as tabelas. Por exemplo, os elementos filhos de um recipiente de grelha poderão posicionar-se a eles mesmos, e assim eles realmente se sobrepõem e a camada, similar aos elementos posicionados do CSSs..</p>

<h2 id="Basic_Example" name="Basic_Example">Exemplo básico</h2>

<p>O exemplo abaixo mostra uma grelha de faixa com três colunas, com novas linhas criadas com um mínimo de 100 píxeis e um máximo de <em>auto</em>. Os itens foram colocados na grelha utilizando o posicionamento baseado em linha .</p>

<div id="example">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper &gt; div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}</pre>
</div>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;div class="one"&gt;One&lt;/div&gt;
  &lt;div class="two"&gt;Two&lt;/div&gt;
  &lt;div class="three"&gt;Three&lt;/div&gt;
  &lt;div class="four"&gt;Four&lt;/div&gt;
  &lt;div class="five"&gt;Five&lt;/div&gt;
  &lt;div class="six"&gt;Six&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
</pre>

<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
</div>

<h2 id="Referência">Referência</h2>

<h3 id="CSS_-_propriedades">CSS - propriedades</h3>

<div class="index">
<ul>
 <li>{{cssxref("grid-template-columns")}}</li>
 <li>{{cssxref("grid-template-rows")}}</li>
 <li>{{cssxref("grid-template-areas")}}</li>
 <li>{{cssxref("grid-template")}}</li>
 <li>{{cssxref("grid-auto-columns")}}</li>
 <li>{{cssxref("grid-auto-rows")}}</li>
 <li>{{cssxref("grid-auto-flow")}}</li>
 <li>{{cssxref("grid")}}</li>
 <li>{{cssxref("grid-row-start")}}</li>
 <li>{{cssxref("grid-column-start")}}</li>
 <li>{{cssxref("grid-row-end")}}</li>
 <li>{{cssxref("grid-column-end")}}</li>
 <li>{{cssxref("grid-row")}}</li>
 <li>{{cssxref("grid-column")}}</li>
 <li>{{cssxref("grid-area")}}</li>
 <li>{{cssxref("grid-row-gap")}}</li>
 <li>{{cssxref("grid-column-gap")}}</li>
 <li>{{cssxref("grid-gap")}}</li>
</ul>
</div>

<h3 id="CSS_-_funções">CSS - funções</h3>

<div class="index">
<ul>
 <li>{{cssxref("repeat", "repeat()")}}</li>
 <li>{{cssxref("minmax", "minmax()")}}</li>
 <li>{{cssxref("fit-content", "fit-content()")}}</li>
</ul>
</div>

<h3 id="CSS_-_tipos_de_dados">CSS - tipos de dados</h3>

<div class="index">
<ul>
 <li>{{cssxref("&lt;flex&gt;")}}</li>
</ul>
</div>

<h3 id="Glossário_-_entradas">Glossário - entradas</h3>

<div class="index">
<ul>
 <li><a href="/pt-PT/docs/Glossário/grelha">Grelha</a></li>
 <li><a href="/pt-PT/docs/Glossário/linhas_de_grelha">Linhas de Grelha</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 Area</a></li>
 <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
 <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</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>
</ul>
</div>

<h2 id="Guias">Guias</h2>

<div class="index">
<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</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 using named grid lines</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li>
</ul>
</div>

<h2 id="Recursos_externos">Recursos externos</h2>

<ul>
 <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li>
 <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li>
 <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
 <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li>
</ul>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Grid') }}</td>
   <td>{{ Spec2('CSS3 Grid') }}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<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>Guides</strong></a>
  <ol>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</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 using named grid lines</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in 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 and writing modes</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>Properties</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>Glossary</strong></a>
  <ol>
   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
   <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_Axis">Grid Axis</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>