Usando CSS Grid para layouts estilo revista
O CSS oferece muita flexibilidade para a conceção de esquemas apelativos e reactivos. Um layout de estilo de revista organiza conteúdo misto de texto e imagem num formato atraente e chamativo, tornando-o uma escolha popular.
A grelha CSS fornece aos programadores uma série de instrumentos e um nível de controlo intrincado necessários para criar uma disposição deste tipo, o que a torna um conjunto de competências valioso a adquirir.
O que são layouts estilo revista?
Os layouts de estilo de revista utilizam um sistema de grelha para organizar o conteúdo em colunas e linhas, conferindo um aspeto ordenado ao design.
Os nossos modelos inovadores são excelentes para apresentar uma variedade de suportes, como texto, imagens e anúncios, de uma forma estruturada e visualmente agradável.
Compreender a grelha CSS
A grelha CSS é uma solução de disposição avançada que permite aos utilizadores organizar elementos num plano bidimensional com facilidade, facilitando a criação de estruturas colunares e formações de linhas através das suas poderosas capacidades de organização espacial.
o contentor da grelha, que estabelece a estrutura da grelha, e os itens da grelha, que servem como descendentes do contentor acima mencionado.
Certamente, aqui está uma demonstração elegante de como se pode utilizar a grelha CSS para gerar uma disposição em grelha 3x3:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
O presente código constrói uma disposição em grelha que inclui três secções horizontais, cada uma com uma largura idêntica e com um interstício consistente de vinte pixels entre elementos adjacentes. A visualização resultante é mostrada abaixo:
Configurando a estrutura HTML
Para obter um design semelhante ao de uma publicação, é essencial ter uma estrutura HTML organizada. Uma abordagem envolve a utilização de etiquetas semanticamente significativas, tais como e para estruturar o conteúdo. O exemplo que se segue constitui uma base adequada:
<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>
Definição do contentor da grelha
Para construir uma grelha de modo a obter um aspeto de revista para o seu layout, incorpore o seguinte estilo 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;
}
grid".
As propriedades grid-template-columns e grid-template-rows utilizam uma combinação de repetição, redimensionamento automático e restrições mínimas/máximas para garantir que as larguras das colunas e as alturas das linhas não medem menos de 250 píxeis, acomodando o maior número possível de elementos em cada dimensão respectiva.
Colocação de itens na grelha
Considere a possibilidade de melhorar a atração visual dos artigos, transformando-os em representações em miniatura apelativas, conhecidas como 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;
}
De facto, após a conclusão dos passos acima descritos, o website de alguém deve exibir um aspeto semelhante ao seguinte:
Criando layouts estilo revista
Para obter uma aparência genuína de revista, utilize o estilo CSS para organizar os elementos do artigo conforme desejado:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
A sua página deve agora ter o seguinte aspeto:
Design responsivo com grelha CSS
Uma das vantagens da utilização da grelha CSS é a sua adaptabilidade intrínseca, uma vez que permite aos designers e programadores utilizar media queries para modificar a disposição dos elementos com base nas diferentes dimensões do ecrã. Ao implementar esta funcionalidade, é possível garantir que o conteúdo do seu sítio Web se mantém visualmente apelativo e fácil de utilizar numa série de dispositivos com capacidades de visualização diversas.
/* 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;
}
}
As consultas multimédia acima mencionadas utilizam uma variedade de configurações de disposição optimizadas para várias dimensões de ecrã, assegurando assim que o seu design é reativo e compatível com diversos dispositivos.
O seu browser não suporta a etiqueta de vídeo.
Transformar os seus layouts com CSS Grid
A utilização do CSS Grid permite a criação de layouts adaptáveis, inspirados em revistas, que se adaptam perfeitamente a várias dimensões de ecrã. Esta ferramenta versátil permite aos utilizadores estabelecer sistemas de grelha, posicionar elementos e modificar disposições com facilidade.
Explore várias disposições de grelha e estéticas para criar um design ideal, influenciado por publicações, para a sua presença online.