Com vários estilos, você pode usar esse layout atraente e flexível para muitos tipos de conteúdo de página.

CSS oferece muita flexibilidade para você criar layouts atraentes e responsivos. Um layout estilo revista organiza conteúdo misto de texto e imagem em um formato atraente e atraente, tornando-o uma escolha popular.

CSS Grid oferece as ferramentas e o controle refinado de que você precisa para obter esse layout, por isso é uma ótima técnica para aprender.

O que são layouts em estilo de revista?

Os layouts em estilo de revista usam uma estrutura semelhante a uma grade para organizar o conteúdo em colunas e linhas.

Eles são ótimos para exibir diferentes tipos de conteúdo, como artigos, imagens e anúncios, de forma organizada e atraente.

Compreendendo a grade CSS

CSS Grid é uma ferramenta de layout robusta que permite posicionar elementos no espaço bidimensional, facilitando criar colunas e linhas.

Com esse tipo de layout, dois componentes principais entram em ação: o contêiner de grade, responsável por definir a estrutura da grade, e os itens de grade, que são os elementos filhos do contêiner.

instagram viewer

Aqui está um exemplo simples de como você pode usar CSS Grid para criar uma grade 3x3:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}

Este código define um contêiner de grade com três colunas de largura igual e um intervalo de 20px entre os itens. Aqui está o resultado:

Configurando a estrutura HTML

Para um layout estilo revista, você precisará de um documento HTML bem estruturado. Considerar usando elementos semânticos para organizar seu conteúdo como

e
. Aqui está um bom ponto de partida:

<body>
<sectionclass="magazine-layout">
<article>
<imgsrc="https://source.unsplash.com/random/?city, night" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?city, day" />
<p>Some Article Titlep>
article>


<article>
<imgsrc="https://source.unsplash.com/random/?animal" />
<p>Some Article Titlep>
article>


<article>
<imgsrc="https://source.unsplash.com/random/?book" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?food" />
<p>Some Article Titlep>
article>
section>
body>

Definindo o contêiner de grade

Para criar uma grade para seu layout estilo revista, adicione o seguinte código CSS:

.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
/* Defines the grid container */
display: grid;


/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}

Este CSS especifica que o elemento contêiner, .magazine-layout, é um contêiner de grade usando a declaração exibição: grade.

As propriedades grid-template-columns e grid-template-rows usam uma combinação de repita, ajuste automático, e mínimo máximo. Isso garante que as larguras das colunas e as alturas das linhas sejam pelo menos 250 pixels, e cabem tantos itens quanto possível em cada um.

Colocando itens de grade

Agora estilize cada artigo e seu conteúdo para criar elementos atraentes em estilo de miniatura:

article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}
.articleimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.articlep {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}

Neste ponto, sua página da web deve ser semelhante a esta:

Criação de layouts em estilo de revista

Para obter uma aparência verdadeira de revista, adicione estilos CSS para abranger os elementos do artigo na ordem que desejar:

.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}

Sua página agora deve ficar assim:

Design responsivo com grade CSS

Uma das vantagens do CSS Grid é sua capacidade de resposta inerente. Você pode use consultas de mídia para ajustar o layout para diferentes tamanhos de tela. Por exemplo:

/* Media query for screens up to 1100px */
@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 query for screens up to 600px */
@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;
 }
}

Essas consultas de mídia alternam entre diversas definições de layout para melhor se adequar ao tamanho da tela do dispositivo. Seu layout final se adaptará a diferentes tamanhos:

Transformando seus layouts com grade CSS

CSS Grid é uma ferramenta flexível que você pode usar para criar layouts em estilo de revista que se ajustam 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 obter o layout perfeito inspirado em revistas para o seu site.