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.
últimas postagens
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 em um espaço bidimensional, facilitando a criação de 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.
Aqui está um exemplo simples de como você pode usar CSS Grid para criar uma grade 3×3:
.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. Considere usar elementos semânticos para organizar seu conteúdo como
<body>
<section class="magazine-layout">
<article>
<img src="https://source.unsplash.com/random/?city,night" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?city,day" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?animal" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?book" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?food" />
<p>Some Article Title</p>
</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;
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 especifica que o elemento contêiner, .magazine-layout, é um contêiner de grade usando a declaração display: grid.
As propriedades grid-template-columns e grid-template-rows usam uma combinação de repetição, ajuste automático e minmax. Isso garante que as larguras das colunas e as alturas das linhas sejam de pelo menos 250px e que o máximo de itens possível caiba em cada uma.
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;
}.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 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 usar consultas de mídia para ajustar o layout para diferentes tamanhos 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;
}
}
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.