91

CSS Grid Cheat Sheet: Contenedores (Parte 1)

8765Puntos

hace 2 meses

Curso Profesional de CSS Grid Layout
Curso Profesional de CSS Grid Layout

Curso Profesional de CSS Grid Layout

Aprende CSS Grid Layout para maquetar sitios web complejos sin complicaciones. Analiza tus diseños, divide tu aplicación en cuadrículas y conviértelas en estilos CSS. Integra CSS Grid con Flexbox y el modelo de caja para alinear tus elementos exactamente donde deben estar. Descifra todos los misterios de CSS Grid Layout para convertirte en frontend developer profesional con tu profesora Estefany Aguilar.

CSS Grid Layout es el sistema de diseño bidimensional más poderoso de CSS hasta hoy. Por eso queremos presentarte esta Cheat Sheet con las propiedades y conceptos de CSS Grid para que puedas construir tus propios sitios web.

CSS Grid Cheat Sheet

💡 Antes de empezar, te recomiendo tomar los siguientes cursos en Platzi para que puedas sumergirte en la terminología de CSS Grid:

CSS Grid tiene dos grupos de propiedades: para los elementos contenedores y para los elemenos hijos. En esta primera parte te explicaré las propiedades de los contenedores.

💡 Clase relacionada: Grid y las relaciones padre e hijos inmediatos + Quíz

Propiedad display

La propiedad display define al elemento como un contenedor de cuadrícula y establece un nuevo contexto de formato de cuadrícula para su contenido.

💡 Clase relacionada: Creando nuestro contenedor: ¿display: grid o display: inline-grid?

Display Grid

Propiedades: grid-template-columns, grid-template-rows, grid-template-areas y grid-template

La propiedad grid-template-columns define las columnas y grid-template-rows las filas de la cuadrícula. La propiedad grid-template-areas define una plantilla de cuadrícula haciendo referencia a los nombres de las áreas de cuadrícula que se especifican con la propiedad grid-area de los elementos hijos. La propiedad grid-template es una abreviatura para establecer grid-template-columns y grid-template-rows en una sola declaración.

💡 Clase relacionada: Creando filas, columnas y espaciado + Reto

CSS Grid Cheat Sheet

Propiedades: grid-column-gap, grid-row-gap y grid-gap

La propiedad grid-column-gap (o column-gap) define el espacio entre columnas y la propiedad grid-row-gap (o row-gap) define el espacio entre filas. La propiedad grid-gap (o gap) define el espacio entre filas y columnas.

💡 Clase relacionada: Creando filas, columnas y espaciado + Reto

CSS Grid

Propiedad justify-items

La propiedad justify-items alinea los elementos de la cuadrícula a lo largo del eje inline (eso es horizontal en nuestro caso).

💡 Clase relacionada: Alineamiento en el elemento contenedor + Quiz

CSS Grid justify-items

Propiedad align-items

La propiedad align-items alinea los elementos de la cuadrícula a lo largo del eje block (vertical en nuetro caso).

💡 Clase relacionada: Alineamiento en el elemento contenedor + Quiz

Propiedad place-items

La propiedad place-items alinea los elementos de la cuadrícula a lo largo del eje inline y block al mismo tiempo.

💡 Clase relacionada: Alineamiento en el elemento contenedor + Quiz

CSS Grid Layout

Propiedad justify-content

La propiedad justify-content alinea el contenido de la cuadrícula a lo largo del eje inline (horizontal en nuetro caso).

💡 Clase relacionada: Alineamiento en el elemento contenedor + Quiz

CSS Grid

Propiedad align-content

La propiedad align-content alinea el contenido de la cuadrícula a lo largo del eje block (vertical en nuetro caso).

💡 Clase relacionada: Alineamiento en el elemento contenedor + Quiz

CSS Grid Cheat Sheet

Propiedad place-content

La propiedad place-content alinea el contenido de la cuadrícula a lo largo del eje inline y block al mismo tiempo.

💡 Clase relacionada: Alineamiento en el elemento contenedor + Quiz

CSS Grid Place Content

Propiedades: grid-auto-columns y grid-auto-rows

La propiedad grid-auto-columns y grid-auto-rows especifican el tamaño de las columnas o filas (respectivamente) de cuadrícula generadas automáticamente. Es decir, no hay que definirle una cantidad de filas o columas estrictamente, le podemos decir que vaya creando filas y columnas del tamaño que se le estableció a medida de que se vaya necesitando.

💡 Clase relacionada: Generación automática de tracks + Quíz

CSS Grid

Propiedad grid-auto-flow con valores row y column;

La propiedad grid-auto-flow coloca automáticamente los elementos que no se han colocado de forma explícita.

CSS Grid auto flow

Propiedades basadas en A Complete Guide to Grid de CSS Tricks.

¡Ya conoces las propiedades que hacen parte de los elementos contenedores! Ahora es el turno de las propiedades de los elemenos hijos. Comparte este blogpost con tus familiares y conocidos si te gustaría que publiquemos la siguiente parte de este cheat sheet. 😊

Recuerda que puedes aprender desarrollo web profesional (tanto frontend como backend) en la Escuela de Desarrollo Web de Platzi. 😉

#NuncaParesDeAprender

Curso Profesional de CSS Grid Layout
Curso Profesional de CSS Grid Layout

Curso Profesional de CSS Grid Layout

Aprende CSS Grid Layout para maquetar sitios web complejos sin complicaciones. Analiza tus diseños, divide tu aplicación en cuadrículas y conviértelas en estilos CSS. Integra CSS Grid con Flexbox y el modelo de caja para alinear tus elementos exactamente donde deben estar. Descifra todos los misterios de CSS Grid Layout para convertirte en frontend developer profesional con tu profesora Estefany Aguilar.
Estefany
Estefany
teffcode

8765Puntos

hace 2 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
382Puntos

Wow increíble muchas gracias Estefany

1
8765Puntos
2 meses

Con mucho gustooo 🥳

3

Muchas gracias!! Me hiciste mejor en CSS. Te lo agradezco Platzi, y señorita Estefany.

1
8765Puntos
2 meses

Awww 🥺 La mejor noticia de la vida !!! 💚

3

😎 Información muy pero muy útil. Muchas gracias!!!

1
8765Puntos
2 meses

Wiii, con gusto !!! 💚

3
6705Puntos

Esta muy bueno este articulo, gracias por compartirlo con nosotros!

1
8765Puntos
2 meses

A tiii, gracias por leerlo !!! 💚

3
11709Puntos

Cuando aprendes a usar flexbox y css grid

fusión.png
1
8765Puntos
2 meses

Hahah sí ! Fuuuuuusión 👉🏼✨👈🏼 hahaha

3
4690Puntos

Esto vale oro 👌

1
8765Puntos
2 meses

🥰🥰🥰 Lo hacemos con todo el amor !

3
13254Puntos

Buena información, gracias

1
8765Puntos
2 meses

Con todo gusto !!! 💚

3
18493Puntos

Lo que mas me gusta de todo lo que hace Estefany es el como siempre te das cuenta que es su trabajo por los colores :3

1
8765Puntos
2 meses

Hahahah 😅💚

3
30139Puntos

¡Qué buen post! Super completo además, lo bueno es que no hay aprenderse de memoria todas las propiedades, siempre se puede regresar a este post, va para favoritos 😄

1
8765Puntos
2 meses

Hahah así es, Sura !!! 💚

3
4885Puntos

Esto es flex-box pero en grid?

1
8765Puntos
2 meses

Algo así 😅

3
1855Puntos

Excelente material Estefany! Gracias por compartirlo!

1
8765Puntos
2 meses

Con todo gusto ! Gracias a tiii por leerlo 💚

3
8038Puntos

Excelente aporte, muchas gracias

1
8765Puntos
2 meses

Con todo gusto !!! 🥰

2
11070Puntos

Muchísimas gracias la verdad, aun me cuesta entender grid y sus propiedades y estas cosas ayudan bastante

1
8765Puntos
2 meses

Genial !!! 🥰

1
384Puntos

Muy Bueno, me gusto mucho, es un tema muy interesante