Fundamentos do Grid

Parte da seção Domínio do CSS do Journey de HTML da Coddy. Lição 31 de 43.

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

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

.container {
  display: grid;
}

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

/* Isso cria três colunas em que 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 da grade.

/* 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;
}

Desafio

Fácil

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

Defina a propriedade display para criar uma grade
Crie três colunas de largura igual usando a unidade fr
Crie duas linhas: a primeira com 150px de altura e a segunda com 250px de altura
Adicione um espaço de 20px entre todos os itens da grade

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

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>