Proyecto - 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,

Recursos

Crear proyectos es de hecho la parte más importante de tu aprendizaje, ya que al crear algo real fortaleces tu conocimiento en gran medida.

Proyecto de creación del curso

Demos un vistazo al template final que vamos a construir:

Bien, el primer paso es imaginar cómo están divididas nuestras secciones:

La celda es la unidad mínima de nuestra grilla, por lo que debemos prestarle mucha atención. En la sección de la mitad, observamos que las cuatro celdas pequeñas de la derecha nos indican que la sección tendrá cuatro columnas y dos filas.

Maquetación Inicial

Primero, creamos una estructura simple con un main dentro.

<body>
    <main>
        
    </main>
</body>

En los estilos, seteamos todo la hoja para usar la fuente Roboto.
Le damos un ancho máximo de 1200px al proyecto.
Centramos todo el contenido con margin: 0 auto.

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

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

Como te diste cuenta usaremos varias imágenes como parte de la página. Puedes descargar todas desde este enlace.

Genial, ¡ahora estamos listos para empezar a crear los contenedores!

Contribución creada por: José Miguel Ventimilla (Platzi Contributor) con aportes de César Palma.

Aportes 38

Preguntas 2

Ordenar por:

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

Darwing Steven Sánchez Londoño

Vamos por buen camino, has avanzado, espero no te detengas, el camino es largo pero satisfactorio y cuando lleguemos arriba, hincharemos el pecho con orgullo diciendo, SI PUDE.

César Palma

Tip de maquetación con grid:
En una posible grilla ver cual es el elemento más pequeño que tiene que estar en la grilla.
A partir del elemento más pequeño determinar el número de filas y columnas a necesitar para maquetar todos los elementos de dicha sección de la web.

Leal Brigitte

Me rete a mi misma e hice el proyecto sin ver los videos de este módulo. Lo hice a 320px ya que estoy manteniendo lo aprendido en el curso de Responsive Design: Mobile First. He aquí el resultado:

HTML

CSS

Jerremi Aron Chancan Labajos

Puse todas las imágenes en una carpeta para que sea mas fácil usarlas
https://drive.google.com/drive/folders/1PR4d5rzgdQzdjT2cyWGz2DIWSlDMj27L?usp=sharing
comparto el link de google drive

Joel Dominguez Merino

El proyecto se me muy interesante, siento que tenemos todo el conocimiento para desarrollarlo. Muchas gracias por las practicas que nos dejo en cada clase, sin duda fue el diferenciador para absorber mejor cada concepto. Vamos con todo! 😎

Andrés Esteban Rodríguez Jiménez

Yo lo hice sin ver el resto de clases solo para ver como me quedaba XD

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">
    <link rel="stylesheet" href="./estilos.css">
    <title>Grid layout</title>
</head>
<body>
    <div class="container">
        <div class="item-1">
            <h1>Ckeck the best food</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <button>See more details</button>
        </div>
        <figure class="item-2">
            <img src="https://i.postimg.cc/zD21m9fG/hero.png" alt="plato de comida">
        </figure>
    </div>
    <h1 class="services">Our services</h1>
    <div class="container-services">
        <img src="https://i.postimg.cc/k5qHRc5H/video.png" alt="video de nuestros platos" class="plate-1">
        <img src="https://i.postimg.cc/qR0pRyfB/dish1.png" alt="plato 1" class="plate-2">
        <img src="https://i.postimg.cc/Wp5sNd5j/dish2.png" alt="plato 2" class="plate-3">
        <img src="https://i.postimg.cc/hPwgmHF5/dish3.png" alt="plato 3" class="plate-4">
        <img src="https://i.postimg.cc/MG08hHnC/dish4.png" alt="plato 4" class="plate-5">
    </div>
    <h3 class="menu">Home menu</h3>
    <div class="menu-container">
        <img src="https://i.postimg.cc/15g1yJgc/plate1.png" alt="plato 1">
        <img src="https://i.postimg.cc/cH1P2my3/plate2.png" alt="plato 2">
        <img src="https://i.postimg.cc/rs3bd2dG/plate3.png" alt="plato 3">
        <img src="https://i.postimg.cc/Fsk8MzqT/plate4.png" alt="plato 4">
        <img src="https://i.postimg.cc/rw63Mc2M/plate5.png" alt="plato 5">
    </div>
</body>
</html>

CSS

html {
    font-size: 62.5%;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

:root {
    --white: #fff;
    --main-black: #17202A;
    --gray-text: #515A5A;
    --main-orange: #F39C12;
    --xs: 1.2rem;
    --s: 1.4rem;
    --m: 1.6rem;
    --l: 1.8rem;
    --xl: 2rem;
    --xxl: 2.4rem;
}

body {
    background: linear-gradient(225deg, #ffffff, #e6e5e5);
}

.container {
    background-color: #ffffff;
    display: grid;
    margin: 16px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    padding: 8px;
    gap: 4px;
    place-content: center;
}

.item-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 4px;
}

.item-1 h1 {
    color: var(--main-black);
    font-size: var(--l);
    text-align: start;
}

.item-1 p {
    color: var(--gray-text);
    text-align: start;
    margin: 12px 16px 18px;
    font-size: var(--s);
}

.item-1 button {
    color: var(--white);
    padding: 8px 16px;
    background-color: var(--main-orange);
    border: none;
    border-radius: 8px;
    font-weight: bold;
}

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

.services {
    text-align: center;
    color: var(--gray-text);
    margin: 32px 0;
}

.container-services {
    margin: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2,1fr);
}

.container-services > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.plate-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.menu {
    color: var(--main-black);
    font-size: var(--m);
    text-align: center;
    margin: 32px 0;
}

.menu-container {
    margin: 16px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

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

Antonio Mora

Trate de hacer el proyecto antes de ver las clases, este es mi resultado.

Christian Andres Moreno Ceballos

Se ve muy interesante el proyecto, perfecto para el portafolio. Vamo a darle

Remix Zapata

Mi intento se hacer el proyecto antes de ver las clases:
Mobile:

Screenshot 2022-05-29 at 23-02-41 Restaurant Ratatouile.png

Desktop:

Paula Andrea Hayle

agradecida con el de arriba.
XD

marco antonio

Aquí mi primer intento antes de ver el video de como construirlo
si alguien quiere echarle un vistazo pueden verlo en mi github

Raúl Adolfo Sánchez Rodríguez

Maquetación

_

Genaro Flores Bustos

Acá intentando antes de ver como lo hace la profe a ver que sale 😄

Juan Camilo Salazar Rojas

Aquí mi resultado

humbertopeaton

desktop: ![](https://static.platzi.com/media/user_upload/image-50b5cb02-1a45-4944-8123-207aab1199a9.jpg) mobile: ![](https://static.platzi.com/media/user_upload/image-d4c5bda3-dbfa-4a95-8104-9d5e6da2f96c.jpg) ![](https://static.platzi.com/media/user_upload/image-a778866f-6284-406a-b6fb-d6c141210ff3.jpg) HTML: ```js <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/main.css"> <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=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> <title>Curso de CSS Grid Básico</title> </head> <body> <header></header> <main> <section class="cards">

Reto de propiedades de contenedor

<section class="cards__container"> <article class="cards__item">

1

</article> <article class="cards__item">

2

</article> <article class="cards__item">

3

</article> <article class="cards__item">

4

</article> <article class="cards__item">

5

</article> <article class="cards__item">

6

</article> </section> </section> <section class="cards">

Propiedades de ubicacion

<section class="cards__images"> </section> </section> <section class="introduccion"> <article class="introduccion__info">

Check the Best Food

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus non odio, commodi sint sit eligendi!

<button>Buy a salearrow_right_alt</button>

</article> <picture class="introduccion__image"> </picture> </section> <section class="our-service">

Our service

<section class="our-service__images"> </section> </section> <section class="home-menu">

Home menu

<section class="home-menu__images"> <picture> favorite </picture> <picture> favorite </picture> <picture> favorite </picture> <picture> favorite </picture> <picture> favorite </picture> </section> </section> </main> <footer></footer> </body> </html> ``````js .introduccion { @include flexbox(row, center, center); flex-wrap: wrap; &__info { @include flexbox(column); gap: 1rem; width: 50%; min-width: 30rem; color: $primary-color; h1 { margin: 0; @include font-text(4rem, 600, 4rem); } p { @include font-text(1.5rem, 400, 2rem); } button { @include flexbox(row,center, center); width: 10rem; height: 2rem; border: none; border-radius: 2rem; background-color: $secondary-color; @include font-text(1rem, light, 2rem); color: $fifth-color; span { padding-left: 0.4rem; font-size: 2rem; } } ul { padding: 1rem 0; list-style: none; @include flexbox(row, start, center); gap: 1rem; } } &__image { width: 100%; min-width: 28rem; max-width: 35rem; img { width: 100%; }; } } ``````js .our-service { padding: 2rem; h2 { @include font-text(2.5rem, 700, 3rem); text-align: center; } &__images { margin-top: 2rem; @include grid-container(repeat(auto-fill, minmax(20rem, 30rem)), center, center); @include responsive('small'){ @include grid-container(repeat(4, minmax(7.5rem, 20rem)),repeat(2, 1fr), center, center); grid-template-areas: "picture1 picture1 picture2 picture3" "picture1 picture1 picture4 picture5" ; } gap: 1rem; img { width: 100%; height: 100%; object-fit: cover; } .picture1 { @include responsive('small') { grid-area: picture1; } } .picture2 { @include responsive('small') { grid-area: picture2; } } .picture3 { @include responsive('small') { grid-area: picture3; } } .picture4 { @include responsive('small') { grid-area: picture4; } } .picture5 { @include responsive('small') { grid-area: picture5; } } } } ``````js .home-menu { padding: 2rem; h2 { @include font-text(2.5rem, 700, 3rem); text-align: center; margin-bottom: 2rem; } &__images { @include grid-container(repeat(auto-fit, minmax(6rem, 10rem)), none, center, center); gap: 1rem; picture { position: relative; .material-symbols-outlined { position: absolute; right: 0; top: 0; font-size: 1.5rem; color: $secondary-color; font-variation-settings: 'FILL' 1, } &:nth-child(2) { span{ color: $fourth-color; } } img { width: 100%; height: 100%; } } } } ```

Santiago Rodriguez Chaves

vamos a por este proyecto les dejo el repositorio en github al final del curso

Eduardo Perez Cardenas

En los recursos del curso (abajo del video) aparecen no solo las imágenes y el proyecto completo, sino todo el material del curso. Lo digo por que veo personas que publican las imágenes, y estas ya están colgadas.

Pablo Alejandro Figueroa

A I Responsive…?

Erik Isaac Cruz Vazquez

```html <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body>

<section class="section_1">

<h1 class="h1"> Check The
Best Food Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos dolorem consequuntur vitae pariatur ratione minima rem eos dolore adipisci, alias eum aperiam dignissimos asperiores delectus aut vel officiis explicabo mollitia. <button type="button">Book A Sale ➡️</button>

</section>

<section class="section_2 pd"> <h1 class="section_2_title">OUR SERVICES

$26.88

$26.88

$26.88

$26.88

$26.88

</section> <section class="section_3 pd"> <h1 class="home_menu">Home Menu

💗

💗

💗

💗

💗

</section> <script src="https://kit.fontawesome.com/e799ec8ae5.js" crossorigin="anonymous"></script>

</body> </html> ```![]()

Johan Rodriguez

Intenté hacer el proyecto por mi cuenta y este fue el resultado. Agradecería cualquier feedback. Éxitos con sus proyectos.

**Mobile **

Screenshot 2024-02-29 100811.png

Screenshot 2024-02-29 100857.png

Desktop

Screenshot 2024-02-29 100716.png

**Código HTML: **

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS grid project</title>
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main>
      <div class="main-container">
        <section class="banner">
          <div class="banner__text-container">
            <h1 class="banner__title">Check The Best Food</h1>
            <p class="banner__paragraph">
              There is a wide variety of delicious foods that you can try and
              delight your palate. You will like it so much that you won't want
              to go anywhere else.
            </p>
            <button class="banner__button">Book A Table</button>
          </div>
          <figure>
            <img
              class="banner__image"
              src="./assets/images/hero.png"
              alt="pasta"
            />
          </figure>
        </section>
        <section class="services">
          <h2 class="title">Our Services</h2>
          <div class="dishes-container">
            <figure class="dishes-container__dish-1">
              <img
                class="dishes-container__dish-image dishes-container__dish-image--first"
                src="./assets/images/video.png"
                alt="video"
              />
            </figure>
            <figure>
              <img
                class="dishes-container__dish-image dishes-container__dish-image--second"
                src="./assets/images/dish1.png"
                alt="dish1"
              />
            </figure>
            <figure>
              <img
                class="dishes-container__dish-image dishes-container__dish-image--third"
                src="./assets/images/dish2.png"
                alt="dish2"
              />
            </figure>
            <figure>
              <img
                class="dishes-container__dish-image dishes-container__dish-image--fourth"
                src="./assets/images/dish3.png"
                alt="dish3"
              />
            </figure>
            <figure>
              <img
                class="dishes-container__dish-image dishes-container__dish-image--fifth"
                src="./assets/images/dish4.png"
                alt="dish4"
              />
            </figure>
          </div>
        </section>
        <section class="home-menu">
          <h3 class="title title--home-menu">Home Menu</h3>
          <div class="menu-container">
            <figure class="menu-container__dish-container">
              <img
                class="menu-container__first-plate"
                src="./assets/images/plate1.png"
                alt="plate1"
                loading="lazy"
              />
            </figure>
            <figure
              class="menu-container__dish-container menu-container__dish-container--orange-heart"
            >
              <img
                class="menu-container__second-plate"
                src="./assets/images/plate2.png"
                alt="plate2"
                loading="lazy"
              />
            </figure>
            <figure class="menu-container__dish-container">
              <img
                class="menu-container__third-plate"
                src="./assets/images/plate3.png"
                alt="plate3"
                loading="lazy"
              />
            </figure>
            <figure class="menu-container__dish-container">
              <img
                class="menu-container__fourth-plate"
                src="./assets/images/plate4.png"
                alt="plate4"
                loading="lazy"
              />
            </figure>
            <figure class="menu-container__dish-container">
              <img
                class="menu-container__fifth-plate"
                src="./assets/images/plate5.png"
                alt="plate5"
                loading="lazy"
              />
            </figure>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

Código CSS:

reset.css

*,
*::after,
*::before {
  /* Include padding and border in size calculation. */
  box-sizing: border-box;
}

* {
  /* Reset margins of all elements. */
  margin: 0;
  /* Reset padding of all elements. */
  padding: 0;
  /* Avoid problems with overflow in Flexbox and Grid */
  min-width: 0;
  /* Ensure that the element inherits the font properties of its parent element */
  font: inherit;
}

html {
  /* Change the default font size of the html element to 10px for a more convenient calculation when using 'rem' to set the font size. */
  font-size: 62.5%;
}

body {
  /* Ensure that the body fills the entire viewport. */
  min-height: 100dvh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* Balance headings across multiple lines into an even block. */
  text-wrap: balance;
}

p {
  /* Prevent text orphans (single words on last line). */
  text-wrap: pretty;
}

img,
video,
svg {
  /* The element take up the entire available width of your container, which is useful for avoiding alignment issues */
  display: block;
  /* Ensure that the element's height is scaled proportionally to its width, maintaining the original aspect ratio  */
  height: auto;
  /* Prevent element from extending beyond the width of their container, which is useful for responsive designs. */
  max-width: 100%;
}

styles.css

body {
  font-family: "Roboto", "sans-serif";
}

.main-container {
  margin: 0 auto;
  padding: 20px 60px;
  -webkit-box-shadow: 0px -3px 21px -3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px -3px 21px -3px rgba(0, 0, 0, 0.75);
  box-shadow: 0px -3px 21px -3px rgba(0, 0, 0, 0.75);
  max-width: 1200px;
  background-color: #fff;
}

.banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  place-items: center;
  gap: 40px;
  margin-bottom: 40px;
}

.banner__text-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.banner__title {
  font-size: 5rem;
  font-weight: bold;
  color: #022430;
  width: 250px;
}

.banner__paragraph {
  font-size: 1.8rem;
  color: #022430;
}

.banner__button {
  align-self: flex-start;
  border: none;
  border-radius: 20px;
  padding: 8px;
  font-size: 1.8rem;
  color: #fff;
  width: 180px;
  background-color: #f98a47;
}

.banner__image {
  width: 100%;
  height: auto;
  aspect-ratio: 829 / 800;
}

.title {
  font-size: 2.4rem;
  color: #646d6f;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}

.services {
  margin-bottom: 40px;
}

.dishes-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

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

.dishes-container__dish-image {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dishes-container__dish-image--first {
  aspect-ratio: 739 / 800;
}

.dishes-container__dish-image--second {
  aspect-ratio: 309 / 290;
}

.dishes-container__dish-image--third {
  aspect-ratio: 60 / 61;
}

.dishes-container__dish-image--fourth {
  aspect-ratio: 307 / 316;
}

.dishes-container__dish-image--fifth {
  aspect-ratio: 305 / 328;
}

.home-menu {
  margin-bottom: 40px;
}

.title--home-menu {
  text-transform: initial;
}

.menu-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.menu-container__dish-container {
  background-color: #feefec;
  border-top-left-radius: 20px;
  position: relative;
}

.menu-container__dish-container::before {
  content: "🩵";
  position: absolute;
  right: 4px;
  top: 4px;
}

.menu-container__dish-container--orange-heart::before {
  content: "🧡";
}

.menu-container__first-plate {
  aspect-ratio: 508 / 491;
}

.menu-container__second-plate {
  aspect-ratio: 517 / 483;
}

.menu-container__third-plate {
  aspect-ratio: 502 / 497;
}

.menu-container__fourth-plate {
  aspect-ratio: 1 / 1;
}

.menu-container__fifth-place {
  aspect-ratio: 499 / 500;
}

@media (width <= 550px) {
  .dishes-container {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .dishes-container__dish-1 {
    grid-area: initial;
  }
}

Cristian Acevedo

siempre que veamos desktop hay que pensar como sera en movil y como vamos acomodar las section pero hay vamos!

Diego Morales

Crear proyectos es de hecho la parte más importante de tu aprendizaje, ya que al crear algo real fortaleces tu conocimiento en gran medida. ## Proyecto de creación del curso Demos un vistazo al template final que vamos a construir: ![image.png](https://static.platzi.com/media/articlases/Images/image%28349%29.png) Bien, el primer paso es imaginar cómo están divididas nuestras secciones: ![image.png](https://static.platzi.com/media/articlases/Images/image%28350%29.png) La celda es la unidad mínima de nuestra grilla, por lo que debemos prestarle mucha atención. En la sección de la mitad, observamos que las cuatro celdas pequeñas de la derecha nos indican que la sección tendrá cuatro columnas y dos filas. ### Maquetación Inicial Primero, creamos una estructura simple con un ***main*** dentro. `<body>` ` <main>` ` </main>` `</body>` * En los estilos, seteamos todo la hoja para usar la fuente ***Roboto***. * Le damos un ancho máximo de ***1200px*** al proyecto. * Centramos todo el contenido con ***margin: 0 auto***. \* { ` font-family: "Roboto"`, sans-serif; } `main` { ` max-width: 1200px`; ` margin: 0` auto; } Como te diste cuenta usaremos varias imágenes como parte de la página. Puedes descargar todas desde [este enlace](https://drive.google.com/drive/folders/1PR4d5rzgdQzdjT2cyWGz2DIWSlDMj27L). Genial, ¡ahora estamos listos para empezar a crear los contenedores!

Jessica Silvia Payano Castro

screencapture-127-0-0-1-5500-index-html-2023-04-25-18_27_21.png

Raymondi Alejandro Ramos Vásquez

→ Ver dónde irán las grillas
→ Empezar desde las celdas

pablins6101

En los recursos de la clase encontrarás el link para descargar las imágenes que se usarán. De igual manera a continuación comparto el enlace: drive

Rafael Soriano Ramírez

Nunca he armado componentes con grillas, sólo con flexbox, cambia un poco el paradigma, pero le veo más ventajas en responsive pensar en grid.

Luis Alberto Escobar Martinez

Les comparto el reto, lo he iniciado antes de ver los videos, como se ha comentado en el foro, afrontar estos retos nos ayudan a encontrar las mejoras formas para aprender. Nunca paremos de aprender.

Captura de pantalla 2022-12-02 a la(s) 20.48.10.png

Matias Arevalo

Pantalla:

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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <section>
            <div class="section-1">
                <div class="item-section-1">
                    <h1>Check The Best food</h1>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita incidunt veniam nostrum nihil voluptates similique ipsa voluptatibus inventore impedit ut, autem doloribus eum quam atque ab obcaecati magni dolores adipisci?</p>
                    <button>Ingresar</button>
                </div>
                <div class="item-section-1">
                    <img src="./hero.png" alt="food">
                </div>
            </div>
        </section>
        <section>
            <div class="title-2">
                <h2>OUR SERVICES</h2>
            </div>
            <div class="section-2">
                <div class="item-section-2 item-1"></div>
                <div class="item-section-2 item-2"></div>
                <div class="item-section-2 item-3"></div>
                <div class="item-section-2 item-4"></div>
                <div class="item-section-2 item-5"></div>
            </div>
        </section>
        <section>
            <div class="title-2">
                <h2>Home Menú</h2>
            </div>
            <div class="section-3">
                <div class="item-section-3 item-6"></div>
                <div class="item-section-3 item-7"></div>
                <div class="item-section-3 item-8"></div>
                <div class="item-section-3 item-9"></div>
                <div class="item-section-3 item-0"></div>
            </div>
        </section>
    </main>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    color: #333;
}

button{
    border: 1px solid #82CD47;
    border-radius: 5px;
    color: #82CD47;
    font-size: 25px;
    font-weight: bold;
    padding: 5px 24px;
    background-color: white;
}

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

.section-1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
    justify-content: center;
    align-items: center;
}

.item-section-1{
    padding: 0 20px;
    
}

.item-section-1 h1{
    font-size: 42px;
    margin: 15px 0;
    color: #82CD47;
}

.item-section-1 p{
    font-size: 16px;
    margin-bottom: 15px;
}

.item-section-1 img{
    width: 100%;
}

.title-2{
    text-align: center;
    margin: 50px 0;
}

.title-2 h2{
    font-size: 32px;
}

.section-2{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "img-principal img-principal img-secundaria img-terciaria"
    "img-principal img-principal img-cuarta img-quinta";
    gap: 5px;
}
.item-section-2{
    min-height: 200px;
}

.item-1{
    background-image: url(./video.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    grid-area: img-principal;
}
.item-2{
    background-image: url(./dish2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    grid-area: img-secundaria;
}
.item-3{
    background-image: url(./dish3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    grid-area: img-terciaria;
}
.item-4{
    background-image: url(./dish4.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    grid-area: img-cuarta;
}
.item-5{
    background-image: url(./dish1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    grid-area: img-quinta;
}

.section-3 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-bottom: 25px;
}

.item-section-3{
    min-height: 150px;
}

.item-6{
    background-image: url(./plate1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    
}
.item-7{
    background-image: url(./plate2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
   
}
.item-8{
    background-image: url(./plate3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    
}
.item-9{
    background-image: url(./plate5.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    
}
.item-0{
    background-image: url(./plate4.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
   
}

Brayan Cristancho

Intenté hacer el proyecto primero y este es mi resultado.

Agu Damonte

Va queriendo:

Me faltan un par de estilos, como el borde inferior del hero, para que llegue a los bordes laterales.

Diego Fernando Mera Largo

Bueno, como quizas la mayoria aqui, me le medi a hacerlo antes de ver las clases xD. no quedo tan mal, pero obvio se puede mejorar resto. aun asi, fue divertido :3

Henry Alexander Velásquez Rosas

Mobile First

Me quedó así… 😃

<!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: Check the best Food</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <section class="header__container">
            <h1 class="header__title">Check The Best Food</h1>
            <p class="header__description">Lorem ipsum dolor sit amet adipisicing elit. Cupiditate itaque necessitatibus minima qui temporibus quas.</p>
            <button><a href="#">See more details</a></button>
        </section>
        <section class="header__img">
            
        </section>
    </header>
    <main class="main__container">
        <section class="main__title">
            <h2>OUR SERVICES</h2>
        </section>
        <section class="main__img1"></section>
        <section class="main__img2"></section>
        <section class="main__img3"></section>
        <section class="main__img4"></section>
        <section class="main__img5"></section>
    </main>
    <footer class="footer__container">
        <section class="footer__title">
            <h2>Home Menu</h2>
        </section>
        <section class="footer__img1"></section>
        <section class="footer__img2"></section>
        <section class="footer__img3"></section>
        <section class="footer__img4"></section>
        <section class="footer__img5"></section>
    </footer>
</body>
</html>

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

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

header {
    display: grid;
    grid-template-columns: repeat(2, 160px);
    grid-template-rows: repeat(1, 160px);
    place-content: center;
    place-items: center;

    margin: 20px;
}

header .header__container .header__title {
    margin-bottom: 10px;
    font-size: 2.2rem;

    color: darkslateblue;
}

header .header__container .header__description {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

header .header__container button {
    width: 80px;
    height: 35px;

    background-color: orangered;
    border-radius: 15px;
}

.header__container button a {
    text-decoration: none;
    color: darkslateblue;
}

header .header__img {
    width: 160px;
    height: 160px;
    background-image: url('https://i.postimg.cc/QCrLX0Cn/8-hero.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

main {
    display: grid;
    grid-template-columns: repeat(4, 80px);
    grid-template-rows: repeat(3, 80px);

    place-content: center;
    margin-bottom: 20px;

    gap: 10px;
}

.main__container .main__title {
    grid-column-start: 1;
    grid-column-end: 5;
    place-self: center;

    height: 20px;
}

.main__container .main__img1 {
    grid-area: 2 / 1 / 4 / 3;
    width: 160px;
    height: 170px;
    background-image: url('https://i.postimg.cc/7Pg8B8Qv/8-video.png');
    background-position: start;
    background-repeat: no-repeat;
    background-size: contain;

    justify-content: flex-start;
}

.main__container .main__img2 {
    width: 80px;
    height: 80px;
    background-image: url('https://i.postimg.cc/Gm3C87QW/8-dish1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.main__container .main__img3 {
    width: 80px;
    height: 80px;
    background-image: url('https://i.postimg.cc/nhdtv4SC/8-dish2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.main__container .main__img4 {
    width: 80px;
    height: 80px;
    background-image: url('https://i.postimg.cc/DyTFFyby/8-dish3.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.main__container .main__img5 {
    width: 80px;
    height: 80px;
    background-image: url('https://i.postimg.cc/QxJDMGpg/8-dish4.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

footer {
    display: grid;
    grid-template-columns: repeat(5, 64px);
    grid-template-rows: repeat(2, 53px);

    place-content: center;
    place-items: center;
    margin-bottom: 20px;
}

footer .footer__title {
    grid-column-start: 1;
    grid-column-end: 6;
}

footer .footer__img1 {
    width: 64px;
    height: 54px;
    background-image: url('https://i.postimg.cc/vTRy4Gqh/8-plate1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .footer__img2 {
    width: 64px;
    height: 53px;
    background-image: url('https://i.postimg.cc/rsSkW77k/8-plate2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .footer__img3 {
    width: 64px;
    height: 53px;
    background-image: url('https://i.postimg.cc/3rp7PDNc/8-plate3.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .footer__img4 {
    width: 64px;
    height: 53px;
    background-image: url('https://i.postimg.cc/N05vbKZb/8-plate4.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .footer__img5 {
    width: 64px;
    height: 53px;
    background-image: url('https://i.postimg.cc/xdhDZ02Q/8-plate5.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Orlando Rodriguez

Asumi el reto de terminar el proyecto antes, ahora si vere como lo hace la profe y ver si puede optimizar o mejorar mi codigo.
Les recomiendo siempre hacerlo de esta manera, pienso que se aprende mas.

andres gonzalez

Acá esta mi versión para tablets antes de ver como lo desarrolla la profe.

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">
    <link rel="stylesheet" href="./style.css">
    <title>BestFood</title>
</head>
<body>
   <header>
        <div class="header item">
            <div class="header__content">
                <h1>Check the <br> best food<br></h1>
                <p>Lorem ipsum dolor sit amet fd fdsjkb adipisicing elit. Magni vero, dolorsvsf  jncjdcbdjhid ancja shcusnamorb.</p>
                <button class="button">See More</button> 
            </div>
        </div>
        <div class="header__picture item"> </div>
   </header>
   <div class="Main__title">
    <p>OUR SERVICES</p>
   </div>
   <main>
    <div class="main__container">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
        <div class="item-4"></div>
        <div class="item-5"></div>
    </div>
   </main>
   <div class="footer__title">
    <p>Home Menu</p>
   </div>
   <footer>
        <div class="footer__container">
         <div class="item--1"></div>
         <div class="item--2"></div>
         <div class="item--3"></div>
         <div class="item--4"></div>
         <div class="item--5"></div>
        </div>
   </footer>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    display: grid;
    grid-template-columns: 410px 410px;
    grid-template-rows: repeat(1, auto);
    
}
    

.header__picture {
  background-image: url("https://i.postimg.cc/zD21m9fG/hero.png");
  width: 400px;
  height: 410px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: cover;
}
.header__content {
    display: grid;
    align-content: center;
    height: 400px;
    margin-right: 40px;
    margin-left: 50px;
}
.button {
    margin-top: 14px;
    width: 132px;
    height: 30px;
    color: white;
    border-radius: 10px;
    background-color: #F7931A;
    border: none;
}
header .header__content h1 {
    font-weight: bold;
    font-size: 50px;
}
.header__content p {
    font-size: 16px;
    margin-top: 16px;
}

.Main__title {
    font-size: 26px;
    color: rgb(165, 163, 170);
    margin-top: 24px;
    margin-bottom: 24px;
    text-align: center;
}
.main__container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, 200px);
    gap: 18px;
}


.item-1 {
    grid-area: 1 / 1 / 3 / 3;
    background-image: url("https://i.postimg.cc/k5qHRc5H/video.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}
.item-2 {
    background-image: url("https://i.postimg.cc/qR0pRyfB/dish1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}
.item-3 {
    background-image: url("https://i.postimg.cc/Wp5sNd5j/dish2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}
.item-4 {
    background-image: url("https://i.postimg.cc/hPwgmHF5/dish3.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}
.item-5 {
    background-image: url("https://i.postimg.cc/MG08hHnC/dish4.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}


.footer__title {
    font-size: 26px;
    color: rgb(165, 163, 170);
    margin-top: 24px;
    margin-bottom: 24px;
    text-align: center;
}
.footer__container {
    display: grid;
    grid-template-columns: repeat(5, 140px);
    grid-template-rows: repeat(1, 140px);
    gap: 18px;
}
.item--1 {
    background-image: url("https://i.postimg.cc/15g1yJgc/plate1.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}
.item--2 {
    background-image: url("https://i.postimg.cc/cH1P2my3/plate2.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}
.item--2 {
    background-image: url("https://i.postimg.cc/cH1P2my3/plate2.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}
.item--3 {
    background-image: url("https://i.postimg.cc/Fsk8MzqT/plate4.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}
.item--4 {
    background-image: url("https://i.postimg.cc/rs3bd2dG/plate3.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}
.item--5 {
    background-image: url("https://i.postimg.cc/rw63Mc2M/plate5.png");
    border-top-left-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    background-color: rgb(252, 235, 235);
}

Jonathan David Olivos

Intenté hacerlo antes de ver las otras clases y este fue el resultado 😄
https://papitapapita.github.io/grid_exercises/

LlyTware

Emocionado con el Proyecto

Ali Hilario

Se ve épico el proyecto!

Jhoana España Urresty

Genial, manos a la obra