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.
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
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
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
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
- Código · justify-self-start
- Código · justify-self-end
- Código · justify-self-center
- Código · justify-self-stretch
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
- Código · align-self-start
- Código · align-self-end
- Código · align-self-center
- Código · align-self-stretch
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
👀 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
