Crie Layouts de Revista Incríveis com CSS Grid: Guia Completo!

Por

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.