🙌🏾 🤙🏾 🚵🏿 CSS Grid é claro para todos 👨🏾‍💼 🍲 🤵🏿

O que é grade?

Uma grade é um conjunto sobreposto de linhas horizontais e verticais - um conjunto define colunas e o outro define linhas. Os itens podem ser colocados na grade, de acordo com as linhas e colunas.

Suporte de navegador

O suporte do navegador chega a 94% em 2020

Recipiente de grade

Criamos um contêiner de grade declarando display: grid ou display: inline-grid no elemento. Assim que fizermos isso, todos os filhos diretos desse elemento se tornarão itens de grade .

<body>
 <div class="row">
  <div class="row__item header">
   <h1>Header</h1>
  </div>
  <div class="row__item nav">
   <h1>Navbar</h1>
  </div>
  <div class="row__item article">
   <h1>Article</h1>
  </div>
  <div class="row__item ads">
   <h1>Ads</h1>
  </div>
 </div>
</body>

.row {
 display: grid;
 margin: auto;
 grid-template-rows: 60px 1fr ;
 grid-template-columns: 20% 1fr 15%;
 grid-gap: 10px;
 width: 1000px;
 height: 1000px;
 justify-items: center;
 justify-content: space-between;
 grid-template-areas:
 "header header header"
 "nav article ads"; 
}

grid-template-rows é uma propriedade CSS que define os nomes das linhas e o caminho de dimensionamento da função de linhas da grade.

A propriedade CSS grid-rowdetermina de qual linha no layout de grade um elemento começará, quantas linhas um elemento ocupará ou em qual linha um elemento no layout de grade terminará. Esta é uma propriedade abreviada para as propriedades grid-row-start e grid-row-end .

A propriedade CSS grid-gapé uma propriedade abreviada para grid-row-gape grid-column-gapque define as medianizes entre as linhas e colunas da grade.

A propriedade grid-template-areasdefine o modelo de grade referindo-se aos nomes de áreas, que são configurados usando a propriedade grid-area .

Repetir um nome de área faz com que o conteúdo se espalhe por essas células. Um ponto significa uma célula vazia. A própria sintaxe fornece uma visualização da estrutura da grade.

Usando a propriedade, grid-areapodemos atribuir a cada uma dessas áreas seu próprio nome. Nomear áreas ainda não cria nenhum layout, no entanto, agora temos áreas nomeadas que podemos usar nele.

.header{
grid-area: header;
}
.nav{
grid-area: nav;
}
.article{
grid-area: article;
}
.ads{
grid-area: ads;
}

Crie um modelo de site com CSS Grid:

Mudando o modelo

Você pode alterar o modelo simplesmente realocando as áreas da grade em grid-template-areas.

Então, se mudarmos para isso:

grid-template-areas:
 "nav header header"
 "nav article ads"; 
}

Então, como resultado, obtemos o seguinte modelo:

Grades com consultas de mídia

Um dos pontos fortes das grades é que você pode criar um modelo completamente diferente em segundos.

Isso torna o CSS Grid ideal para consultas de mídia. Podemos simplesmente reatribuir os valores em gráficos ASCII e envolver o resultado na consulta de mídia final.

@media all and (max-width: 575px) {
.row {
grid-template-areas:
"header"
"article"
"ads"
"nav";
grid-template-rows: 80px 1fr 70px 1fr ;
grid-template-columns: 1fr;
}
}

Como resultado, obtemos:

Assim, o objetivo é reatribuir os valores na propriedade grid-template-areas.

Conclusão

Neste artigo, cobrimos apenas a ponta do iceberg do Layout de grade CSS. Às vezes é difícil acreditar que tipo de coisas o CSS Grid pode fazer. Esta é uma quebra em todos os padrões. E eu amo isso.

Aconselho você a prestar atenção a esta especificação e passar algum tempo estudando-a. Acredite em mim, no futuro isso certamente será útil e não importa se você escreve em React, Angular, Vue (insira o seu). As grades estão aqui há muito tempo.

CSS Grid é claro para todos