CSS Grid Cheat Sheet: Contenedores (Parte 1)

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:

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

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?

• Código · Display: grid;
• Código · 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

• Código · grid-column-gap: 8px;
• Código · grid-row-gap: 8px;
• Código · grid-gap: 8px;

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

• Código · grid-auto-columns: 60px;
• Código · grid-auto-rows: 60px;

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.

• Código · grid-auto-flow: row;
• Código · grid-auto-flow: column;

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