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
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
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
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
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
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
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! 😊💚
Excelente profesora. Me alegra aprender y he avanzado muy rápido
que hago para hacer alga aqui soy nuevo porfa ayuda
Welcome, @usuario531! Entra a https://platzi.com/grid y toma las clases del curso. 😄
Me alegra infinito, Camilo !!! 💚🥳
😎😎😎 Excelente información, gracias!!!
Con todo gusto !!! 💚
Tras haber visto la primera clase… La segunda pareció mas corta pero muy genial. Gracias! ❤️
Genial !!! Sí, esta segunda parte es más cortita 🥳
Teff siempre tan genial enseñando ❤️