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

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

Cursos Empresas Blog Live Conf Eventos Precios

0:002:56

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

Curso de CSS Grid Básico

Clase 8 de 13

Clase 8 / 13

Recursos

Humberto Delgado

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%;
            }
        }
    }
}

Comentarios (43)43 comentarios

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 2 meses

Cristian Acevedo

Hace 6 meses

Diego Edilberto Novoa Cortes

Hace 9 meses

Gueyli Yanalith Velásquez López

Hace un año

Introducción a Grid

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

Conceptos básicos de CSS Grid Layout

Propiedades de Grid

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

Propiedades de Alineación en CSS Grid

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

Power ups de Grid

Funciones avanzadas de CSS Grid: minmax y repeat

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

Proyecto

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

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

Maquetación de Grillas y Estilos CSS en Proyectos Web

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

Bonus

Creación de Diseños Responsivos con CSS Grid

Próximos pasos

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

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

Progreso del curso

Introducción a Grid

Propiedades de Grid

Power ups de Grid

Proyecto

Bonus

Próximos pasos

Recursos

Recursos