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 fila.
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 deseas que su diseño de cuadrícula contenga 4 columnas, especifica el ancho de las 4 columnas o auto 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 tienes 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;
/*Hace el Grid mas pequeño que el contenedor*/
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; }