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.
💡 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?
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
- Código · grid-template-columns: 75px 75px 75px 75px;
- Código · grid-template-rows: 75px 75px 75px 75px;
- Código · grid-template-areas
- Código · grid-template: 150px 150px / 150px 150px;
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
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
- Código · justify-items: start;
- Código · justify-items: end;
- Código · justify-items: center;
- Código · justify-items: stretch;
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
- Código · align-items: start;
- Código · align-items: end;
- Código · align-items: center;
- Código · align-items: stretch;
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
- Código · place-items: start;
- Código · place-items: end;
- Código · place-items: center;
- Código · place-items: stretch;
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
- Código · justify-content: start;
- Código · justify-content: end;
- Código · justify-content: center;
- Código · justify-content: stretch;
- Código · justify-content: space-around;
- Código · justify-content: space-between;
- Código · justify-content: space-evenly;
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
- Código · align-content: start;
- Código · align-content: end;
- Código · align-content: center;
- Código · align-content: stretch;
- Código · align-content: space-around;
- Código · align-content: space-between;
- Código · align-content: space-evenly;
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
- Código · place-content: start;
- Código · place-content: end;
- Código · place-content: center;
- Código · place-content: stretch;
- Código · place-content: space-around;
- Código · place-content: space-between;
- Código · place-content: space-evenly;
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
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.
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
