Grid container
Para hacer que un elemento HTML se comporte como un contenedor grid, debes establecer la propiedad display en grid o inline-grid.
Los contenedores grid constan de elementos grid, colocados dentro de columnas y filas.
La propiedad grid-template-columns
La propiedad grid-template-columns define el número de columnas en el diseño grid 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 el diseño grid contenga 4 columnas, especifique el ancho de las 4 columnas, o establezca auto si todas las columnas deben tener el mismo ancho.
Ejemplo:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Nota: Si tienes más de 4 elementos en un contenedor
gridde 4 columnas, el contenedorgridagregará automáticamente una nueva fila para colocar los elementos.
La propiedad grid-template-columns también se puede utilizar para especificar el tamaño (ancho) de las columnas.
Ejemplo:
Establezca un tamaño para las 4 columnas:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
La propiedad grid-template-rows
La propiedad grid-template-rows define la altura de cada fila.
El valor es una lista separada por espacios, donde cada valor define la altura de la fila respectiva:
Ejemplo:
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
La propiedad justify-content
La propiedad justify-content se utiliza para alinear toda la cuadrícula dentro del contenedor.
Nota: El ancho total de la cuadrícula tiene que ser menor que el ancho del contenedor padre para que la propiedad
justify-contenttenga algún efecto.
Ejemplo:
.grid-container {
display: grid;
justify-content: space-evenly;
}
Ejemplo:
.grid-container {
display: grid;
justify-content: space-around;
}
Ejemplo:
.grid-container {
display: grid;
justify-content: space-between;
}
Ejemplo:
.grid-container {
display: grid;
justify-content: center;
}
Ejemplo:
.grid-container {
display: grid;
justify-content: start;
}
Ejemplo:
.grid-container {
display: grid;
justify-content: end;
}
La propiedad align-content
La propiedad align-content se utiliza para alinear verticalmente toda la cuadrícula dentro del contenedor.
Nota: La altura total de la cuadrícula tiene que ser menor que la altura del contenedor padre para que la propiedad
align-contenttenga algún efecto.
Ejemplo:
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Ejemplo:
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Ejemplo:
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Ejemplo:
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Ejemplo:
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Ejemplo:
.grid-container {
display: grid;
height: 400px;
align-content: end;
}
Traducido con 💚 desde W3Schools.com