35

CSS Grid Cheat Sheet: Items (Parte 2)

8765Puntos

hace 2 meses

Curso de Diseño Web con CSS Grid y Flexbox
Curso de Diseño Web con CSS Grid y Flexbox

Curso de Diseño Web con CSS Grid y Flexbox

Domina Flexbox y CSS Grid para construir diseños web de nivel superior. Familiarízate con los términos, herramientas, flujos de trabajo y tendencias de diseño más importantes del desarrollo frontend profesional. Obtén el poder de crear layouts o sistemas de diseño estables y escalables para cualquier proyecto. Aprende a trabajar con el CSS del presente y futuro junto a tu profesora Estefany Aguilar.

Esta es la segunda parte del CSS Grid Cheat Sheet. Aquí encontrarás los conceptos, propiedades y su respectivo código para construir sitios web usando CSS Grid.

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 (que estudiamos en la primera parte) y para los elementos hijos. En esta primera parte hablaremos de las propiedades de los elementos hijos (ítems).

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

Propiedades grid-column-start, grid-column-end y grid-column

La propiedad grid-column-start define a línea de la grid (en este caso es de izquierda a derecha) en la que debe comenzar a ubicarse el elemento en cuestión. La propiedad grid-column-start define a línea de la grid en la que debe terminar a ubicarse el elemento. La propiedad grid-column define el valor de las líneas de la grid en la que debe comenzar y terminar la ubicación del elemento.

💡 Clase relacionada: Ubicación + Reto

CSS Grid Cheat Sheet

Propiedades grid-row-start, grid-row-end y grid-row

La propiedad grid-row-start define a línea de la grid (en este caso de arriba hacia abajo) en la que debe comenzar a ubicarse el elemento. La propiedad grid-row-end define a línea de la grid en la que debe terminar de ubicarse. La propiedad grid-row define el valor de las líneas de la grid en la que debe comenzar y terminar la ubicación del elemento.

💡 Clase relacionada: Ubicación + Reto

CSS Grid Cheat Sheet

Propiedad grid-area

La propiedad grid-area define el área en la que debe ubicarse nuestro elemento dependiendo del template creado en el elemento contenedor.

💡 Clase relacionada: Ubicación + Reto

CSS Grid Cheat Sheet

Propiedad justify-self

La propiedad justify-self alinea el elemento de la grid a lo largo del eje inline (horizontal en nuestro caso).

💡 Clase relacionada #1: Alineamiento en los elementos hijos + Quiz
💡 Clase relacionada #2: ¡Manos al código! Fase de ubicación y alineamiento
💡 Clase relacionada #3: Continuando con la fase de ubicación y alineamiento

CSS Grid Cheat Sheet

Propiedad align-self

La propiedad align-self alinea el elemento de la grid a lo largo del eje block (vertical en nuestro caso).

💡 Clase relacionada #1: Alineamiento en los elementos hijos + Quiz
💡 Clase relacionada #2: ¡Manos al código! Fase de ubicación y alineamiento
💡 Clase relacionada #3: Continuando con la fase de ubicación y alineamiento

CSS Grid Cheat Sheet

Propiedad place-self

La propiedad place-self alinea el elemento de la grid a lo largo del eje inline y block al mismo tiempo.

💡 Clase relacionada: Alineamiento en los elementos hijos + Quiz

CSS Grid Cheat Sheet

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


¡Ya conoces las propiedades que hacen parte de los elementos hijos! Y además tienes una guía visual para que puedas construir sitios web mucho más fácil. Me encantaría leer en los comentarios qué más te gustaría aprender sobre CSS y desarrollo frontend en general.

¡Nunca pares de aprender! 😊💚

Curso de Diseño Web con CSS Grid y Flexbox
Curso de Diseño Web con CSS Grid y Flexbox

Curso de Diseño Web con CSS Grid y Flexbox

Domina Flexbox y CSS Grid para construir diseños web de nivel superior. Familiarízate con los términos, herramientas, flujos de trabajo y tendencias de diseño más importantes del desarrollo frontend profesional. Obtén el poder de crear layouts o sistemas de diseño estables y escalables para cualquier proyecto. Aprende a trabajar con el CSS del presente y futuro junto a tu profesora Estefany Aguilar.
Estefany
Estefany
teffcode

8765Puntos

hace 2 meses

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

😎😎😎 Excelente información, gracias!!!

2
8765Puntos
2 meses

Con todo gusto !!! 💚

4
11101Puntos

Excelente profesora. Me alegra aprender y he avanzado muy rápido

4
29Puntos
2 meses

que hago para hacer alga aqui soy nuevo porfa ayuda

3
8765Puntos
2 meses

Me alegra infinito, Camilo !!! 💚🥳

3

Tras haber visto la primera clase… La segunda pareció mas corta pero muy genial. Gracias! ❤️

2
8765Puntos
2 meses

Genial !!! Sí, esta segunda parte es más cortita 🥳

2
34346Puntos

Teff siempre tan genial enseñando ❤️