O CSS proporciona uma ampla gama de possibilidades para a criação de layouts atraentes e responsivos. Um design no estilo de revista, por exemplo, organiza conteúdos diversos, como textos e imagens, numa apresentação visualmente cativante, o que o torna uma escolha bastante popular.
O CSS Grid oferece as ferramentas e a precisão necessárias para alcançar este tipo de layout, sendo, portanto, uma técnica valiosa para se dominar.
O que são layouts no estilo revista?
Layouts no estilo de revista utilizam uma estrutura de grade para distribuir o conteúdo em colunas e linhas.
Eles são ideais para apresentar diferentes tipos de conteúdo, como artigos, fotografias e anúncios, de uma maneira organizada e atraente aos olhos do leitor.
Entendendo o CSS Grid
O CSS Grid é uma ferramenta poderosa de layout que possibilita o posicionamento de elementos em um espaço bidimensional, facilitando a criação de colunas e linhas.
Neste sistema de layout, dois componentes principais se destacam: o contêiner de grade, que define a estrutura da grade, e os itens de grade, que são os elementos filhos do contêiner.
A seguir, um exemplo básico de como você pode usar o CSS Grid para estabelecer uma grade de 3×3:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Este código cria um contêiner de grade com três colunas de largura igual e um espaçamento de 20px entre os itens. Veja o resultado:
Configurando a estrutura HTML
Para um layout no estilo revista, você precisará de um documento HTML bem estruturado. Recomenda-se o uso de elementos semânticos para organizar o seu conteúdo, como <article> e <section>. Abaixo, um ponto de partida ideal:
<body>
<section class="magazine-layout">
<article>
<img src="https://source.unsplash.com/random/?city,night" />
<p>Título do Artigo</p>
</article><article>
<img src="https://source.unsplash.com/random/?city,day" />
<p>Título do Artigo</p>
</article><article>
<img src="https://source.unsplash.com/random/?animal" />
<p>Título do Artigo</p>
</article><article>
<img src="https://source.unsplash.com/random/?book" />
<p>Título do Artigo</p>
</article><article>
<img src="https://source.unsplash.com/random/?food" />
<p>Título do Artigo</p>
</article>
</section>
</body>
Definindo o contêiner de grade
Para criar uma grade para o seu layout no estilo revista, adicione o seguinte código CSS:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
Este CSS define que o elemento contêiner, com a classe .magazine-layout, é um contêiner de grade utilizando a declaração `display: grid`.
As propriedades `grid-template-columns` e `grid-template-rows` empregam uma combinação de repetição, ajuste automático e `minmax`. Isso assegura que a largura das colunas e a altura das linhas sejam de no mínimo 250px, permitindo que o máximo de itens possível caiba em cada uma.
Posicionando itens de grade
Agora, estilize cada artigo e seu conteúdo para criar elementos atraentes, similares a miniaturas:
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}.article img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.article p {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
Neste momento, a sua página web deve estar semelhante a esta:
Criando layouts no estilo revista
Para obter uma verdadeira aparência de revista, adicione estilos CSS para abranger os elementos do artigo na ordem desejada:
.article:nth-child(1) {
grid-column: 1 / span 3;
}.article:nth-child(4) {
grid-column: 2 / span 2;
}
A sua página deverá agora apresentar-se desta forma:
Design responsivo com CSS Grid
Uma das vantagens do CSS Grid é sua capacidade de resposta inerente. Você pode utilizar consultas de mídia para ajustar o layout para diferentes dimensões de tela. Por exemplo:
@media screen and (max-width: 1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
} .article:nth-child(5) {
grid-row: 3 / span 1;
}
}
@media screen and (max-width: 600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
}
}
Estas consultas de mídia alternam entre diferentes definições de layout para melhor se adequarem ao tamanho da tela do dispositivo. O seu layout final irá adaptar-se a diferentes dimensões:
Transformando seus layouts com CSS Grid
O CSS Grid é uma ferramenta versátil que pode ser utilizada para criar layouts no estilo revista que se adaptam a diferentes tamanhos de tela. Ele permite definir estruturas de grade, posicionar itens e ajustar layouts.
Experimente diferentes configurações e estilos de grade para alcançar o layout perfeito, com inspiração em revistas, para o seu website.