¿Cómo hacer nuestro proyecto responsivo? - Platzi

Curso de CSS Grid Básico

Curso de CSS Grid Básico

Introducción a Grid

¿Qué es CSS Grid Layout?

Conceptos para comenzar

Propiedades de Grid

Propiedades del contenedor

Propiedades de alineación

Propiedades de ubicación

Power ups de Grid

Funciones especiales

Keywords especiales

Proyecto

Proyecto

Hagamos nuestra primera sección

Creando la grilla con área

Armando el listado

Bonus

¿Cómo hacer nuestro proyecto responsivo?

Próximos pasos

Más cursos de CSS Grid

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión

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

Aportes 79

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Cristhyan Pacheco

Les presento mi proyecto final, con solo ligeros cambios porque me gusto el curso y el diseño base.

proyecto: https://cristhyanpm.github.io/platzi-css-grid-basic-project/

repositorio: https://github.com/CristhyanPM/platzi-css-grid-basic-project

Debería verse así:

Final Project RWD

Éxitos a todos!!

Juan Gustavo Daza Martínez

Me doy cuenta de la importancia del Mobile First. Es más complicado hacerlo responsive desde un desktop screen

Alex Jonathan Camacho Montenegro

Es poco, pero es trabajo honesto :'v

Ricardo Andres Ojeda Silva

Agregué unos cuantos estilos al proyecto para terminar la parte visual

Andres Badillo

Mi repo del proyecto final

Así quedo:

Juan Gui Arenas

Este curso fue excelente aprendi mucho sobre Grid pues tenia muchos vacios, pero me ayudo a comprender mejor todos lo conceptos 😃

Marco Palacios Orihuela

El curso esta bueno, pero lo ideal hubiera sido desarrollar la carta en first mobile y seguir la ruta del curso de desarrollo web y luego escalarla.
Bueno yo lo hice de esa manera siguiendo la ruta.

Javier Salcedo Salgado

Les comparto mi proyecto, aunque visualmente se ve igual le he agregado ciertas cosas que mejoran la performance y la experiencia de usuario.

A las imágenes en general las he optimizado para que pesen menos paso de 9.04 MG a 232 KB.
Le he dado una pequeña funcionalidad al botón.
A la imagen más grade le agregué un video que solo se muestra y comienza a cargar si le das clic a la imagen además de que sale una pequeña animación al cargar.
Aplique lazy loading (carga lenta) a las imágenes del Menu Home para que solo carguen momentos antes de que el usuario la vea.
Use persistencia de datos para los like para que independiente de si recargas la página te salga los like que has dado con anterioridad.
Si deseas probar entra aquí y si quieres ver como lo hice entra al repositorio.

Angel Hernandez

Voila!!! Aqui el proyecto ya por completo terminado, lo deje lo mejor que pude!

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>Proyecto de la clase</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <main>
    <section class="hero">
      <div class="info">
        <h1 class="info-title">Check the <br> best food</h1>
        <p class="info-subtitle">Lorem ipsum, dolor sit amet </p>
        <button class="info-button">Book a table</button>
      </div>
      <img class="hero-image" src="./imagenes/hero.png" alt="Plato de pasta con vegetales">
    </section>

    <section class="dishes">
      <h2 class="dishes-title">Our Services</h2>
      <div class="dishes-grid">
        <img class="dishes-item dishes-item__big" src="./imagenes/video.png" alt="video sobre la comida">
        <img class="dishes-item" src="./imagenes/dish1.png" alt="">
        <img class="dishes-item" src="./imagenes/dish2.png" alt="">
        <img class="dishes-item" src="./imagenes/dish3.png" alt="">
        <img class="dishes-item" src="./imagenes/dish4.png" alt="">
      </div>
    </section>

    <section class="menu">
      <h2 class="menu-title">Home menu</h2>
      <div class="menu-grid">
        <div class="menu-grid-item">
          <img src="./imagenes/plate1.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate2.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate3.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate4.png" alt="">
        </div>
        <div class="menu-grid-item">
          <img src="./imagenes/plate5.png" alt="">
        </div>
      </div>
    </section>
  </main>
</body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
main { 
  max-width: 1200px;
  margin: 0 auto;
}
.hero { 
  display: grid;
  grid-template-columns: minmax(300px, 2fr) 3fr;
  grid-auto-rows: 550px;/* ALTURA del contenedor */
  border-bottom: 1px solid #ddd;
}
.hero .hero-image { 
  width: 100%;
  height: 100%; /* ALTURA del contenedor */
  object-fit: contain; /* La imagen se ajuste al espacio donde esta */
}
.info { 
  align-self: center; /* Alineamos el contenido del div.info */
}
.info-title { 
  color: #333;
  font-size: 3rem;
  font-weight: bolder;
  margin-bottom: 24px;
}
.info-subtitle {
  color: #333;
  font-size: 1.5rem;
  margin-bottom: 24px;
} 
.info-button { 
  border: none;
  border-radius: 20px;
  color: #333;
  background-color: #fb8c00;
  font-weight: bolder;
  padding: 12px 24px;
}
.dishes { 
  margin: 100px 0;
}
.dishes-title { 
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;
  font-size: 2rem;
}
.dishes-grid { 
  display: grid;
  place-content: center;
  grid-template-columns: repeat(auto-fit, minmax(75px, 200px)); /* REDUCIMOS el tamaño del grid */
  grid-auto-rows: 1fr;
  gap: 24px;
}
.dishes-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dishes-item__big { 
  grid-area: 1 / 1 / 3 / 3;/* INICIA EN fila 1 y columna 1 / TERMINA EN fila 3 columna 3  */
}
.menu { 
  margin-bottom: 200px;
}
.menu-title { 
  font-size: 2rem;
  color: #333;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 50px;
}
.menu-grid { 
  display: grid;
  gap: 24px;
  justify-content: center;
  grid-template-columns: repeat(5, minmax(100px, 250px));
}
.menu-grid-item { 
  background-color: lightpink;
  padding: 12px;
  border-top-left-radius: 40px;
}
.menu-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 750px) { 
  main { 
    display: grid;
  }
  .hero { 
    grid-template-columns: minmax(300px, 500px);
    justify-content: center;
    grid-auto-rows: 300px;
  }
  .hero-image {
    display: none;
  }
  .hero .info { 
    margin-left: 40px;
  }
  .dishes { 
    margin: 52px;
  }
  .dishes-grid { 
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(50px, 100px));
  }
  .menu-grid { 
    margin: 0 16px;
    margin-bottom: 60px;
    grid-template-columns: repeat(2, minmax(100px, 200px));
    grid-auto-rows: auto;
  }
}

Joserph Camacho

Este es el proyecto con algunos cambios.

Ayrton Fidel Avalos Cuadrado

Aqui el proyecto final, le puse unas transiciones pequeñas y unos degradados, así como unos bordes y unos íconos para las redes sociales
Página: https://ayrtonfidel9.github.io/food-page/
Repositorio:https://github.com/AyrtonFidel9/food-page

ayrtonfidel9.github.io_food.png

david felipe caicedo canchon

davidfcc7.github.io_Proyectos_proyecto-css-grid_ (1).png

127.0.0.1_5501_Proyectos_proyecto-css-grid_index.html.png

Mateo Sánchez

Con la propiedad filter: drop-shadow, puedes colocar sombra a una imagen sin fondo:

César Palma

mi reto, enfocado sobretodo en grid
https://codepen.io/xsrpm/full/wvqPJjG

Julia Gabriela Nieva Paredes

¿No les molesta que el código compartido no sea el mismo que el código que se generó durante las clases de la profe? Porque a mí sí me causó confusión.

Yeins David Llano Hernández

Aquí esta mi código y el vinculo al proyecto, lo hice Mobile first y agregue mediaqueries para Tablet y desktop

Código: https://github.com/Yenda09/restaurant_page
Proyecto: https://yenda09.github.io/restaurant_page/

KEVIN A. DERAS

Les muestro mi proyecto a escala, hecho de manera responsive:
Les estaré agradecido me regalen una estrella en mi repositorio.
Gracias.
https://github.com/ArielMejia/food-menu-grid

Sergio Javier Lopez Olivera

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</h1>
                <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</h2>
            <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</h2>
            <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));
    }
  }

Raúl Adolfo Sánchez Rodríguez

Proyecto final con medias queries

Revisa el código en mi repositorio de GitHub
Mira directamente la demo
Resultado (pantalla grande)
Resultado (pantalla mediana)
Resultado (pantalla pequeña)

Juan Olima

👏👏

Christian Velázquez

Tenía todavía muchas “dudas” sobre éste tema. Gracias por el curso. Mi duda es: el usar minmax, no se rompe cuando el sitio se está adaptando para diferentes dispositivos o medidas?

Alejandro Guevara

https://cssg-rid-basico.vercel.app/
Acá esta el ejercicio, me mató mucho hacerlo responsive sin mucho código.

Luis Berenguer

Lo que yo creo que hay que cambiar es que al reducir el tamaño de la pantalla deberíamos alinear el H1 y el botón al centro (así como el subtittle) y que los márgenes superiores e inferiores son demasiado grandes, por lo cual está bien reducirlos.

Si quieres ver mi proyecto terminado lo puedes hacer aquí

Maria Esther Mendoza Zafra

Les comparto los cambios que realicé:

MANUEL GUZMÁN

Keylin David Ibarguen Rivas

me encanta como enseña Estefany salas la mejor

Jose Angel Esquivel Cisneros

@media screen and (max-width:1024px){
    .dishes-grid{
        grid-template-columns: repeat(auto-fit, minmax(75px,350px));
    }
    .menu-grid{
        margin: 0 40px;
        grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
        justify-items: center;
    }
}
@media screen and (max-width:768px){
    .info{
        text-align: center;
    }
    .hero{
        grid-template-columns: minmax(300px, 500px);
        justify-content: center;
    }
    .hero-image{
        display: none;
    }
    .dishes-grid{
        grid-template-columns: repeat(auto-fit, minmax(75px,250px));
    }
    .menu-grid{
        margin: 0 40px;
        grid-template-columns: repeat(auto-fit, minmax(150px, 250px));
        justify-items: center;
    }
}
@media screen and (max-width:630px){
    .dishes-grid{
        grid-template-columns: repeat(auto-fit, minmax(75px,200px));
    }
}
@media screen and (max-width:320px){
    .dishes-grid{
        grid-template-columns: repeat(auto-fit, minmax(75px,100px));
    }
}```

Raymondi Alejandro Ramos Vásquez

Yo había empezado con la idea de mobile-first, aquí les dejo mi repositorio 😄

Henry Alexander Velásquez Rosas

Recuerden

Primero debemos trabajar en mobile, luego para tablet y desktop. De lo contrario nos complicamos la vida.
Además debemos usar archivos independientes, uno para mobile, tablet y desktop.

Good luck 🤗

Manuel Alejandro Cabos Apolaya

✅ Terminado, modifique los media queries y le agregue función a los botones de like, lo pueden probar en CodePen y dejo el repositorio en GitHub 👨‍💻

<!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>Food</title>

  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  
  <!-- Font Open Sans -->
  <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=Open+Sans:wght@500;800&display=swap" rel="stylesheet">
  
  <!-- Font Awesome 4 Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <main>
    <section class="principal">
      <div class="description">
        <div class="info">
          <h1>Check The 
            <br>Best Food
          </h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi corrupti libero aperiam nihil magni perspiciatis ab quis debitis! </p>
          <button>
            Book a table 
            <i class="fa fa-long-arrow-right"></i>
          </button>
        </div>
        <img class="info-img" src="https://i.postimg.cc/zD21m9fG/hero.png" alt="Plato de pasta con salsa y verduras">
      </div>
    </section>
    <section class="our-services">
      <h2>OUR SERVICES</h2>
      <div class="dishes">
        <img class="video-img" src="https://i.postimg.cc/k5qHRc5H/video.png" alt="Video of pasta dishes being served">
        <div class="dish dish1">
          <p>26$</p>
          <img class="dish-img" src="https://i.postimg.cc/qR0pRyfB/dish1.png" alt="Bowl of vegetables with rice and avocado">
        </div>
        <div class="dish dish2">
          <p>26$</p>
          <img class="dish-img" src="https://i.postimg.cc/Wp5sNd5j/dish2.png" alt="Avocado and egg toast">
        </div>
        <div class="dish dish3">
          <p>26$</p>
          <img class="dish-img" src="https://i.postimg.cc/hPwgmHF5/dish3.png" alt="Asparagus with tomato and butter">
        </div>
        <div class="dish dish4">
          <p>26$</p>
          <img class="dish-img" src="https://i.postimg.cc/MG08hHnC/dish4.png" alt="Eggs and guacamole toast">
        </div>
      </div>
    </section>
    <section class="home-menu">
      <h2>Home Menu</h2>
      <div class="menus">
        <div class="menu menu1">
          <i class="fa fa-heart fa-lg" onclick="toggleLike(this)"></i>
          <img class="menu-img" src="https://i.postimg.cc/15g1yJgc/plate1.png" alt="Pasta with Neapolitan sauce and vegetables">
        </div>
        <div class="menu menu2">
          <i class="fa fa-heart fa-lg" onclick="toggleLike(this)"></i>
          <img class="menu-img" src="https://i.postimg.cc/cH1P2my3/plate2.png" alt="Pasta with broccoli and carrot">
        </div>
        <div class="menu menu3">
          <i class="fa fa-heart fa-lg" onclick="toggleLike(this)"></i>
          <img class="menu-img" src="https://i.postimg.cc/rs3bd2dG/plate3.png" alt="Pesto pasta">
        </div>
        <div class="menu menu4">
          <i class="fa fa-heart fa-lg" onclick="toggleLike(this)"></i>
          <img class="menu-img" src="https://i.postimg.cc/Fsk8MzqT/plate4.png" alt="Pasta with avocado and corn"">
        </div>
        <div class="menu menu5">
          <i class="fa fa-heart fa-lg" onclick="toggleLike(this)"></i>
          <img class="menu-img" src="https://i.postimg.cc/rw63Mc2M/plate5.png" alt="Bowl of chicken, tomato and carrots">
        </div>
      </div>
    </section>
  </main>

  <script>
    function toggleLike(button) {
      button.classList.toggle("orange");
    }
  </script>
</body>
</html>

:root {
  --space-base: 30px;
  --orange: rgba(225,116,48,1);
  --light-orange: rgb(255, 186, 137);
  --green: #21e0c4;
  --dark-green: #20bbd2;
  --dark-blue: #0f396a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: 'Open Sans', sans-serif;
}

main {
  max-width: 80vw;
  margin: 0 auto;

  font-size: 1.6rem;
}

.description {
  display: grid;
  grid-template-columns: minmax(400px, 1fr) 1fr;
  grid-auto-rows: 500px;
}

.description .info {
  margin-left: var(--space-base);
  margin-right: calc(var(--space-base) * 2);
  align-self: center;
}

.info h1 {
  color: var(--dark-blue);
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 4.8rem;
}

.info p {
  margin: var(--space-base) 0;
}

.info button {
  padding: calc(var(--space-base) / 3) var(--space-base) ;

  font: inherit;
  
  color: white;
  background: linear-gradient(180deg, var(--light-orange) 25%, var(--orange) 100%);
  
  border: none;
  border-radius: var(--space-base);
  outline: inherit;
  cursor: pointer;
}

.description .info-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.our-services h2 {
  margin-top: var(--space-base);
  color: var(--dark-blue);
  font-weight: 500;
  text-align: center;
}

.dishes {
  margin: var(--space-base) 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 220px));
  grid-template-rows: 1fr;
  gap: calc(var(--space-base));
  justify-content: center;
}

.video-img,
.dish-img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

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

.dish {
  position: relative;
}

.dishes p {
  position: absolute;
  left: 10px;
  bottom: 10px;

  font-size: 2.2rem;
  color: white;
  text-shadow: 1px 1px 2px #1b1b1b;
}

.home-menu h2 {
  padding-top: var(--space-base);
  color: var(--dark-blue);
  font-weight: 500;
  text-align: center;
}

.menus {
  margin: var(--space-base) 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(50px, 200px));
  gap: var(--space-base);
  justify-content: center;
}

.menu-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu {
  position: relative;
  padding: calc(var(--space-base) / 2);
  background-color: var(--light-orange);
  border-radius: var(--space-base) 5px 5px 5px;
}

.fa-heart {
  position: absolute;
  right: 10px;
  top: 10px;
  color: var(--green);
  cursor: pointer;
  filter: drop-shadow(0px 3px 2px rgb(0 0 0 / 0.4));
}

.fa-heart::after {
  content: '';
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.fa-heart:active {
  top: 12px;
  filter: none;
}

.orange {
  color: var(--orange);
}

@media screen and (max-width: 768px) {
  .description {
    grid-template-columns: minmax(300px, 500px);
  }

  .description .info {
    margin-left: 0;
    margin-right: 0;
  }

  .info-img {
    display: none;
  }

  .dishes {
    grid-template-columns: repeat(auto-fit, minmax(75px, 120px));
    gap: calc(var(--space-base) / 2);
  }

  .menus {
    grid-template-columns: repeat(auto-fit, minmax(90px, 120px));
    gap: calc(var(--space-base) / 2);
  }

  .menu {
    padding: calc(var(--space-base) / 3);
    border-radius: calc(var(--space-base) / 1.5) 3px 3px 3px;
  }

  .fa-heart {
    right: 8px;
    top: 8px;
  }
}

@media screen and (max-width: 320px) {
  .description h1 {
    font-size: 3.6rem;
    line-height: 3.6rem;
  }

  .info {
    width: 200px;
  }

  .dishes {
    grid-template-columns: repeat(auto-fit, minmax(75px, 100px));
    gap: calc(var(--space-base) / 2);
  }

  .menus {
    grid-template-columns: repeat(auto-fit, minmax(90px, 160px));
    gap: calc(var(--space-base) / 2);
  }
}

Stivenson David Mejia Palacios

a mi parecer así ya se ve muy bien

Julian Trujillo

Aca dejo mi proyecto, cambie las imagenes para que las recolecte de una API, entre otras cosas, muchas gracias por el curso!

https://codepen.io/kalugy/pen/KKoZMZr

Tiberio Calderón

El único cambio que le hice, fue que en viewports pequeños sí se muestre la imagen del hero, pero antes de la sección info.

Yasmil Gonzalez

mi proyecto

Christian Alexander Palacios Chávez

Les comparto mi proyecto y espero le pueda ayudar en algo.

Repositorio: https://github.com/codepalacios/proyecto-curso-css-grid-basico/tree/master
URL del sitio: https://codepalacios.github.io/proyecto-curso-css-grid-basico/

Adicionalmente quiero felicitar a la profesora ya que a mi punto de vista fue excepcional su desempeño en todo el curso 😃

Felipe García

Buenas, les presento mi proyecto.
Se agradece mucho el feedback!
.
.
Versión Desktop

.
.
.
Versión Mobile

Mateo Roldán Escobar

Les dejo mi proyecto con cambios en el hero y el menú para la versión responsive, sobretodo el menú lo adapte a flexbox, acá es donde se ve lo valioso de combinar flex y grid.

Saludos y espero que alguno pueda aprender algo interesante de mi proyecto.

https://mateorol9.github.io/menu-home/

Yormi Altamiranda

Así queda mi ejemplo:

Joram Pérez

Móvil

Tablet

Laptop

CLAUDIA ANDREA CAMPO GRIJALBA

El curso esta chevere, pero después de intentarlo como sugiere Estefany aquí, me quedo con lo aprendido en el curso de maquetación MobileFirst de Diego Granda, si a alguien que este realizando este curso le sirve la sugerencia 😃

https://media.giphy.com/media/WeWP6yWXBKAccDNk4h/giphy.gif

Brayan Barroso

screencapture-192-168-2-88-5500-2023-02-01-16_48_13.png

Daniel Zavala Taipe

Por eso recordar siempre tomar el

Curso Mobile First con el profe Diego de Granda.
https://platzi.com/cursos/mobile-first/

Lemuel Eliezer Colmenares Maza

Asi quedo el mio 😄

Raycris Maldonado

Hola a todos, desde que comenzamos el proyecto lo hice con el principio de mobile first ya que es una buena práctica. También agregué un scroll horizonal en la parte del menu. Aquí estan los links del repo; como también del pequeño video que grabé para que vean la parte del scroll horizontal.

Video: https://www.loom.com/share/1dc5778bce554750bcee10ffb1503a1b

Repositorio: https://github.com/raycris/restaurant-page.git

José Fernando Fuentes Roa

Hola a todos, acá está el repositorio final con todos los materiales, del curso, los retos de cada clase y el proyecto final del curso. Saludos

Ultisaer Revternae

Les presento mi proyecto final, costo un poco pero lo logramos

Este es el proyecto final
https://sartheghost.github.io/GRID/

juanito choque guzman

Huilén Solís

Quedo igual pero con unos pequeños cambios

Kengya Moncada

.dishe__big {
grid-row: auto / span 2;
grid-column: auto / span 2;
}

Carlos Toro

Pantallazos del proyecto

HTML

<!DOCTYPE html>
<html lang="es">
<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">
    <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;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Reto Clase 8</title>
</head>
<body>
    <main>
        <section class="hero">
            <div class="info">
                <h1 class="inf-title">Check the <br>best food</h1>
                <p class="info-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, alias!</p>
                <button class="info-button">Book a table</button>
            </div>
            <img class="hero-image" src="./assets/hero.png" alt="Plato de pasta con vegetables">
        </section>
        <section class="dishes">
            <h2 class="dishes-title">Our services</h2>
            <div class="dishes-grid">
                <img class="dishes-item dishes-item__big" src="./assets/video.png" alt="Una mesa con platos de pasta">
                <img class="dishes-item"src="./assets/dish1.png" alt="">
                <img class="dishes-item"src="./assets/dish2.png" alt="">
                <img class="dishes-item"src="./assets/dish3.png" alt="">
                <img class="dishes-item"src="./assets/dish4.png" alt="">
            </div>
        </section>
        <section class="menu">
            <h2 class="menu-title">Home menu</h2>
            <div class="menu-grid">
                <div class="menu-grid-item">
                    <img src="./assets/plate1.png" alt="Plato de pasto con salsa y vegetables">
                </div>
                <div class="menu-grid-item">
                    <img src="./assets/plate2.png" alt="Plato de pasto con salsa y vegetables">
                </div>
                <div class="menu-grid-item">
                    <img src="./assets/plate3.png" alt="Plato de pasto con salsa y vegetables">
                </div>
                <div class="menu-grid-item">
                    <img src="./assets/plate4.png" alt="Plato de pasto con salsa y vegetables">
                </div>
                <div class="menu-grid-item">
                    <img src="./assets/plate5.png" alt="Plato de pasto con salsa y vegetables">
                </div>
            </div>
        </section>           
    </main>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    /* margin: 0; */
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
main {
    max-width: 1200px;
    margin: 0 auto;
}
.hero {
    display: grid;
    grid-template-columns: minmax(300px, 2fr) 3fr;
    grid-auto-rows: 550px;
}
.hero-image {
    width: 70%;
    align-self: center;
    object-fit: scale-down;
}
.info {
    align-self: center;
}
.info-title {
    color: #333;
    font-size: 3rem;
    font-weight: bolder;
    margin-bottom: 24px;
}
.info-subtitle {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 24px;
}
.info-button {
    border: none;
    border-radius: 20px;
    color: #333;
    background-color: #fb8c00;
    font-weight: bolder;
    padding: 12px 24px;
}
.dishes {
    margin: 100px 0;
}
.dishes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(75px, 200px));
    grid-auto-rows: 1fr;
    gap: 25px;
    justify-content: center;
}
.dishes-title {
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
    font-size: 2rem;
}
.dishes-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dishes-item__big {
    grid-area: 1 / 1 / 3 / 3;
}
.menu {
    margin-bottom: 80px;
}
.menu-title {
    font-size: 2rem;
    color: #333;
    font-weight: bolder;
    text-align: center;
    margin-bottom: 40px;
}
.menu-grid {
    display: grid;
    gap: 25px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
}
.menu-grid-item {
    background-color: rgb(245, 228, 222);
    padding: 15px;
    border-top-left-radius: 40px;
}
.menu-grid-item:hover {
    background-color: rgb(255, 255, 255);
    padding: 1px;
    /* border-bottom-right-radius: 40px; */
    border-radius: 50%;
    border: 2px ridge lightgray;
}
.menu-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media screen and (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr 2fr 2fr 1fr;
        grid-template-rows: 1fr 1fr;
        justify-content: center;
    }
    .hero-image {
        width: 100%;
        grid-area: 1 / 2 / 2 / 4;
    }
    .info-subtitle {
        font-size: 1rem;
    }
    .info {
        display: grid;
        justify-items: center;
        grid-area: 2 / 2 / 3 / 4;
    }
    .dishes-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 150px));
    }
}

Agustin Gonzalez

Acá dejo como me quedó a mi🙂

Luis Pacheco

Captura de pantalla 2022-08-31 002033.png

Luis Pacheco

Captura de pantalla 2022-08-31 001322.png

Giuliano De Leonardis

Hola comunidad

Acá les dejo el enlace a mi proyecto final, el cual está ubicado en GitHub:

https://giulianodeleonardis.github.io/gridLayout/

Marcelo Vazquez Gutierrez

Les comparto mi proyecto:

Repositorio: https://github.com/Canti21/basic-css-grid

Despliegue: https://canti21.github.io/basic-css-grid/

Vista previa:

Adrian Loaiza Carmona

Aprendiendo cada día más…

SAMUEL CADENA

-Proyecto Terminado
-Trabajo 100% Responsivo

Rafael Martínez Rodríguez

Les comparto el link del repositorio, el cual también pueden ver en live Repositorio

También de un curso realizado anteriormente comparto este aporte de otro compañero de esta extensión que nos permite visualizar varias pantallas de dispositivos móviles al tiempo Responsive Viewer

Captura de pantalla de 2022-05-24 19-29-01.png

Arturo Castañeda

Les dejo el repositorio y la vista de la web, tiene algunas modificaciones.

Alejandro Zambrano Lasso

Compañero envío el link del repo : https://github.com/alejandrozambrano/proyecto_Grid_basic

* {
    font-family: 'Roboto', sans-serif;
}

main {
    max-width: 1200px;
    margin: 0 auto;
}

.hero {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-auto-rows: 550px;
    border-bottom: 1px solid #ddd;
}

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

.info {
  align-self: center;  
}

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

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

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

.dishes {
    margin: 100px 0;
}

.dishes-title {
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
    font-size: 2rem;
}  
.dishes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(75px, 200px));
    grid-auto-rows: 1fr;
    gap: 35px;
    justify-content: center;
}

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

.disches-item__big {
    grid-area: 1 / 1 / 3 / 3;
}

.menu {
    margin-bottom: 200px;
}


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

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

.menu-grid-item {
    background-color: #333;
    padding: 15px;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.menu-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:drop-shadow(4px 6px 15px #333);
}

@media screen and (max-width: 768px) {

    .hero-image {
        grid-area: 1 / 1 / 1 / 1;
        width: 90%;
        margin-top: 10px;
        place-self: center;
    }

    .hero {
        grid-template-columns: minmax(300px, 500px);
        justify-content: center;
    }

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

    .info {
        align-self:initial;
}

Axel Eduardo Moncada Barriga

Les muestro mi proyecto le hice unas modificaciones basicas y asi quedo

Hector Arturo Hernandez Zamora

proyecto-https://cuanticat.github.io/CssGrid/
repositorio-https://github.com/CuantiCat/CssGrid

Fabio Alejandro Ramirez Saavedra

No logre hacerlo totalmente resposive, seguiré aprendiendo, mientras comparto mi avance.

Captura de pantalla 2022-05-25 104251.png

Alejandro Loayza Barazorda

Proyecto contemplando mobile first y con algunos media queries para mejorar la vista según el viewport
https://codepen.io/aloayzab88/pen/dydRGej

Jonathan David Olivos

Dejo el repo de mi proyecto 😄
https://github.com/papitapapita/grid_exercises

Diego Herrera Prado

El resultado de mi proyecto
Le agregué un par de animaciones.

Yamila Fogar

Mobile:

Diego Fabian Rico Castro

Este es mi resultado, hice algunos cambios como centrar los textos del hero, deje la grilla del hero con cada sección de 1fr y le deje un max-width de 900px entre otros cambios.
Excelente curso.

Lucas Gabriel Serral

Si bien este curso se centra en CSS Grid, para la sección del menú podría lograrse un mejor resultado con display Flex.

Por ejemplo, se podría centrar los elementos cuando saltan de línea.

Recomiendo fuertemente a los que siguieron este curso que sigan aprendiendo CSS Grid y que también agreguen flexbox a su caja de herramientas para tomar lo mejor de cada mundo en los momentos oportunos.

Pase lo que pase… nunca dejes de aprender 💚🚀

Yobana Iris Ney Silva Rivero

Cesidio Antonio Di Benedetto Carri

JeffUy

Les dejo mi proyecto final, basado en Jurassic Park 😃

Proyecto Final
Repositorio

Kevin Orellana

Kevin Orellana

Estes es el link de mi proyecto

Kevin Alexander Chari Castillo

FireShot Capture 008 - Layout Comida - 127.0.0.1.png

Óscar Andrés Ugarte De La Fuente

Mobile

Tablet

Laptop

Pc

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

body{
    margin: 0;
    padding: 0;
}

*{
    font-family: 'Roboto', sans-serif;
}

main{
    max-width: 1200px;
    margin: 0 auto;
}

.hero{
    display: grid;
    grid-template-columns: minmax(300px, 2fr) 3fr;
    grid-template-rows: 450px;
    border-radius: 50px;
    box-shadow: 5px 5px 5px #aaaaaa;
}

.info{
    align-self: center;
    padding-left:50px ;
    padding-bottom: 25px;
}

.hero-img img{
    width: 100%;
    height: 400px;
    object-fit: contain;

}

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

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

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

.dishes{
    margin:100px 0;
}

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

.dishes-grid{

    display: grid;
    grid-template-columns:  repeat(4,minmax(75px, 200px));
    grid-auto-rows: 1fr;
    gap: 25px;
    justify-content: center;
}

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

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

.menu{
    margin-bottom: 50px;
}

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

.menu-grid{
    display: grid;
    gap: 25px;
    justify-content: center;
    grid-template-columns: repeat(5, minmax(150px, 250px));
}

.menu-grid-item{
    background-color: papayawhip;
    padding: 15px;
    border-top-left-radius: 40px;
}

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

@media  screen and (max-width:1990px) {

    .info-title{
        font-size: 2.5rem;

    }
    
    .info-suntitle{
        font-size: 1.2rem;
     
    }
    
    .info-button{
        font-size: 1rem;
    }
    


}




@media  (max-width:768px) {

    main{
        width: 100%;
    }
    .hero{
        border-radius: unset;
        box-shadow: none;
    }

    .info{
        padding: 0;
        display: flex;
        flex-direction: column;
        
        
    }

    .info-title{
        font-size: 3rem;
        text-align: center;
    }

    .info-suntitle{
        text-align: center;
    }

    .info-button{
        width: 50%;
        align-self: center;
    }
  


    .hero{
        grid-template-columns: minmax(300px, 500px);
        justify-content: center;
    }
    
    .hero-img{
        display: none;
    }

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

    .menu-grid{

        grid-template-columns: repeat(auto-fit, 140px);
    }


}

@media  (max-width:320px) {

    .hero{
        padding-left: 10px;
        padding-right: 10px;
    }

    .dishes{
        padding-left: 10px;
        padding-right: 10px;
    }

}

dgpar

Mis cambios fueron:

Eliminé la altura fija del header porque cuando se achica la pantalla queda mucho espacio.
Los títulos los puse como primera fila en el grid.
Eliminé el auto-fit de dishes y menú y en el media query pasé la grid de 4 columnas a 2 columnas.
En el menú a las imágenes les puse un borde inferior derecho redondeado y una pequeña sombra como para dar sensación de botón.
Hice que el ancho de dishes coincida con el de menú.

Andrés López

Este fue mi responsive, es poco pero es trabajo honesto XD

Joel Dominguez Merino

Tenemos proyecto terminado 😎 🚀
Repositorio GitHub: https://github.com/iJCode1/CSS_Grid_Basico-Platzi
.
🌐 GitHub Pages: https://ijcode1.github.io/CSS_Grid_Basico-Platzi/proyecto/
.
Vista Desktop:

.
Vista Tablet:

.
Vista Móvil: