Artigo original: How to make your HTML responsive by adding a single line of CSS
Neste artigo, ensinarei você a usar o CSS Grid para criar uma grade de imagens superlegal, que varia seu número de colunas de acordo com a largura da tela.
O mais lindo disso tudo é que: a responsividade será adicionada com uma única linha de CSS.
Isso quer dizer que não precisaremos encher o HTML de nomes de classe feios (como col-sm-4, col-md-8) nem criar media queries para cada tamanho de tela.
Se quiser aprender a criar sites responsivos em nível profissional, você pode conferir o bootcamp de design responsivo para a web da Scrimba (em inglês), pois ele leva os estudantes do nível iniciante ao avançado em 15 horas de tutoriais interativos.
Agora, vamos lá!
A configuração
Para este artigo, seguirei com a grade que utilizei em meu primeiro artigo sobre CSS Grid. Em seguida, adicionarei as imagens ao final do artigo. Esta é a aparência inicial da grade:
Aqui temos o HTML:
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Aqui vai o CSS:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
Observação: o exemplo também tem uma estilização mais básica, sobre a qual eu não entrarei em detalhes por aqui, já que não tem a ver com o que faz o CSS Grid.
Se o código deixar você confuso, recomendo a leitura do meu artigo Learn CSS Grid in 5 minutes (texto em inglês), onde eu explico o básico do módulo de layout.
Vamos iniciar tornando as colunas responsivas.
Responsividade básica com a unidade de fracionamento
O CSS Grid trouxe um tipo de valor totalmente novo, chamado unidade de fração. A unidade de fração é expressa por fr e permite dividir o contêiner em quantas partes (frações) você quiser.
Vamos alterar cada uma das colunas para que tenha uma unidade de fração de largura.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}
O que acontece aqui é que a grade divide toda a largura em três frações. Cada uma das colunas toma uma das três unidades. Este é o resultado:
Se alterarmos o valor de grid-template-columns para1fr 2fr 1fr, a segunda coluna terá o dobro da largura das outras duas colunas. A largura total, agora, é de quatro unidades de fração, sendo que a segunda coluna ocupa duas unidades de fração, enquanto as outras colunas ocupam apenas uma unidade. Esta é a aparência:
Em outras palavras, o valor da unidade de fração torna muito fácil alterar a largura das colunas.
Responsividade avançada
O exemplo acima, no entanto, não nos dá a responsividade que queremos, pois essa grade sempre terá três colunas de largura. Queremos que nossa grade possa variar em termos do número de colunas de acordo com a largura do contêiner. Para conseguir isso, precisamos aprender três conceitos novos.
repeat()
Começaremos com a função repeat(). Essa é uma maneira muito poderosa de se especificar as linhas e colunas. Vamos pegar como exemplo nossa grade original e alterá-la usando repeat():
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}
Ou seja, repeat(3, 100px) é o mesmo que 100px 100px 100px. O primeiro parâmetro especifica quantas colunas ou linhas queremos, enquanto o segundo especifica a largura. Isso nos dará exatamente o mesmo layout com o qual começamos:
auto-fit (ajuste automático)
Temos, então, o auto-fit. Vamos, agora, evitar o uso de um número fixo de colunas e substituir 3 por auto-fit.
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}
Isso resulta no seguinte comportamento:
A grade, agora, varia seu número de colunas de acordo com a largura do contêiner.
Ela simplesmente tenta ajustar o número possível de colunas de 100px de largura no contêiner que ela puder.
Porém, se colocássemos diretamente no código que todas as colunas devem ter exatamente 100px, jamais teremos aquela flexibilidade desejada, pois elas raramente ocuparão a largura total. Como é possível ver no gif acima, a grade geralmente deixa espaço em branco no lado direito.
minmax()
O ingrediente final do qual precisamos para consertar isso é conhecido como minmax(). Simplesmente substituímos 100px por minmax(100px, 1fr). Aqui vemos o CSS final:
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}
Observe que toda a responsividade acontece em uma única linha de CSS.
O resultado pode ser visto no comportamento abaixo:
Como podemos ver, funciona perfeitamente. A função minmax() define um intervalo de tamanho maior que ou igual ao mínimo (min) e menor que ou igual ao máximo (max).
Assim, as colunas sempre serão de, pelo menos, 100px. Se, entretanto, tivermos mais espaço disponível, a grade distribuirá esse espaço igualmente entre cada uma das colunas, já que as colunas agora têm uma unidade de fração (1fr) em vez de 100px.
Adicionando as imagens
A etapa final, agora, é adicionar as imagens. Isso não tem a ver com o CSS Grid, mas vamos dar uma olhada no código.
Começamos adicionando a tag img em cada um dos itens da grade.
<div>
<img src="img/forest.jpg"/>
</div>
Para fazer com que a imagem se ajuste ao item, definimos que ela seja da largura e da altura do próprio item. Para isso, usamos object-fit: cover;. Isso fará com que a imagem cubra todo o contêiner, ficando o navegador responsável por cortar parte da imagem, se necessário.
.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
O resultado é o seguinte:
Pronto! Você acaba de conhecer um dos conceitos mais complexos do CSS Grid! Parabéns!
Suporte dos navegadores
Antes de encerrarmos, gostaria de falar um pouco sobre o suporte dos navegadores. No momento em que este artigo foi escrito, 93% do tráfego mundial em sites da web dá suporte ao CSS Grid. Esse número só vem aumentando. Começa a ficar cada vez mais claro que o CSS Grid está se tornando uma habilidade obrigatória para os desenvolvedores de front-end. Isso é muito semelhante ao que aconteceu com o CSS Flexbox há alguns anos.
Se você quiser aprender Flexbox, Grid e design responsivo de uma vez, confira o bootcamp de design responsivo para a web da Scrimba (em inglês). Ele levará você do nível iniciante ao avançado com tutoriais interativos fáceis de acompanhar.
O autor, Per Borgen, é cofundador da Scrimba, uma plataforma de aprendizagem interativa para se aprender a programar.
Obrigado pela leitura! 😀