Lições
Iniciar
Começar a aprender
CodeGym /Cursos /Frontend SELF PT /Grid Areas

Grid Areas

Frontend SELF PT
Nível 28 , Lição 3
Disponível

9.1 Propriedade grid-template-areas

CSS Grid Layout oferece grandes possibilidades para criar layouts complexos usando áreas nomeadas (grid areas). A propriedade grid-template-areas permite definir áreas da grade, que podem ser usadas para posicionar elementos de forma simplificada. Essa propriedade possibilita aos desenvolvedores organizar visualmente o layout e facilitar sua manutenção.

Conceitos principais do grid-template-areas

  1. Definindo áreas:
    • A propriedade grid-template-areas permite definir nomes para diferentes áreas da grade
    • Cada nome de área representa um grupo retangular de células
  2. Usando áreas nomeadas:
    • Áreas definidas podem ser usadas para posicionar elementos, atribuindo a propriedade grid-area a cada elemento

Sintaxe do grid-template-areas:

    
      .container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer"
      }

Sintaxe para elementos do Grid:

    
      .header {
        grid-area: header;
      }

      .sidebar {
        grid-area: sidebar;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: footer;
      }

Explicação:

  • Cada linha no valor grid-template-areas representa uma linha na grade
  • Cada palavra na linha representa uma célula ou grupo de células
  • Pontos (.) podem ser usados para células vazias

9.2 Exemplo de uso do grid-template-areas

Exemplo de implementação completa:

CSS
    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .sidebar {
        grid-area: sidebar;
        background-color: #3498db;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Exemplo de Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="sidebar">Sidebar</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Explicação do código:

  • .grid-container: define o contêiner Grid usando display: grid e estabelece o layout da grade utilizando grid-template-areas. Neste caso, o layout consiste de três linhas: a primeira linha é o cabeçalho, a segunda linha consiste da barra lateral e do conteúdo principal, e a terceira linha é o rodapé
  • .header, .sidebar, .main, .footer: definem estilos para diferentes áreas da grade e vinculam essas áreas aos nomes em grid-template-areas utilizando a propriedade grid-area

9.3 Gerenciando áreas vazias

A propriedade grid-template-areas permite deixar áreas vazias, usando o símbolo de ponto (.) para representar um espaço vazio.

Exemplo de implementação completa:

CSS
    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          ". main ."
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Áreas Vazias do Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Explicação do código:

  • .grid-container: cria um contêiner Grid com três áreas: cabeçalho, conteúdo principal e rodapé. A linha do meio contém áreas vazias à esquerda e à direita do conteúdo principal
  • .header, .main, .footer: definem estilos para as áreas e as vinculam aos nomes de áreas no grid-template-areas
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION