Objetivos da Aula

• Fixar os fundamentos do grid-container

Introdução

Fala programador, tudo bem com você? Nessa aula nós vamos fazer um exercício de fixação, faremos algumas pequenas manipulações em algo semelhante ao que temos no nosso layout de estudos

Criação da pasta

1. Nós podemos copiar o nosso layout de estudos, pois ele já tem toda a estrutura. Nós iremos copiar, coloca o novo nome da pasta sendo “exercicioDeFixacao pt2”, e vamos começar.

Modificação do css

1. Primeiro, nós vamos excluir tudo que temos de grid aqui no “.container”, depois, nós vamos definir o nosso grid novamente.

   .container {
     background-color: darkgray;
     min-height: 100vh;
     display: grid;
   }
   

2. Definindo o grid, nós vamos ter que fazer agora a criação dos template columns, e como da para notar, temos 4 colunas, uma sendo maior que as outras, então, ela vai ganhar 2fr.

   .container {
     background-color: darkgray;
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1fr 2fr 1fr 1fr;
   }
   

3. Agora, vamos dar um gap para esses blocos e também daremos uma altura mínima de 310px, e uma máxima de auto, para ficarmos com elas organizadas verticalmente.

   .container {
     background-color: darkgray;
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1fr 2fr 1fr 1fr;
     gap: 10px 15px;
     grid-auto-rows: minmax(310px, auto);
   }
   

Conclusão

Nesse exercício, não conseguimos fazer nada de muito complexo, pois como foi dito, o maior conteúdo está de fato nas linhas e colunas.