Siga no Twitter

Conceitos básicos de grid layout

O Grid Layout, também conhecido como CSS Grid Layout ou simplesmente CSS Grid, é um sistema de layout bidimensional para a web, que permite a criação de layouts complexos de maneira eficiente e simplificada. Aqui estão os conceitos básicos para entender e usar o Grid Layout:

1. Container e Itens do Grid

Grid Container: O elemento que contém a estrutura do grid. É definido aplicando a propriedade display: grid ou display: inline-grid a um elemento.

   
    .container {
      display: grid;
    }

Grid Items: Os elementos filhos diretos do grid container. Eles são os elementos que são posicionados dentro do grid.

2. Definindo Linhas e Colunas

Grid Template Columns: Define a estrutura das colunas do grid.

   
    .container {
      display: grid;
      grid-template-columns: 100px 200px 1fr;
    }

Grid Template Rows: Define a estrutura das linhas do grid.

   
    .container {
      display: grid;
      grid-template-columns: 100px 200px 1fr;
    }

3. Fr (Fractional Units)

fr: Unidade específica do Grid Layout que representa uma fração do espaço disponível.

   
    .container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

4. Gap

Grid Gap: Define o espaçamento entre as linhas e colunas.

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

5. Posicionamento de Itens

Grid Column e Grid Row:: : Definem em quais linhas e colunas os itens do grid devem começar e terminar.

   
    .item {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

6. Áreas de Grid

Grid Template Areas:: Define áreas nomeadas dentro do grid para facilitar o posicionamento dos itens.

   .container {
  display: grid;
  grid-template-areas: 
    'header header'
    'sidebar content'
    'footer footer';
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

7. Alinhamento e Justificação

Justify Items: Alinha os itens dentro de suas células horizontalmente.

   
    .container {
  justify-items: center;
}

Align Items: Alinha os itens dentro de suas células verticalmente.

   
   .container {
  align-items: center;
}

Justify Content:: Alinha o conteúdo inteiro do grid container horizontalmente.

   
   .container {
  justify-content: space-between;
}

Align Content:: Alinha o conteúdo inteiro do grid container verticalmente.

   
   .container {
  align-content: space-around;
}

Exemplo Completo

Aqui está um exemplo completo para ilustrar esses conceitos:

   
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 200px 1fr;
    grid-gap: 10px;
    grid-template-areas: 
      "header header header"
      "sidebar content content"
      "footer footer footer";
    height: 100vh;
  }
  .header {
    grid-area: header;
    background: lightblue;
  }
  .sidebar {
    grid-area: sidebar;
    background: lightgreen;
  }
  .content {
    grid-area: content;
    background: lightcoral;
  }
  .footer {
    grid-area: footer;
    background: lightgoldenrodyellow;
  }
</style>
</head>
<body>
<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
</body>
</html>

Resultado final

Veja o resultado final do projeto logo abaixo.

Veja o resultado em nova janela.Clique aqui

Content