37

CSS Grid Cheat Sheet: Items (Parte 2)

17188Puntos

hace 3 años

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! 😊💚

Estefany
Estefany
teffcode

17188Puntos

hace 3 años

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

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

4
29Puntos
3 años

que hago para hacer alga aqui soy nuevo porfa ayuda

3
17188Puntos
3 años

Me alegra infinito, Camilo !!! 💚🥳

4
10373Puntos

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

2
17188Puntos
3 años

Con todo gusto !!! 💚

3
2320Puntos

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

2
17188Puntos
3 años

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

2
57558Puntos

Teff siempre tan genial enseñando ❤️