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

Curso de CSS Grid Básico

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
09:21 min

Próximos pasos

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

Tomar examen

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

Resumen

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.

Humberto Delgado

Estudiante

Hace 3 años

desktop:

mobile:

HTML:

<!DOCTYPE html>
<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,GRAD@20..48,100..700,0..1,-50..200" />
    <title>Curso de CSS Grid Básico</title>
</head>
<body>
    <header></header>
    <main>
        <section class="cards">
            <h2  class="cards__title">Reto de propiedades de contenedor</h3>
            <section  class="cards__container">
                <article class="cards__item">
                    <p>1</p>
                </article>
                <article class="cards__item">
                    <p>2</p>
                </article>
                <article class="cards__item">
                    <p>3</p>
                </article>
                <article class="cards__item">
                    <p>4</p>
                </article>
                <article class="cards__item">
                    <p>5</p>
                </article>
                <article class="cards__item">
                    <p>6</p>
                </article>
            </section>
        </section>
        <section class="cards">
            <h2 class="cards__title">Propiedades de ubicacion</h3>
            <section class="cards__images">
                <img src="https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&w=400" alt="" class="cards__images--item  picture1">
                <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&w=400" alt="" class="cards__images--item picture2">
                <img src="https://images.pexels.com/photos/1870376/pexels-photo-1870376.jpeg?auto=compress&cs=tinysrgb&w=400" alt="" class="cards__images--item picture3">
                <img src="https://images.pexels.com/photos/1444321/pexels-photo-1444321.jpeg?auto=compress&cs=tinysrgb&w=400" alt="" class="cards__images--item picture4">
                <img src="https://images.pexels.com/photos/290164/pexels-photo-290164.jpeg?auto=compress&cs=tinysrgb&w=400" alt="" class="cards__images--item picture5">
                <img src="https://images.pexels.com/photos/2071873/pexels-photo-2071873.jpeg?auto=compress&cs=tinysrgb&w=400" alt="" class="cards__images--item  picture6">
                <img src="https://images.pexels.com/photos/1643457/pexels-photo-1643457.jpeg?auto=compress&cs=tinysrgb&w=400" alt="" class="cards__images--item picture7">
            </section>
        </section>
        <section class="introduccion">
            <article class="introduccion__info">
                <h2>Check the Best Food</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus non odio, commodi sint sit eligendi!</p>
                <button>Buy a sale<span class="material-symbols-outlined">arrow_right_alt</span></button>
                <ul>
                    <img src="./assets/icons/facebook.png" alt="">
                    <img src="./assets/icons/instagram.png" alt="">
                    <img src="./assets/icons/tik-tok.png" alt="">
                </ul>
            </article>
            <picture class="introduccion__image">
                <img src="./assets/images/hero.png" alt="">
            </picture>
        </section>
        <section class="our-service">
            <h3>Our service</h3>
            <section class="our-service__images">
                <img class="picture1" src="./assets/images/video.png" alt="">
                <img class="picture2" src="./assets/images/dish1.png" alt="">
                <img class="picture3" src="./assets/images/dish2.png" alt="">
                <img class="picture4" src="./assets/images/dish3.png" alt="">
                <img class="picture5" src="./assets/images/dish4.png" alt="">
            </section>
        </section>
        <section class="home-menu">
            <h3>Home menu</h3>
            <section class="home-menu__images">
                <picture>
                    <span class="material-symbols-outlined">favorite</span>
                    <img src="./assets/images/plate1.png" alt="">
                </picture>
                <picture>
                    <span class="material-symbols-outlined">favorite</span>
                    <img src="./assets/images/plate2.png" alt="">
                </picture>
                <picture>
                    <span class="material-symbols-outlined">favorite</span>
                    <img src="./assets/images/plate3.png" alt="">
                </picture>
                <picture>
                    <span class="material-symbols-outlined">favorite</span>
                    <img src="./assets/images/plate4.png" alt="">
                </picture>
                <picture>
                    <span class="material-symbols-outlined">favorite</span>
                    <img src="./assets/images/plate5.png" alt="">
                </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%;
            }
        }
    }
}

Darwing Steven Sánchez Londoño

Hace 5 años

César Palma

Rafael Martínez Rodríguez

Hace 4 años

Leal Brigitte

Guadalupe Monge Barale

Luis Miguel Aponte Rayo

Jerremi Aron Chancan Labajos

David Axel González Flores

Fabio Triana

Joel Dominguez Merino

Reinaldo Mendoza

Andrés Esteban Rodríguez Jiménez

Antonio Mora

José M. Veintimilla

Platzi Team

Paula Andrea Hayle

Remix Zapata

marco antonio

Raúl Adolfo Sánchez Rodríguez

Genaro Flores

Juan Camilo Salazar Rojas

Santiago Rodriguez Chaves

Kamilo Stevan Alomías Correa

Hace 9 días

Cristian Acevedo

Hace 4 meses

Diego Edilberto Novoa Cortes

Hace 7 meses

Gueyli Yanalith Velásquez López

Hace un año

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

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