entender o grid template columns
Na construção de templates de forma inteligente, o desafio do programador frontend é alcançar uma performance do design e da usabilidade com técnicas mais naturais possível, evitando adicionar bibliotecas em cima de bibliotecas. Para isso ser feito com qualidade precisamos entender o grid e nesse artigo, vou pesquisar sobre o grid template columns para compreender os detalhes.
A propriedade grid-template-columns do CSS define os nomes das linhas e funções de dimensionamento (track sizing) do grid columns.
grid columns
Um grid columns é uma trilha vertical em um css grid layout e é o espaço entre duas linhas de grid verticais. Ele é definido pela propriedade grid-template-columns ou nas propriedades abreviadas de grid ou grid-template.
Além disso, as colunas podem ser criadas na grid implícita quando os itens são colocados fora das colunas criadas na grid explícita.
Essas colunas serão dimensionadas automaticamente por padrão ou podem ter um tamanho especificado com a propriedade grid-auto-columns.
Ao trabalhar com alinhamento no CSS Grid Layout, o eixo abaixo do qual as colunas são executadas é conhecido como block, or column, axis.
grid template columns
Podemos preencher essa propriedade com diversos valores que nos dará comportamentos interessantíssimos. A grid template columns é muito poderosa.
Um exemplo prática da utilização
css
html
resultado
Nesse exemplo citado acima separadamente em html, css e o resultado temos o seguinte comportamento.
Duas divs que por padrão são elementos em block e por isso deveria se comportar uma e depois a segunda na próxima linha.
Da linha um a linha cinco do código do css, usamos a grid na linha dois e na linha quatro usamos nosso poderoso grid-template-columns com o valor 50px 1fr que quer dizer que teremos duas colunas, onde uma é de 50px de largura e a outra será o restante.
Nessas cinco linhas toda a mágica do comportamento acontece.
O interessante é perceber que é inteligente. Se tivermos mais uma dupla de divs, então o comportamento se repete.
Mas se a terceira linha tiver somente uma div? Ela ocupará toda a linha?
Não. A quinta div segue respeitando o grid template columns que mandou ser 50 px para a primeira e 1fr, o restante, para a segunda de cada linha.
Para entender o tema e escrever esse artigo, usei os links abaixo.
E para iniciar, praticar e entender o comportamento dessa estratégia grid, tem um jogo que demonstra através de desafios simples o comportamento das grids, suas propriedades e valores.
Espero que tenha gostado. Deixe seu aplauso e até o próximo artigo.
