Maquetación de Grillas y Estilos CSS en Proyectos Web

Ya estamos en nuestra segunda sección del proyecto. No demoremos más y pasemos a un breve análisis del diseño antes de empezar a maquetar en código.

Tenemos una imagen grande a la derecha y cuatro pequeñas a la izquierda. Usamos las celdas pequeñas para definir el tamaño de las celdas de nuestra grilla, porque las celdas ocupan el espacio mínimo.

Maquetación de la grilla

• Primero debemos crear otra sección.
• Creamos una etiqueta div con una clase a la que llamaremos con el creativo nombre de ""dishes-grid"". Creo que no hace falta explicar el porqué.
• Como únicamente manejaremos imágenes, podemos colocar de forma directa las etiquetas img en lugar de contenerlas en algún div.
• Agregamos una misma clase para todas las imágenes, añadiendo una segunda clase a la imagen más grande. De esta manera:

        <section class=""dishes"">
            <h2 class=""dishes-title"">Out services</h2>
            <div class=""dishes-grid"">
                <img class=""dishes-item dishes-item_big"" src=""./img/video.png"" alt=""mesa con platos de pasta"">
                <img class=""dishes-item"" src=""./img/dish1.png"" alt=""bowl de vegetales"">
                <img class=""dishes-item"" src=""./img/dish2.png"" alt=""bowl de vegetales"">
                <img class=""dishes-item"" src=""./img/dish3.png"" alt=""bowl de vegetales"">
                <img class=""dishes-item"" src=""./img/dish4.png"" alt=""bowl de vegetales"">
            </div>
        </section>

Estilos de la grilla

• Llamamos la etiqueta de section desde su clase con .dishes.
• Añadimos un margen superior de 100px y de 0 a los lados para separarla de la sección anterior.

.dishes {
    margin: 100px 0;
}

• Llamamos la etiqueta de section desde su clase con .dishes.
• Ajustamos su color en #333.
• Cambiamos el tamaño de fuente en 2rem y su peso en bold.
• Le damos un margen inferior de 50px.
• Centramos el título con text-align: center.

.dishes-title {
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
    font-size: 2rem;
}

• Llamamos la etiqueta contenedora de las imágenes con .dishes-grid.
• Por supuesto, aplicamos display: grid.
• Creamos cuatro columnas de una fracción cada una con grid-template-columns: repeat(4, 1fr).
• Creamos las filas con un alto de una fracción con grid-auto-rows: 1fr.
• Añadimos un gap: 25px para crear un espaciado entre las imágenes.
• Centramos el contenedor con justify-content: center.

.dishes-grid {
    margin: 100px 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 200px));
    grid-auto-rows: 1fr;
    gap: 25px;
    justify-content: center;
}

• Llamamos las imágenes por sus clases con .dishes-item.
• Le damos un ancho y alto del 100% de su contenedor.
• Usamos object-fit: cover para que ocupe toda la celda en que se encuentra.

.dishes-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Como vemos, funciona. Ahora necesitamos que la primera imagen ocupe cuatro celdas, desde la línea uno, hasta la tres, tanto vertical como horizontalmente.

• Para ello, llamamos la clase adicional que creamos para la imagen más grande.
• Delimitamos su área desde la primera línea horizontal y vertical, hasta la tercera.

.dishes-item_big {
    grid-area: 1/1/3/3;
}

Retoques de la primera sección

Recordemos que hubo varias partes de nuestra sección anterior sin terminar como la del título, subtítulo y botón.

• Primero, creamos una clase para las etiquetas h1, p y button.
• Llamamos la clase de la etiqueta h1.
• Ajustamos su color en #333.
• Cambiamos el tamaño de fuente en 3rem y su peso en bolder.
• Le damos un margen inferior de 24px.

.info-title {
    color: #333;
    font-size: 3rem;
    font-weight: bolder;
    margin-bottom: 24px;
}

• Llamamos la clase de la etiqueta p.
• Ajustamos su color en #333.
• Cambiamos el tamaño de fuente en 1rem.
• Le damos un margen inferior de 24px.

.info-subtitle {
    color: #333;
    font-size: 1rem;
    margin-bottom: 24px;
}

• Llamamos la clase de la etiqueta button.
• Redondeamos las esquinas con border-radius: 20px.
• Ajustamos su color en #333 y su color de fondo en #fb8c00.
• Cambiamos el peso de fuente en bolder.
• Le damos un padding superior e inferior de 12px y arriba y abajo de 24px.

.info-button {
    border: none;
    border-radius: 20px;
    color: #333;
    background-color: #fb8c00;
    font-weight: bolder;
    padding: 12px 24px;
}

¡Y listo! Hemos repasado varias funciones importantes como gap, template, auto-row y grid-area. ¿Verdad que aplicar lo aprendido refuerza mucho más que solo apuntarlo en tus notas?

Ese es el secreto del desarrollo web, así como de la programación en general. Practicar. ¡Sigamos trabajando en nuestro proyecto!

Contribución creada por: José Miguel Ventimilla (Platzi Contributor).