Creación de Diseños Responsivos con CSS Grid

Debido a que usamos grid para crear todas las grillas de nuestro proyecto, resulta muy sencillo hacerlo responsivo.

Lo primero es revisar sección por sección para evaluar los cambios que podemos hacer en cada una. Es decir, redimensionar el ancho de la página para ver en qué puntos se rompe el contenido.

Encabezado

Notamos que el texto se rompe al reducir el ancho de la página. Para ello vamos a modificar su grid-template-columns.

• Vamos a la clase que contiene sus estilos .hero.
• Cambiamos el valor de su grid-template-columns, de 2fr a ***minmax(300px, 2fr)***.

.hero {
    display: grid;
    grid-template-columns: minmax(300px, 2fr) 3fr;
    grid-auto-rows: 550px;
    border-bottom: 1px solid;
}

Ahora vemos que no se reduce más de 300px y no se rompe.

Para que se adapte al ancho pantalla, usamos los media queries.

• Creamos un media screen que sirva hasta que el ancho supere los 768px
• Llamamos la clase contenedora de la primera sección y aplicamos un mínimo y máximo fijos a sus columnas,
• Centramos el contenedor para evitar que nos sobre demasiado espacio.

@media screen and (max-width: 768px) {
    .hero {
        grid-template-columns: minmax(300px, 500px);
        justify-content: center;
    }
    .hero-image {
        display: none;
    }
}

Nuestros servicios

Como vemos, la caja no se adapta. Al redimensionarla se genera un scroll que es bastante molesto para el usuario. Para solucionar este problema, podemos usar auto-fit y que así las cajas se vayan acomodando automáticamente.

• Vamos a la caja contenedora con .dishes-grid.
• Reemplazamos el valor 4 por auto-fit.
• Reemplazamos el valor mínimo por 75px.

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

Creamos dentro del media querie:

    .dishes-grid {
        grid-template-columns: repeat(auto-fit, minmax(75px, 100px));
    }

Home menu

Tenemos el mismo problema que en la sección pasada. Y adivina qué, también lo podemos solucionar con auto-fit.

• Llamamos la clase contenedora con .menu-grid.
• Cambiamos el valor inicial por auto-fit.
• Eliminamos el ancho mínimo y máximo y lo dejamos en 150px para que se mantenga siempre en ese valor.

.menu-grid {
    display: grid;
    gap: 25px;
    justify-content: center;
   ** grid-template-columns: repeat(auto-fit, 150px);**
}

Hemos terminado nuestro proyecto usando CSS Grid para resolver todos las grillas.

¿Verdad que es muy fácil? Recuerda que puedes cambiar todas las características como tu quieras y hacerlo un proyecto completamente nuevo y diferente. De hecho, te invito a hacerlo. Ya que la mejor forma de aprender es experimentando por ti mismo. ¡Éxitos!

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