Elemento de cuadrícula organizado en bloque.

Un diseño de cuadrícula consta de un elemento primario display: grid, con uno o más elementos secundarios.

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Un elemento HTML se convierte en un contenedor de cuadrícula cuando su propiedad display se establece en grid o en línea-grid.

Ver ejemplo en acción . . .

Elemento de cuadrícula organizado en línea.

.grid-container {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Todos los elementos secundarios directos del contenedor de cuadrícula se convierten automáticamente en elementos de cuadrícula .

Ver ejemplo en acción . . .

Seleccione entre las opciones grid ó inline-grid, para ver su comportamiento.

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

.grid-container {
    display: >
        flex
        grid
        inline-grid
    
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Columnas de cuadrícula.

Las líneas verticales de los elementos de la cuadrícula se denominan columnas (column).
Ver ejemplo

Filas de cuadrícula.

Las líneas horizontales de los elementos de la cuadrícula se denominan filas (row).
Ver ejemplo

Puede ajustar el tamaño del espacio utilizando una de las siguientes propiedades:

• grid-column-gap
• grid-row-gap
• grid-gap

La propiedad grid-column-gap establece el espacio entre las columnas:

.grid-container {
    display: grid;
    grid-column-gap: 50px;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

.grid-container {
    display: grid;
    grid-column-gap: 
        0
        10px
        20px
        50px
        2em
        3em
     ;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

La propiedad grid-row-gap establece el espacio entre las filas:

.grid-container {
    display: grid;
    grid-row-gap: 50px;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

.grid-container {
    display: grid;
    grid-row-gap: 
        0
        10px
        20px
        50px
        2em
        3em
     ;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Define el tamaño del espacio entre filas/columnas del grid.

Los espacios entre cada columna / fila se llaman huecos (gap).

grid-gap Define el tamaño del espacio entre las filas/columnas del grid

.container {
    grid-row-gap: 10px; /* Carril de las filas */
    grid-column-gap: 20px; /* Carril de las columnas */
    grid-gap: 10px 20px; /* Carril de filas y columnas */
}

La propiedad grid-gap es una propiedad abreviada para las propiedades grid-row-gap y grid-column-gap.

.grid-container {
    display: grid;
    grid-gap: 50px 100px;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}

La propiedad grid-gap también se puede utilizar para establecer tanto el espacio de fila como el espacio de columna en un valor:

.grid-container {
    display: grid;
    grid-gap: 50px;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

.grid-container {
    display: grid;
    grid-gap: 
        0
        20px 100px
        100px 20px
        20px
        100px
        3em
     ;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Las líneas entre columnas se llaman líneas de columna (column lines).

Las líneas entre filas se llaman líneas de fila (row lines).

• grid-column-start
• grid-column-end

Ejemplo 1: Coloque un elemento de cuadrícula en la línea de columna 1 y deje que termine en la línea de columna 3:

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

<div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}
.item1 {
    grid-column-start: 
        1
        2
        3
     ;
    grid-column-end: 
        2
        3
        4
     ;
    background-color:khaki;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

• grid-row-start
• grid-row-end

Ejemplo 2: Coloque un elemento de cuadrícula en la línea de fila 1 y deje que termine en la línea de fila 3:

.item1 {
    grid-row-start: 1;
    grid-row-end: 3;
}

<div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
}
.item1 {
    grid-row-start: 
        1
        2
        3
     ;
    grid-row-end: 
        2
        3
        4
     ;
    background-color:khaki;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Para que un elemento HTML se comporte como un grid container (contenedor de cuadrícula), debe establecer la propiedad de display en grid (cuadrícula) o inline-grid (cuadrícula en línea).

Los contenedores de cuadrícula (Grid) consisten en elementos de cuadrícula (grid items), colocados dentro de columnas (columns) y filas (rows).

.container {
    display: grid (organizado en bloque) | inline-grid (organizado en linea);
}

.container {
    grid-template-columns: 150px 1000px 250px;    /* columnas */
    grid-template-rows: 25% 100px auto;           /* filas */
    grid-template-area: "header header header
                        menu main sidebar
                        footer footer footer";    /* areas */
}

El valor alto/ancho se puede indicar en diferentes formatos

grid-template-columns: 25% 50% 25%;               /* porcentaje*/
grid-template-rows: 1fr 3fr 1fr;                  /* tracks flexible */
grid-template-columns: repeat(3,200px);           /* 3 columnas de 200px */
grid-template-rows: min-content max-content;      /* relativo al contenido */
grid-template-columns: minmax(150px 1000px) 1fr;  /* rango mínimo y máximo */

La propiedad grid-template-columns define el número de columnas en su diseño de cuadrícula y puede definir el ancho de cada columna.

El valor es una lista separada por espacios, donde cada valor define el ancho de la columna respectiva.

Si desea que su diseño de cuadrícula contenga 4 columnas, especifique el ancho de las 4 columnas, o "auto" si todas las columnas deben tener el mismo ancho.

Sintaxis CSS: grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Sintaxis de JavaScript: object .style.gridTemplateColumns = "50px 50px 50px"

Valores de propiedad:

• none - Valor por defecto. Se crean columnas si es necesario.
• auto - El tamaño de las columnas está determinado por el tamaño del contenedor y el tamaño del contenido de los elementos en la columna.
• max-content - Establece el tamaño de cada columna para que dependa del elemento más grande de la columna.
• min-content - Establece el tamaño de cada columna para que dependa del elemento más pequeño de la columna.
• length - Establece el tamaño de las columnas, utilizando un valor de longitud legal.
• initial - Establece esta propiedad en su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>

.grid-container {
    display: grid;
    grid-gap:5px;
    grid-template-columns: 
        auto
        auto auto
        auto auto auto
        auto auto auto auto
        80px 200px auto 40px
        repeat(4, 1fr)
        repeat(4, 25%)
        repeat(4, 60%)
        repeat(4, min-content)
        repeat(4, max-content)
        repeat(4, auto)
        repeat(4, minmax(100px, 1fr))
        repeat(4, fit-content(200px))
        repeat(4, 50px 50% auto)
        repeat(4, min-content max-content)
        repeat(auto-fill, 250px)
        repeat(auto-fit, 250px)
        repeat(auto-fill, minmax(100px, 1fr))
        repeat(auto-fill, 50px 30% 400px)
        repeat(4, 10px 30% 400px)
     ;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Define la altura de cada fila.

El valor es una lista separada por espacios, donde cada valor define la altura de la fila respectiva.

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 
        auto auto auto
        100px 50px 200px
        repeat(3, 1fr)
        repeat(3, 200px)
     ;
    grid-gap: 5px;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Alinea o justifica las columnas del grid.

.container {
    justify-items: start | end | certer | stretch (Por defecto);
}

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
</div>

.grid-container {
    display: grid;
    justify-items: 
        stretch
        start
        end
        center
     ;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Alinea o justifica las filas del grid verticalmente.

La propiedad align-items alinea o justifica las filas del grid

.container {
    align-items: start | end | certer | stretch (Por defecto);
}

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 200px;
    align-items: 
        stretch
        start
        end
        center
     ;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

La propiedad justify-content se usa para alinear toda la cuadrícula dentro del contenedor.

.container {
    justify-content: start | end | certer | stretch (Por defecto) | space-around | space-between | space-evenly;
}

Nota: El ancho total de la cuadrícula debe ser menor que el ancho del contenedor para que la propiedad justify-content tenga algún efecto.

• El valor "space-evenly" dará a las columnas la misma cantidad de espacio uniforme entre y alrededor de ellas.
• El valor "space-around" dará a las columnas la misma cantidad de espacio a su alrededor
• El valor "space-between" dará a las columnas la misma cantidad de espacio intermedio entre ellas
• El valor "center" alineará la cuadrícula en el medio del contenedor
• El valor "start" alineará la cuadrícula al comienzo del contenedor
• El valor "end" alineará la cuadrícula al final del contenedor

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

.grid-container {
    display: grid;
    justify-content: 
        start
        end
        center
        space-evenly
        space-around
        space-between
     ;
    grid-template-columns: 50px 50px 50px;
    grid-gap: 5px;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

La propiedad align-content se utiliza para alinear verticalmente toda la cuadrícula dentro del contenedor.

.container {
    align-content: start | end | certer | stretch (Por defecto) | space-around | space-between | space-evenly;
}

Nota: La altura total de la cuadrícula debe ser menor que la altura del contenedor para que la propiedad de alinear contenido tenga algún efecto.

• El valor "center" alineará las filas en el medio del contenedor
• El valor "space-evenly" dará a las filas la misma cantidad de espacio entre y alrededor de ellas
• El valor "space-around" dará a las filas la misma cantidad de espacio a su alrededor:
• El valor "space-between" dará a las filas la misma cantidad de espacio intermedio entre ellas
• El valor "start" alineará las filas al comienzo del contenedor:
• El valor "end" alineará las filas al final del contenedor:
• El valor "normal" los elementos se empaquetan en su posición predeterminada como si no se hubiera establecido un valor de contenido de alineación

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

.grid-container {
    display: grid;
    height: 400px;
    align-content: 
            stretch
            start
            end
            center
            space-around
            space-between
            space-evenly
            normal
         ;
    grid-template-columns: auto auto auto;
    grid-gap: 5px;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Coloca automáticamente elementos que no están explicitamente ubicados.

.container {
    grid-auto-flow: row | column | dense;
}

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    grid-auto-flow: 
        row
        column
        dense
     ;
    grid-gap: 5px;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Un contenedor de cuadrícula contiene elementos de cuadrícula.

De forma predeterminada, un contenedor tiene un elemento de cuadrícula para cada columna, en cada fila, pero puede diseñar los elementos de la cuadrícula para que abarquen varias columnas y / o filas.

La propiedad grid-column define en qué columna(s) colocar un elemento.
Usted define dónde comenzará el artículo y dónde terminará.

Nota: La propiedad grid-column es una propiedad abreviada de las propiedades grid-column-start y grid-column-end.

Para colocar un elemento, puede hacer referencia a los números de línea o utilizar la palabra clave "span" para definir cuántas columnas abarcará el elemento.

<div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
    <div class="grid-item">13</div>
    <div class="grid-item">14</div>
    <div class="grid-item">15</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-gap: 5px;
    background-color: #2196F3;
    padding: 10px;
}
.item1 {
    grid-column: 
        1/2
        1/3
        1/4
        1/5
        1/6
        1/7
        1/span 3
        2/span 3
        3/span 3
        3/5
         ;
    background-color:khaki;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

La propiedad grid-row define en qué fila(s) colocar un elemento. Usted define dónde comenzará el artículo y dónde terminará.

Nota: La propiedad grid-row es una propiedad abreviada de las propiedades grid-row-start y grid-row-end .

Para colocar un elemento, puede hacer referencia a los números de línea o usar la palabra clave "span" para definir cuántas filas abarcará el elemento

<div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
    <div class="grid-item">13</div>
    <div class="grid-item">14</div>
    <div class="grid-item">15</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-gap: 5px;
    background-color: #2196F3;
    padding: 10px;
}
.item1 {
    grid-row: 
        1/2
        1/3
        1/4
        1/span 3
        2/span 2
        3/4
     ;
    background-color:khaki;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Especificar dónde colocar un elemento.

La propiedad grid-area se puede usar como una propiedad abreviada para las propiedades grid-row-start, grid-column-start, grid-row-end y grid-column-end.

Puede usar la propiedad de área de cuadrícula para especificar dónde colocar un elemento.

Sintaxis: grid-row-start / grid-column-start / grid-row-end / grid-column-end

Ejemplo: 1 / 2 / 5 / 6

El artículo 8 comenzará en la fila-línea 1 y la columna-línea 2, y finalizará en la fila-línea 5 columna-línea 6

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item item8">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
    <div class="grid-item">13</div>
    <div class="grid-item">14</div>
    <div class="grid-item">15</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-gap: 5px;
    background-color: #2196F3;
    padding: 10px;
}
.item8 {
    grid-area: 
            2/2/3/3
            1/2/5/6
            2/1/span 2/span 3
            1/5/span 2/span 2
            1/1/2/2
         ;
    background-color:khaki;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Los elementos de cuadrícula nombrados pueden ser referidos por la propiedad.

Nombrar elementos de cuadrícula

La propiedad grid-area también se puede usar para asignar nombres a elementos de cuadrícula.

Los elementos de cuadrícula nombrados pueden ser referidos por la propiedad grid-template-areas del contenedor de cuadrícula.

Cada fila está definida por apóstrofes ('')

Las columnas en cada fila se definen dentro de los apóstrofes, separadas por un espacio.

Nota: Un signo de punto representa un elemento de cuadrícula sin nombre.

Para definir dos filas, defina la columna de la segunda fila dentro de otro conjunto de apóstrofes

<div class="grid-container">
    <div class="grid-item area1">1</div>
    <div class="grid-item area2">2</div>
    <div class="grid-item area3">3</div>
    <div class="grid-item area4">4</div>
    <div class="grid-item area5">5</div>
</div>

.area1{grid-area:cab;}
.area2{grid-area:izq;}
.area3{grid-area:cen;}
.area4{grid-area:der;}
.area5{grid-area:pie;}
.grid-container {
    display: grid;
    grid-template-areas: 
            'cab izq cen der pie'
            'cab' 'izq' 'cen' 'der' 'pie'
            'cab cab cab' 'izq cen der' 'izq pie pie'
            'izq cab der' 'izq cen der' 'pie pie pie'
         ;
    grid-gap: 5px;
    background-color: #2196F3;
    padding: 10px;
}
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Alinea verticalmente el contenido de una celda.

.item-a {
    align-self: start | end | center | stretch (por defecto);
}

Alinea horizontalmente el contenido de una celda.

.item-a {
    justify-self: start | end | center | stretch (por defecto);
}