Home-theater-designers
CSS proporciona mucha flexibilidad para diseñar diseños atractivos y responsivos. Un diseño estilo revista organiza contenido mixto de texto e imágenes en un formato atractivo y llamativo, lo que lo convierte en una opción popular.
¿Necesito adobe media encoder?MUO Vídeo del día DESPLÁCETE PARA CONTINUAR CON EL CONTENIDO
CSS Grid le brinda las herramientas y el control detallado que necesita para lograr este diseño, por lo que es una excelente técnica para aprender.
¿Qué son los diseños estilo revista?
Los diseños estilo revista utilizan una estructura similar a una cuadrícula para organizar el contenido en columnas y filas.
Son excelentes para mostrar diferentes tipos de contenido, como artículos, imágenes y anuncios, de forma organizada y atractiva.
Entendiendo la cuadrícula CSS
CSS Grid es una sólida herramienta de diseño que le permite posicionar elementos en un espacio bidimensional , haciendo fácil crear columnas y filas .
Con este tipo de diseño, entran en juego dos componentes principales: el contenedor de la cuadrícula, responsable de definir la estructura de la cuadrícula, y los elementos de la cuadrícula, que son los elementos secundarios del contenedor.
Aquí hay un ejemplo simple de cómo puedes usar CSS Grid para crear una cuadrícula de 3x3:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Este código define un contenedor de cuadrícula con tres columnas de igual ancho y un espacio de 20 píxeles entre elementos. Aquí está el resultado:
Configurar la estructura HTML
Para un diseño estilo revista, necesitarás un documento HTML bien estructurado. Considerar usar elementos semánticos para organizar su contenido 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>
Definición del contenedor de cuadrícula
Para crear una cuadrícula para su diseño estilo revista, agregue el siguiente 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 el elemento contenedor, .diseño de revista , es un contenedor de grilla que usa la declaración pantalla: cuadrícula .
Las propiedades grid-template-columns y grid-template-rows utilizan una combinación de repetir , ajuste automático , y mínimo máximo . Estos garantizan que los anchos de columna y las alturas de fila sean al menos 250px , y caben tantos elementos como sea posible en cada uno.
Colocar elementos de la cuadrícula
Ahora diseñe cada artículo y su contenido para crear elementos atractivos en forma de 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;
}
En este punto, su página web debería verse similar a la siguiente:
Crear diseños estilo revista
Para lograr una verdadera apariencia de revista, agregue estilos CSS para abarcar los elementos del artículo en el orden que desee:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Su página ahora debería verse así:
Diseño responsivo con CSS Grid
Una de las ventajas de CSS Grid es su capacidad de respuesta inherente. Puede utilizar consultas de medios para ajustar el diseño para diferentes tamaños de pantalla. Por ejemplo:
/* 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;
}
}
Estas consultas de medios cambian entre múltiples definiciones de diseño para adaptarse mejor al tamaño de la pantalla del dispositivo. Su diseño final se adaptará a diferentes tamaños:
Transformando sus diseños con CSS Grid
CSS Grid es una herramienta flexible que puedes utilizar para crear diseños estilo revista que se ajustan a diferentes tamaños de pantalla. Le permite definir estructuras de cuadrícula, colocar elementos y ajustar diseños.
Experimente con diferentes configuraciones y estilos de cuadrícula para lograr el diseño perfecto inspirado en una revista para su sitio web.
Windows 10 no arrancará después de reiniciar