Fundamentos do Grid

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 31 de 43.

CSS Grid é um sistema de layout que permite criar facilmente páginas web com linhas e colunas. É ótimo para construir layouts complexos e responsivos sem a necessidade de floats ou posicionamentos complicados. Além disso, funciona em todos os navegadores modernos.

Para criar um contêiner grid, use a propriedade display:

.container {
  display: grid;
}

Defina colunas no seu grid usando grid-template-columns com unidades px ou fr (frações):

/* Isso cria três colunas onde a coluna do meio ocupa o dobro do espaço das outras duas. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Defina linhas com grid-template-rows. Use a propriedade gap para adicionar espaço entre os itens do grid.

/* Cria um grid com duas linhas: a primeira tem 100px de altura, a segunda tem 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Crie uma regra CSS para uma classe chamada grid-container que:

Define a propriedade display para criar um grid
Cria três colunas de largura igual usando a unidade fr
Cria duas linhas: a primeira com 150px de altura e a segunda com 250px de altura
Adiciona um espaçamento (gap) de 20px entre todos os itens do grid

Escreva apenas o código CSS para a classe grid-container.

Folha de consulta

CSS Grid é um sistema de layout para criar páginas web com linhas e colunas. Para criar um contêiner grid, use display: grid:

.container {
  display: grid;
}

Defina colunas usando grid-template-columns com unidades px ou fr (frações):

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Three columns, middle is twice as wide */
}

Defina linhas com grid-template-rows e adicione espaçamento com gap:

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* Two rows with specific heights */
  gap: 20px; /* Space between grid items */
}

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.