gap y alineación

Propiedades al contenedor padre (Grid)

Gap

Es la forma corta de definir el espacio entre las filas y columnas. gap: 20px; equivale a poner column-gap: 20px y row-gap: 20px; Si ponemos gap: 30px 10px; equivale a poner row-gap: 10px; y column-gap: 10px;

column-gap: establecemos el tamaño de los huecos entre columnas (verticales)
row-gap: establecemos el tamaño de los huecos entre filas (horizontales)

.container{ 
     column-gap: 10px; 
     row-gap: 20px;
}

Alineación del content (padre)

justify-content y align-content

Estas propiedades (-content) alinean la rejilla completa dentro del contenedor, siempre que haya espacio sobrante.

justify-content: Alinea la rejilla completa en el eje horizontal (fila).
align-content: Alinea la rejilla completa en el eje vertical (columna).

Los valores que pueden tomar estas dos propiedades son:

start: Pone el grupo de celdas al inicio.
end: Pone el grupo de celdas al final.
center: Centra el grupo de celdas.
space-between: Reparte el espacio entre las celdas (la primera y la última están pegadas a los bordes).
space-around: Reparte el espacio alrededor de cada celda (el espacio en los bordes es la mitad que entre celdas).
space-evenly: Reparte el espacio de forma equitativa, incluyendo los bordes.

(atajo) place-content

Esta propiedad es un atajo, te permite definir align-content y justify-content en una sola línea.

place-content: center space-between; Sería lo mismo que align-content: center y justify-content: space-between.
place-content: center; Sería para centrar en ambos ejes.

Alineación de los hijos dentro de su celda (ítems)

justify-items y align-items

Estas propiedades (-items) definen la alineación por defecto de cada hijo (libro) dentro de su propia celda.

justify-items: Alinea los hijos en el eje horizontal.
align-items: Alinea los hijos en el eje vertical.

Valores posibles para ambas propiedades:

start: Pone los hijos al inicio de su celda.
end: Pone los hijos al final de su celda.
center: Centra los hijos dentro de su celda.
stretch (valor por defecto): Hace que los hijos se estiren para ocupar todo el espacio de su celda.

(atajo) place-items

Te permite definir align-items y justify-items en una sola línea.

place-items: center start; Equivale a align-items: center y justify-items: start.
place-items: center; Ideal para centrar algo con CSS

Propiedades para los hijos (ítems)

justify-self y align-self

Estas propiedades se aplican directamente a un elemento hijo y sirven para sobrescribir las reglas de alineación que estableció el contenedor, pero solo para ese elemento en específico.

justify-self: Sobrescribe justify-items para un solo hijo, alineándolo horizontalmente dentro de su celda.
align-self: Sobrescribe align-items para un solo hijo, alineándolo verticalmente dentro de su celda.
place-self (Atajo): Te permite definir align-self y justify-self en una sola línea.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard con CSS Grid</title>
    <link rel="stylesheet" href="1.alineacion.css">
</head>

<body>

    <div class="grid-container">
        <div class="item item-1">1. Default<p>justify: start<br>align: start</p>
        </div>
        <div class="item item-2">2. Ancho<p>justify-self: stretch</p>
        </div>
        <div class="item item-3">3. Abajo<p>align-self: end</p>
        </div>
        <div class="item item-4">4. Centrado<p>place-self: center</p>
        </div>
        <div class="item item-5">5. Alto<p>align-self: stretch</p>
        </div>
        <div class="item item-6">6. Default<p>justify: start<br>align: start</p>
        </div>
    </div>

</body>

</html>

order

Por último, dentro de este punto tenemos la propiedad order que funciona como en flex, pudiendo indicarle el orden(“peso”) de los elementos mediante un número. Por defecto, todos los hijos tienen un valor de 0. Cuando un ítem tenga la propiedad order: 3; significa que irá detrás de aquellos que tengan una propiedad inferior. Este valor puede ser negativo.

<< Grid linename Grid vs Flex >>