Creación de Diseños Responsivos con CSS Grid

Contenido del curso

Introducción a Grid

Propiedades de Grid

Power ups de Grid

Proyecto

Bonus

12
Creación de Diseños Responsivos con CSS Grid
Viendo ahora

Próximos pasos

13
Especificación de CSS Grid: Curso Final y Próximos Pasos
00:30 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:21

Creación de Diseños Responsivos con CSS Grid

Curso de CSS Grid Básico

Clase 12 de 13

Clase 12 / 13

Recursos

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).

Sergio Javier Lopez Olivera

Hace 4 años

Challenge completed: .

. . .

. . . HTML: .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./projectClass.css">
</head>
<body>
    <main>
        <section class="hero">
            <div class="info">
                <h1 class="info-title">Check the<br/>best food</h2>
                <p class="info-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor neque sed turpis bibendum dapibus.</p>
                <button class="info-button">Book a table</button>
            </div>
            <figure class="hero-image">
                <img src='https://i.ibb.co/R0xYKtR/hero.png' alt="Dish of pasta with neapolitan sauce and vegetables">
            </figure>
        </section>
        <section class="services">
            <h2 class="services-title">Our services</h3>
            <div class="dishes">
                <img class="dishes-image dishes-image__big" src="https://i.postimg.cc/k5qHRc5H/video.png" alt="video of pasta dishes being served">

                <img class="dishes-image" src="https://i.postimg.cc/qR0pRyfB/dish1.png" alt="bowl of vegetables with rice and avocado">

                <img class="dishes-image" src="https://i.postimg.cc/Wp5sNd5j/dish2.png" alt="Avocado and egg toast">

                <img class="dishes-image" src="https://i.postimg.cc/hPwgmHF5/dish3.png" alt="asparagus with tomato and butter">
                
                <img class="dishes-image" src="https://i.postimg.cc/MG08hHnC/dish4.png" alt="eggs and guacamole toast ">
            </div>
        </section>
        <section class="menu">
            <h2 class="menu-title">Home menu</h3>
            <div class="plates">
                <div class="plates-grid-item">
                    <img src="https://i.postimg.cc/15g1yJgc/plate1.png" alt="pasta with neapolitan sauce and vegetables">
                </div>
                <div class="plates-grid-item">
                    <img src="https://i.postimg.cc/cH1P2my3/plate2.png" alt="pasta with broccoli and carrot">
                </div>

                <div class="plates-grid-item">
                    <img src="https://i.postimg.cc/rs3bd2dG/plate3.png" alt="pesto pasta">
                </div>

                <div class="plates-grid-item">
                    <img  src="https://i.postimg.cc/Fsk8MzqT/plate4.png" alt="pasta with avocado and corn">
                </div>

                <div class="plates-grid-item">
                    <img src="https://i.postimg.cc/rw63Mc2M/plate5.png" alt="bowl of chicken, tomato and carrots">
                </div>
            </div>
        </section>
    </main>
</body>
</html>

. . . CSS: .

* {
    font-family: 'Roboto', sans-serif;
  }
  
  main {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Hero */

  .hero {
    display: grid;
    grid-template-columns: minmax(300px, 2fr) 3fr;
    grid-auto-rows: 550px;
    border-bottom: 1px solid #ddd;
    background: linear-gradient(to right, #141e30, #243b55)
  }

  .hero-image {
    margin: 0;
  }

  .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .info {
    align-self: center;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    z-index: 4;
  }

  .info-title {
    color: #FFFF;
    font-weight: bold;
    font-size: 2.4rem;
  }

  .info-subtitle {
    color: #FFFF;
    font-weight: 400;
    line-height: 1.6rem;
  }

  .info-button {
    border: none;
    background-color: #fb8c00;
    color: #333;
    padding: 1rem;
    border-radius: 5rem;
    width: 8rem;
    font-weight: 900;
  }

  /* Services  */

  .services {
    border-bottom: 1px solid #ddd;
  }

  .services-title {
    color: #333;
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
  }

  .dishes {
    margin: 100px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(75px, 200px));
    /* aqui usamos auto-fit para rellenar con las celdas en el espacio correspondiente, lo suficiente para que quepa */
    grid-auto-rows: 1fr;
    gap: 25px;
    justify-content: center;
  }

  .dishes-image {
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.6rem;
    box-shadow: 0 2px 5px .2px rgba(78, 78, 78, 0.24);
  }

  .dishes-image__big {
    grid-area: 1 / 2 / 3 / 4;
  }

  /* List */

  .menu {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;;
  }

  .menu-title {
    color: #333;
    font-size: 2rem;
    font-weight: bolder;
    text-align: center;
  }

  .plates {
    display: grid;
    gap: 2rem;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, 150px);
  }

  .plates-grid-item {
    background-color: #333;
    padding: 0.8rem;
    border-radius: 2rem 2rem 0 2rem;
    box-shadow: 0 2px 5px .2px rgb(26, 26, 26);
  }

  .plates-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  @media screen and (max-width: 760px) {
    .hero {
        grid-template-columns: minmax(100px, 500px);
        justify-content: center;
        background-color: linear-gradient(to right, #4b79a1, #283e51);
    }

    .hero-image {
        display: none;
    }
    .info-title {
        color: white;
    }
    .info-subtitle {
        color: white;
    }
    .services-title {
        color: #333;
        z-index: 4;
    }
    .dishes {
        grid-template-columns: repeat(auto-fit, minmax(75px, 100px));
    }
  }

Comentarios (98)98 comentarios

Juan Gustavo Daza Martínez

Hace 5 años

Dario Paladines

Sebastián Arredondo Posada

Alex Jonathan Camacho Montenegro

Ricardo Andres Ojeda Silva

Juan Gui Arenas

Marco Palacios Orihuela

Angel Hernandez

Joserph Camacho

david felipe caicedo canchon

Manuel Eduardo Chingay Lopez

Juan Felipe Turca Molina

Estefany Salas

Team Platzi

Mateo Sánchez

César Palma

Omar Gabriel Aguilar Moscoso

KEVIN A. DERAS

Julia Gabriela Nieva Paredes

Fabiola Rocha

Raúl Adolfo Sánchez Rodríguez

María C. Santiago

Hace 3 años

Juan Olima

Yeins David Llano Hernández

Christian Velázquez

Alejandro Guevara

Luis Berenguer

Introducción a Grid

CSS Grid Layout: Crea Diseños Web Dinámicos

Conceptos básicos de CSS Grid Layout

Propiedades de Grid

Creación de Grillas con CSS Grid: Propiedades y Ejemplos Prácticos

Propiedades de Alineación en CSS Grid

Ubicación de Elementos en CSS Grid: Grid Column, Grid Row y Grid Area

Power ups de Grid

Funciones avanzadas de CSS Grid: minmax y repeat

CSS Grid: Uso de fr, minContent, maxContent, autofill y autofit

Proyecto

Diseño de Grillas para Páginas Web de Comida

Maquetación de Sección con Grid en HTML y CSS

Maquetación de Grillas y Estilos CSS en Proyectos Web

Creación de Grilla de Menú en HTML y CSS

Bonus

Creación de Diseños Responsivos con CSS Grid

Próximos pasos

Especificación de CSS Grid: Curso Final y Próximos Pasos

Creación de Diseños Responsivos con CSS Grid

Progreso del curso

Introducción a Grid

Propiedades de Grid

Power ups de Grid

Proyecto

Bonus

Próximos pasos

Recursos

Recursos