Layout de grade CSS

Índice

    Mostrar índice

O CSS Grid Layout Module oferece um sistema de layout baseado em grade, com linhas e colunas, facilitando o design de páginas web sem a necessidade de usar floats e posicionamento:

Header

Menu

Main

Right

Footer


Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

Um Layout de Grade deve ter um elemento pai com a propriedade display definida como grid.

Elementos filhos diretos do contêiner de grade tornam-se automaticamente itens de grade.

1
2
3
4
5
6
7

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-row: 1;
  grid-column: 1;
}

.item2 {
  grid-row: 1;
  grid-column: 2;
}

.item3 {
  grid-row: 1;
  grid-column: 3;
}

.item4 {
  grid-row: 2;
  grid-column: 1;
}

.item5 {
  grid-row: 2;
  grid-column: 2;
}

.item6 {
  grid-row: 2;
  grid-column: 3;
}

.item7 {
  grid-row: 3;
  grid-column: 1 / span 3;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>  
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
  <div class="grid-item item6">6</div>  
  <div class="grid-item item7">7</div>
</div>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em>.</p>

<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

</body>
</html>

Layout de grade

O CSS Grid Layout Module oferece um sistema de layout baseado em grade, com linhas e colunas, facilitando o design de páginas web sem a necessidade de usar flutuadores e posicionamento.

Suporte ao navegador

As propriedades da grade são suportadas em todos os navegadores modernos.

57.0 16.0 52.0 10 44

Elementos de grade

Um layout de grade consiste em um elemento pai, com um ou mais elementos filhos.

Exemplo

<div 
  class="grid-container">
  <div class="grid-item">1</div>
  <div 
  class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div 
  class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div 
  class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

1

2

3

4

5

6

7

8

9

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Propriedade de exibição

Um elemento HTML se torna um contêiner de grade quando sua propriedade display está configurado para grade ou grade inline.

Exemplo

 .grid-container {
  
  display: grid;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>display: grid</h1>

<p>Use display: grid; to make a block-level grid container:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Exemplo

 .grid-container {
  
  display: inline-grid;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>display: inline-grid</h1>

<p>Use display: inline-grid; to make an inline grid container:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Todos os filhos diretos do contêiner da grade tornam-se automaticamente itens da grade.

Colunas da grade

As linhas verticais dos itens da grade são chamadas de colunas.

Linhas de grade

As linhas horizontais dos itens da grade são chamadas de linhas.

Lacunas na grade

Os espaços entre cada coluna/linha são chamados de lacunas.

Você pode ajustar o tamanho do intervalo usando uma das seguintes propriedades:

  • column-gap
  • row-gap
  • gap

Exemplo

A propriedade column-gap define o intervalo entre as colunas:

 .grid-container {
  
  display: grid;
  column-gap: 50px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The column-gap Property</h1>

<p>Use the <em>column-gap</em> property to adjust the space between the columns:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Exemplo

A propriedade row-gap define o intervalo entre as linhas:

 .grid-container {
  
  display: grid;
  row-gap: 50px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  row-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The row-gap Property</h1>

<p>Use the <em>row-gap</em> property to adjust the space between the rows:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Exemplo

A propriedade gap é uma propriedade abreviada para o row-gap e o Propriedades de column-gap:

 .grid-container {
  
  display: grid;
  gap: 50px 100px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 50px 100px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The gap Property</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Exemplo

A propriedade gap também pode ser usada para definir o intervalo de linha e o lacuna da coluna em um valor:

 .grid-container {
  
  display: grid;
  gap: 50px;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The gap Property:</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Linhas de grade

As linhas entre colunas são chamadas de linhas de coluna.

As linhas entre as linhas são chamadas de linhas de linha.

Consulte os números de linha ao colocar um item de grade em um contêiner de grade:

Exemplo

Coloque um item da grade na linha da coluna 1 e deixe-o terminar na linha da coluna 3:

 .item1 {

    grid-column-start: 1;
  grid-column-end: 3;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>

Exemplo

Coloque um item da grade na linha 1 da linha e deixe-o terminar na linha 3:

 .item1 {

    grid-row-start: 1;
  grid-row-end: 3;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>

Todas as propriedades da grade CSS

column-gap

Especifica a lacuna entre as colunas

gap

Uma propriedade abreviada para as propriedades row-gap e column-gap

grid

Uma propriedade abreviada para grid-template-rows, colunas de modelo de grade, áreas de modelo de grade, linhas automáticas de grade, grid-auto-columns e as propriedades grid-auto-flow

grid-area

Especifica um nome para o item da grade ou esta propriedade é uma propriedade abreviada para grid-row-start, grid-column-start, grid-row propriedades -end e grid-column-end

grid-auto-columns

Especifica um tamanho de coluna padrão

grid-auto-flow

Especifica como os itens colocados automaticamente são inseridos na grade

grid-auto-rows

Especifica um tamanho de linha padrão

grid-column

Uma propriedade abreviada para as propriedades grid-column-start e grid-column-end

grid-column-end

Especifica onde terminar o item da grade

grid-column-gap

Especifica o tamanho do espaço entre as colunas

grid-column-start

Especifica onde iniciar o item da grade

grid-gap

Uma propriedade abreviada para as propriedades grid-row-gap e grid-column-gap

grid-row

Uma propriedade abreviada para as propriedades grid-row-start e grid-row-end

grid-row-end

Especifica onde terminar o item da grade

grid-row-gap

Especifica o tamanho do espaço entre as linhas

grid-row-start

Especifica onde iniciar o item da grade

grid-template

Uma propriedade abreviada para grid-template-rows, grid-template-columns e propriedades de áreas de grade

grid-template-areas

Especifica como exibir colunas e linhas usando itens de grade nomeados

grid-template-columns

Especifica o tamanho das colunas e quantas colunas em um layout de grade

grid-template-rows

Especifica o tamanho das linhas em um layout de grade

row-gap

Especifica a lacuna entre as linhas da grade