Creación de Grids en CSS para Diseños Creativos

Clase 22 de 28 • Curso Profesional de CSS Grid Layout

Resumen

¿Cómo crear tu primer proyecto utilizando CSS Grid?

Para los diseñadores y desarrolladores web, el uso de herramientas avanzadas es crucial al momento de dar vida a sus ideas. CSS Grid se ha convertido en una de las técnicas más poderosas para construir diseños web flexibles y eficientes. En esta guía, exploramos cómo comenzar un proyecto desde su fase inicial, utilizando CSS Grid para estructurar nuestras ideas.

¿Cómo planificar el diseño de tu proyecto?

Antes de lanzarse a escribir el código, es fundamental visualizar nuestro diseño. Un mood board es una herramienta esencial que ayuda a inspirarse y organizar conceptos visuales que podremos plasmar en el proyecto. Esto permite:

Esbozar ideas y organizar elementos visualmente.
Seleccionar colores y tipos de fuentes.
Capturar la esencia de la inspiración, en este caso un álbum musical.

¿Cómo configurar la estructura básica de tu Grid?

Para desarrollar la estructura del Grid desde cero en nuestro HTML y CSS, sigue los pasos a continuación:

Define el contenedor principal
Inicia con un div que servirá como contenedor de tu Grid. Asegúrate de tener referencias visuales claras para disponer columnas y filas correctamente.
Establece un Grid básico en el CSS
Utilizamos funciones como display: grid; y grid-template-columns o grid-template-rows para definir el esquema del Grid. Aquí muestra un ejemplo básico para un Grid de 10 x 10:
```
.contenedor {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
}
```
Agrega el estilo del body
Debes tener en cuenta detalles como el margen y la visualización de un gradiente de fondo, manejando tanto colores como altura relativa al viewport:
```
body {
  margin: 0;
  background: linear-gradient(to top, #purple, #pink);
  min-height: 100vh;
  font-family: 'Roboto', sans-serif;
}
```

¿Cómo mejorar la visualización en el navegador usando herramientas?

El inspector de elementos es esencial para verificar y ajustar el diseño de tu Page. Aquí algunos consejos:

Inspecciona el Grid: Aunque el Grid no sea visible a simple vista, el inspector puede mostrarte su disposición real.
Ajusta alturas y anchuras: Asegúrate de que las dimensiones definidas se correspondan con el área visible de la ventana del navegador, usando unidades relativas como vh.

Este enfoque modular de diseño no sólo facilita la organización del contenido visual, sino que te permite experimentar con la creatividad y funcionalidad al mismo tiempo. No te detengas aquí, sigue adelante en tu proceso de aprendizaje y mejora constante en el desarrollo web.

Juan Ignacio Portilla Kitroser

student•

Hola!! Con este curso y el definitivo de HTML y CSS (que lo recomiendo) hice para practicar un portfolio, obviamente me faltan proyectos para agregar, porque aun no tengo ninguno, y me faltan algunas funcionalidades que se las agregar con JS cuando lo aprenda. Les agradeceria que lo vean y me tiren algunas criticas constructivas o tips, aca les dejo el link, desde ya muchas gracias compañeros. Nunca paren de aprender

Jeffer Steven Nuñez Aragon

student•

Juan Ignacio Portilla Kitroser

student•

Hola! soy yo de vuelta, ese link ya no funciona, les dejo aqui el correcto. Nuevo Link Gracias por avisar que ya no funcionaba

Agustin Perez Santiago

student•

Hasta ahorita no a explicado el concepto de:

grid-area grid-column-start grid-column-end grid-row-start grid-row-end:

Me parece una falta de calidad a este curso casi en todo el curso hasta ahorita tuve que aprenderme por afuera, como funcionaba cada propiedad que conlleva el grid

Pesimo el curso.

Aliuska del Valle Carrero Carrasco

student•

total , youtube y google me han explicdo mucho mejor... no me gusta este curso le hace falta mas practica en codigo.

Ricardo Sanchez Cisneros

student•

pueden pasar sus recursos, me gustaría aprender mas

Christian Latorre

student•

este curso es perfecto, no tiene errores, se cuidaron los detalles, es bonito, estructurado, objetivo, y claro, y la profe genial

axel brigo

student•

yo opino todo lo contrario, no tiene detalles como por ejemplo cuando pone inspeccionar elemento no se ve cuando lo hace ya que solo comparte una pantalla, va muy rapido, se confunde en muchas cosas, es muy dificil de entender.

Christian Latorre

student•

uno cuando entra a esta carrera espera que enseñen cosas no que entreguen todo masticado, somos personas con mas intelecto que el normal, y estamos en constante aprendizaje, no podemos decir que no esta abriendo el inspector cuando ya sedeberia saber como se hace ese tipo de cosas

Albert K. Camargo Barreda

student•

Hay una versión de firefox que permite ver las grillas a detalle, se llama "Firefox Browser Developer Edition" es de mucha ayuda.

Ana Rotela Cabrera

student•

Buen aporte ✨

Cristian Vargas

student•

Chrome en las ultimas versiones tambien lo permite :)

Ivan Daniel Cuevas

student•

Este es el diseño que realice, vamos a ver como me va!💪🚀

Ana Rotela Cabrera

student•

Me encanta el diseño ✨

Rodrigo Rodriguez

student•

Lindo diseño !

Irving Juárez

student•

Yo pensé que las paginas con diseño Grid tenían que ser todo con grid (y puede que haya algunas que sean así), pero otras solo usan el grid para ciertas partes especificas de la pagina web. Por ejemplo esta pagina solo usa el grid para ciertas secciones. https://slack.com/intl/es-mx/

Nelson Gonzalez Escalante

student•

Ufff, excelente observación. De hecho, me gustó mucho esta perspectiva y voy a tratar de implementarla.

Gracias.

Rodrigo Rodriguez

student•

Cierto lo que dices, pero aun no soy un experto en grid, pero veo que para ciertas tareas, como definir un primer layout lo encuentro facil con grid, pero para definir algunos contenidos usaria flexbox.

Sebastian Heredia

student•

Fondo de background

background-image: linear-gradient(to top, #9996cb, #ab99cc, #bb9cdb, #caa1cc);

Paolo Joaquin Pinto Perez

student•

Nunca esta de más otro sitio de Gradient:

Rodrigo Rodriguez

student•

Thanks!

Jose Luis Barbosa Cepeda

student•

Yo tomare este diseño que intente hacer sobre converse :D, le dije a mi novia que me dijera algo random para practicar html y css y lo primero que dijo fue converse jaja asi que de eso creo que seria bien intentar hacerlo con grid y evitarme algunos problemas que me estaba provocando, es un diseño sencillo pero soy nuevo en esto xd

Rodrigo Rodriguez

student•

Esta bueno tu diseño,

Rouseld Bayardo Castilblanco Gonzalez

student•

Asi quedo mi diseño ya plasmado en codigo

Aqui abajo dejo el codigo utilizado

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" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://use.typekit.net/qjf0hqw.css">
    <link rel="stylesheet" href="https://use.typekit.net/qjf0hqw.css">
    <title>Document</title>
</head>
<body>
    <section class="principal__section">
        <div class="principal__section__menu">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Artists</li>
                <li>Contact Us</li>
            </ul>
        </div>
        <div class="principal__section__content">
            <h3>BEST</h3>
            <div class="principal__section__content--title2container">
                <img src="./Trazado 5.png" alt=""><h2 class="principal__section__content--title2">RAP</h3>
            </div>
            <h3>ARTISTS</h3>
            <div class="principal__section__content--textcontainer">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been .</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been .</p>
            </div>
        </div>
        <div class="principal__section__img">
            <figure>
                <img class="principal__section__img--img" src="./Tyler.png" alt="">
            </figure>
        </div>
    </section>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}


:root{
    --primarycolor: #E2294F;
    --secondarycolor: white;
    --bgcolor: #26124A;
    --principalfont: 'Cy', sans-serif;
    --secondaryfont: 'scandia-line-web', sans-serif;
    --fontS: 1.4rem;
    --fontM: 2.0rem;
    --fontL: 2.4rem;
    --fontXL: 9.0rem;
}

html{
    font-size: 62.5%;
    background-image: url(./BGIMG.png);
    background-blend-mode: multiply;
    background-color: var(--bgcolor);
}

.principal__section{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas: 
    "navbar content img"
    "navbar content img"
    "navbar content img"
    "navbar content img"
    "navbar content img";
    height: 100vh;
    width: 100vw;
    align-items: center;
    overflow: hidden;
}

.principal__section__menu{
    grid-area: navbar;
    color:var(--primarycolor);
    font-family: var(--principalfont);
    font-size: var(--fontL);
    transform: rotate(270deg);
    width: 315px;
}

.principal__section__menu ul{
    display: flex;
    width: 446px;
    gap: 37px;
    list-style: none;
    cursor: pointer;
    margin-top: -70px;
}

.principal__section__content{
    grid-area: content;
}

.principal__section__content h2{
    font-family: var(--principalfont);
    font-size: var(--fontXL);
    font-weight: 500;
    color: var(--primarycolor);
}

.principal__section__content--title2{
    color: var(--secondarycolor) !important;
}

.principal__section__content--title2container{
    display:flex
}

.principal__section__content--textcontainer{
    display:flex;
    flex-direction: row;
    gap: 20px;
    color: var(--secondarycolor);
    font-family: var(--secondaryfont);
    font-size: var(--fontS);
    font-weight: 100;
    width: 100%;
    padding-top: 120px;
}

.principal__section__content--textcontainer p{
    border-top: var(--primarycolor) solid 2px;
    padding-top: 15px;
}

.principal__section__img{
    grid-area: img;
}

Yoshirys de Jesús Salas Corona

student•

Este fue mi diseño, sobre las 7 maravillas del mundo, y usando algo un hover sencillo para mostrar el texto de el nombre y lugar.

Patricio Manuel Ugarte

student•

Mi bosquejo:

Así me quedó la grilla principal:

Comparto el ejemplo en CodePen por si a alguien le sirve:

Marco Espinosa López

student•

Les quiero compartir un video, donde explica de manera muy clara, como podemos utilizar el “grid-template-areas” y hacerlo RESPOSIVE, de manera muy sencilla: https://youtu.be/T4t00Hd3qZc

Aldahir Zamora

student•

Épico💥

Giovanni Salas Hernández

student•

Mi proyecto

Rodrigo Rodriguez

student•

Nice!

Josué Ramírez Ramírez

student•

grand masters del ajedrez. Grandes mentes

Alvaro Joel Ticona Motta

student•

Holaa, en la parte de agregar la fuente en nuestro proyecto Diego en el curso definitivo de HTML y CSS dice que no es buena practica usar el import en el css porque pega el performance, es una mejor práctica usar la etiqueta link en el header del html

John Steven Bernal Gonzalez

student•

Es verdad, pero para este tipo de cosas no es muy necesario, se usa mas que todo para proyectos reales.

Rodrigo Rodriguez

student•

Cierto, seria muy bueno tener una forma exacta de verificar cuanto es la perdida de performance real ,entre hacer el import en el css y traer el css en el head con link.

Supongo que para eso tendriamos que saber algo sobre optimizacion y como usar el inspector de red y todas esas cositas.

Javier Marin

student•

Bueno, vengo a aportarles mi partecita de como resolví el proyecto (a nivel teórico, la solución la deben encontrar ustedes jiji).

Realmente me costó al principio abstraer todo a un grid pero con un programa de diseño pude armarme rápido una grid precisa y seccionar todo con cuadrados:

Una vez que logras imaginarte el grid y vas posicionando todo en celdas, dejando de pensar tanto en el contenido sino en el espacio que ocupan, ya estás.

Ahora bien, el siguiente paso es la abstracción en el código. A mi me sirvió mucho imaginar el trabajo en algo así como capas o también como pasos. Obviamente el primer paso es definir el grid inicial, pero luego necesitas visualizarlo y con las herramientas de desarrollador es bastante simple.

Paso 1, pensar en simples bloques y como ubicarlos, da igual el contenido:

Necesitas ver donde van a estar las cosas, como se solapan.

Paso 2. Pensar en contenido, pero no en posicionamiento o estética.

Necesitas ver que irá en cada lugar, no como irá.

Paso 3. Empieza a posicionar cada elemento en lo que crees que será su aspecto final. También es momento de quitar las capas de bloques

Ahora si, empieza a experimentar y a visualizar el resultado final.

Paso 5. Presenta la propuesta, observala, vuelve atrás si necesitas.

Resultado:

Fredy Daniel Flores Lemus

student•

Que tal compañeros, ustedes recomiendan usar CSS Grid para darle estilo a toda la página, o más bien usarlo solo en algunos elementos de la misma? (cómo tarjetas por ejemplo)

Luis Lira

student•

Solo donde sea necesario, en algunos casos con usar flexbox o en ocasiones ni flexbox es necesario para conseguir el resultado que buscas.

Fernando Quinteros Gutierrez

student•

👋 Saludos, Fredy

Mi pequeño granito de arena seria que una vez que concluyas el curso de CSS Grid continúes con el Curso de Diseño Web con CSS Grid y Flexbox Donde se ve este tema, pero en resumen se sugiere

Usar CSS Grid para cosas a gran escala (como ser un layout principal)
Usar CSS Flexbox para cosas a pequeña escala (como ser alineamiento dentro de cards)

Pero de igual forma se menciona que no importa si usas Grid en cosas de pequeña escala o Flexbox en cosas de grande escala, ambas soluciones son correctas

Espero haberte ayudado Fredy 😉

💚 Nunca pares de aprender 🤟

Deyvis Neyser Valdez Gavilan

student•

Hola, les comparto la grid principal del proyecto: . resultado:

. . Código:

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

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

        :root {
            --blue: #81ccf1;
            --yellow: #efc66a;
            --pink: #d8a6cb;
            --dark-pink: #c59ece;
            --purple: #9996cb;
            --magenta: #f665b1;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-image: linear-gradient(to top, #9996cb, #ab99cc, #bb9dcd, #caa1cc, #d8a6cb);
            margin: 0;
            height: 100vh;
        }

        .container {
            display: grid;
            grid-template: repeat(10, 1fr) / repeat(10, 1fr);
            height: 100vh;
        }

        .yellow {
            grid-column: 1 / 2;
            grid-row: 5 / 7;
            background-color: var(--yellow);
        }

        .yellow2 {
            grid-row-start: 9;
            grid-row-end: 10;
            background-color: var(--yellow);
        }

        .blue {
            grid-column-start: 1;
            grid-column-end: 4;
            grid-row-start: 7;
            grid-row-end: 9;
            background-color: var(--blue);
        }

        .magenta {
            grid-column: 3 / 4;
            grid-row: 3 / 4;
            background-color: var(--magenta);
            position: relative;
        }

        .magenta p {
            position: absolute;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: 30px;
            margin: 0;
            bottom: 50px;
            right: 0;
        }


        .magenta2 {
            grid-column: 5 / 8;
            grid-row: 6 / 11;
            background-color: var(--magenta);
            position: relative;
        }

        .magenta2 p {
            position: absolute;
            margin-top: 0;
            bottom: 0;
            font-size: 40px;
            font-weight: bold;
        }

        .magenta-border {
            grid-column: 6 / 9;
            grid-row: 5 / 8;
            border: 6px solid var(--magenta);
        }

        .magenta-border2 {
            grid-column: 7 / 10;
            grid-row: 3 / 9;
            border: 6px solid var(--magenta);
            position: relative;
        }

        .magenta-border2 p {
            position: absolute;
            font-size: 60px;
            margin: 0;
            top: 50px;
            left: -89px;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="yellow"></div>
        <div class="yellow2"></div>
        <div class="blue"></div>
        <div class="magenta">
            <p>Deyvisnvg</p>
        </div>
        <div class="magenta2">
            <p>@Deyvisnvg</p>
        </div>
        <div class="magenta-border"></div>
        <div class="magenta-border2">
            <p>CSS GRID</p>
        </div>
    </div>
</body>

</html>

JUAN CAMILO CAMPO TANGARIFE

student•

Este es el diseño que realicé... ahora va a ser un verdadero reto realizar este proyecto.

Recursos

Jeremy Medina

student•

Ahora solo queda pasarlo a Código! https://www.notion.so/Grid-Layout-Proyecto-40df7551a3824a70b03feda795d62c8d

Creación de Grids en CSS para Diseños Creativos

Lleva tus conocimientos de CSS a otro nivel

CSS Grid: Fundamentos y Prácticas Esenciales

¿De dónde venimos y en dónde estamos?

Historia y evolución del CSS: De CHSS a la primera versión estándar

Limitaciones y Evolución de CSS en el Diseño Web

Herramientas Esenciales para el Desarrollo Web Eficiente

¿Cómo se llegó al concepto de CSS Grid?

Historia y evolución de CSS Grid: del concepto a la realidad

CSS Grid: Revolución del Diseño Web

Control de alineamiento

Alineación de Elementos con Margin y Line Height en CSS

Técnicas de Alineamiento CSS: Table Cell y Positions

Alineación de Elementos con CSS y Modos de Escritura

Modos de Escritura y Alineación en CSS: Flexbox y CSS Grid

Propiedades lógicas en CSS: uso y aplicación práctica

Técnicas de Alineamiento con Flexbox en CSS

Dibujos Creativos con CSS: Técnicas y Desafíos

Conceptos generales para comenzar a trabajar con CSS Grid

Conceptos Fundamentales de CSS Grid: Relaciones Padre-Hijo

Fundamentos de CSS Grid: Líneas, Tracks, Celdas y Áreas

Inspiración y Diseño Creativo con CSS Grid

Propiedades y valores para el elemento padre

Comprender Display Grid e Inline Grid en CSS

Creación y Optimización de Grids en CSS

Alineación de Elementos con CSS Grid

Generación Automática de Tracks en CSS Grid

Uso avanzado de CSS Grid para diseño responsivo

Propiedades y valores para los elementos hijos