HTML e CSS: Como desenvolver uma seção de postagens com responsividade
Aprenda como criar uma seção de postagens totalmente responsiva utilizando HTML e CSS.
por Geison Souza
Com a variedade de dispositivos disponíveis hoje em dia, desde smartphones e tablets até notebooks e televisores, criar páginas web que se ajustam automaticamente a diferentes tamanhos de tela tornou-se indispensável.
Neste artigo, vamos mostrar como utilizar HTML e CSS para criar uma seção de postagens responsiva. Usaremos dois recursos fundamentais do CSS: Grid Layout e Media Queries.
Além disso, vamos aplicar o conceito de Mobile First, que prioriza o design para dispositivos móveis, adaptando-se progressivamente para telas maiores, como as de notebooks e desktops.
Estrutura HTML
Vamos começar com o básico: uma estrutura HTML simples para a seção de postagens. Essa seção terá nove posts, e cada um será representado por um bloco <article>, contendo uma imagem e um título. Utilizamos a tag <section> para agrupar semanticamente os blocos:
Bloco #1<section class="postagens">
<h1>Postagens</h1>
<article class="post">
<img src="imagem1.jpg">
<h2>Post 1</h2>
</article>
<article class="post">
<img src="imagem2.jpg">
<h2>Post 2</h2>
</article>
<article class="post">
<img src="imagem3.jpg">
<h2>Post 3</h2>
</article>
<article class="post">
<img src="imagem4.jpg">
<h2>Post 4</h2>
</article>
<article class="post">
<img src="imagem5.jpg">
<h2>Post 5</h2>
</article>
<article class="post">
<img src="imagem6.jpg">
<h2>Post 6</h2>
</article>
<article class="post">
<img src="imagem7.jpg">
<h2>Post 7</h2>
</article>
<article class="post">
<img src="imagem8.jpg">
<h2>Post 8</h2>
</article>
<article class="post">
<img src="imagem9.jpg">
<h2>Post 9</h2>
</article>
</section>
Cada <article> representa um post, que inclui uma imagem (<img>) e o título do post (<h2>).
Estilizando com CSS
Agora, vamos trabalhar o CSS. Utilizaremos display: grid para organizar os posts em uma grade flexível de linhas e colunas, e Media Queries para aplicar diferentes estilos de acordo com a largura da tela.
Bloco #2.postagens {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px 20px;
}
.postagens h1 {
grid-column: 1 / -1;
}
.post {
background-color: #f6f6f6;
}
.post img {
width: 100%;
height: calc(68vw * 0.75);
object-fit: cover;
}
/* Media Queries */
@media (min-width: 500px)
{
.postagens {
grid-template-columns: repeat(2, 1fr);
}
.post img {
height: calc(35vw * 0.75);
}
}
@media (min-width: 900px)
{
.postagens {
grid-template-columns: repeat(3, 1fr);
}
.post img {
height: calc(25vw * 0.75);
}
}
Explicação dos estilos
grid-template-columns: Controla o número e o tamanho das colunas na grade. Inicialmente, os posts são exibidos em uma única coluna que ocupa toda a largura disponível. Quando a tela tem 500px ou mais, os posts são divididos em duas colunas, cada uma ocupando metade do espaço. Se a largura da tela for de 900px ou mais, os posts se organizam em três colunas, cada uma ocupando 1/3 do espaço.gap: Controla o espaçamento horizontal e vertical entre os posts.grid-column: 1 / -1: Faz com que o título (<h1>) se estenda por todas as colunas da grade, ocupando toda a largura disponível.height: calc(): Define a altura da imagem com base em uma proporção calculada.object-fit: cover: Faz com que as imagens sejam redimensionadas para cobrir completamente a largura e altura especificada, mantendo sua proporção (sem distorção), mas cortando partes da imagem para garantir que ela cubra toda a área.@mediacommin-width: Aplica estilos específicos quando a largura da tela é igual ou maior que o valor especificado, por exemplo, 500px.
Exemplo completo
Agora, vamos unir os códigos HTML e CSS em um único documento. Veja o exemplo final abaixo:
Bloco #3<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Postagens</title>
<style type="text/css">
.postagens {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px 20px;
}
.postagens h1 {
grid-column: 1 / -1;
}
.post {
background-color: #f6f6f6;
}
.post img {
width: 100%;
height: calc(68vw * 0.75);
object-fit: cover;
}
/* Media Queries */
@media (min-width: 500px)
{
.postagens {
grid-template-columns: repeat(2, 1fr);
}
.post img {
height: calc(35vw * 0.75);
}
}
@media (min-width: 900px)
{
.postagens {
grid-template-columns: repeat(3, 1fr);
}
.post img {
height: calc(25vw * 0.75);
}
}
</style>
</head>
<body>
<section class="postagens">
<h1>Postagens</h1>
<article class="post">
<img src="imagem1.jpg">
<h2>Post 1</h2>
</article>
<article class="post">
<img src="imagem2.jpg">
<h2>Post 2</h2>
</article>
<article class="post">
<img src="imagem3.jpg">
<h2>Post 3</h2>
</article>
<article class="post">
<img src="imagem4.jpg">
<h2>Post 4</h2>
</article>
<article class="post">
<img src="imagem5.jpg">
<h2>Post 5</h2>
</article>
<article class="post">
<img src="imagem6.jpg">
<h2>Post 6</h2>
</article>
<article class="post">
<img src="imagem7.jpg">
<h2>Post 7</h2>
</article>
<article class="post">
<img src="imagem8.jpg">
<h2>Post 8</h2>
</article>
<article class="post">
<img src="imagem9.jpg">
<h2>Post 9</h2>
</article>
</section>
</body>
</html>
Conclusão
Ao seguir este exemplo, você criará uma seção de postagens que se ajusta a diferentes tamanhos de tela, aplicando o conceito Mobile First. O layout começará otimizado para dispositivos móveis e se expandirá adequadamente para telas maiores.
Se tiver dúvidas ou encontrar algum erro neste artigo, sinta-se à vontade para entrar em contato conosco através do e-mail de suporte do EngenhoBIT.