Contenedor Grid

Para hacer que un elemento HTML se comporte como un contenedor de cuadrícula (grid), debe establecer la propiedad grid o inline-grid. Los contenedores de cuadrícula consisten en elementos de cuadrícula, colocados dentro de columnas y filas.

La propiedad grid-template-columns

La propiedad grid-template-columns define el número de columnas en su diseño de cuadrícula y puedes 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 "automático" si todas las columnas deben tener el mismo ancho.

Ejm

Crear un Grid con 4 columnas.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Nota: si tiene más de 4 elementos en una cuadrícula de 4 columnas, la cuadrícula agregará automáticamente una nueva fila para colocar los elementos.

La propiedad grid-template-columns también se puede usar para especificar el tamaño (ancho) de las columnas.

Ejm

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

La propiedad grid-template-rows

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

Ejm

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

La propiedad justify-content

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

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

Ejm1

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: space-evenly;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "space-evenly" will give the columns equal amount of space between, and around them:</p>

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

</body>
</html>

Ejm2

.grid-container {
  display: grid;
  justify-content: space-around;
}

Ejm3

.grid-container {
  display: grid;
  justify-content: space-between;
}

Ejm4

.grid-container {
  display: grid;
  justify-content: center;
}

Ejm5

.grid-container {
  display: grid;
  justify-content: start;
}

Ejm6

.grid-container {
  display: grid;
  justify-content: end;
}

La propiedad align-content

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

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

Ejm1

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
height: 400px;
align-content: center;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "center" will align the rows in the middle of the container:</p>

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

</body>
</html>

Ejm2

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Ejm3

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Ejm4

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Ejm5

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Ejm 6

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}