Contenedores de Cuadrícula CSS

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

Las propiedades establecidas en el contenedor definiran el comportamiento de los elementos anidados en él, es decir, las filas y las columnas.

La propiedad grid-template-columns

La propiedad grid-templates-columns establece el número de columnas en el diseño de la cuadrícula, y se puede establecer el ancho de cada columna.

El valor es una lista separada por espacios, donde cada valor establece el ancho de cada columna correspondiente. 

Si se desea un diseño de cuadrícula que contenga 4 columnas, se estblecen el ancho de las 4 columnas o en su defecto se establecen con auto para que todas tengan el mismo ancho.

CSS:

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

HTML:

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

Para fines de mostrar el comportamiento se establecen otras propiedades CSS.

Muestra:

1
2
3
4
5
6
7
8

Nota: Si contiene más elementos de los establecidos en el contenedor, automaticamente se agregarán en una nueva fila para colocar los elementos restantes.

También se puede establecer un ancho para cada columna:

CSS:

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

Muestra:

1
2
3
4
5
6
7
8

La propiedad grid-template-rows

La propiedad grid-template-rows establece el alto de cada fila.

El valor es una lista separada por espacios, donde cada valor establece el alto de cada fila correspondiente.

CSS:

.contenedor-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 80px 200px;
}

HTML:

1
2
3
4
5
6
7
8

La propiedad justify-content

La propiedad justify-content establece la alineación horizontal completa de la cuadrícula dentro del contenedor.

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

El valor space-evenly establece un especiado uniforme para los elementos de columna:

CSS:

.contenedor-grid {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: space-evenly;
}

Muestra:

1
2
3
4
5
6

El valor space-around establece un especiado alrededor de los elementos de columna:

CSS:

.contenedor-grid {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: space-around;
}

Muestra:

1
2
3
4
5
6

El valor space-between establece un especiado entre los elementos de columnas:

CSS:

.contenedor-grid {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: space-between;
}

Muestra:

1
2
3
4
5
6

El valor center establece un especiado alrededor de las coliumnas para que los elementos se alinean al centro de la cuadrícula:

CSS:

.contenedor-grid {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: center;
}

Muestra:

1
2
3
4
5
6

El valor start establece un especiado al final de la cuadrícula para alinear de los elementos al inicio del contenedor:

CSS:

.contenedor-grid {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: start;
}

Muestra:

1
2
3
4
5
6

El valor end establece un especiado al inicio de la cuadrícula para alinear los elementos al final del contenedor:

CSS:

.contenedor-grid {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: end;
}

Muestra:

1
2
3
4
5
6

La propiedad align-content

La propiedad align-content establece la alineación vertical completa de la cuadrícula dentro del contenedor.

Nota: El alto total de la cuadrícula debe ser menor al alto total del contenedor para que la propiedad align-content tenga efecto.

El valor center alinea los elementos en medio del contenedor de la cuadrícula

CSS:

.contenedor-grid {
  display: grid;
  height: 300px;
  grid-template-columns: auto auto auto;
  align-content: center;
}

HTML:

1
2
3
4
5
6

El valor space-evenly establece el un espaciado uniforme para los elementos de filas:

CSS:

.contenedor-grid {
  display: grid;
  height: 300px;
  grid-template-columns: auto auto auto;
  align-content: space-evenly;
}

HTML:

1
2
3
4
5
6

 

El valor space-around establece el espaciado antes y después de los elemntos de filas:

CSS:

.contenedor-grid {
  display: grid;
  height: 300px;
  grid-template-columns: auto auto auto;
  align-content: space-around;
}

HTML:

1
2
3
4
5
6

El valor space-between establece un espaciado entre los elementos de filas:

CSS:

.contenedor-grid {
  display: grid;
  height: 300px;
  grid-template-columns: auto auto auto;
  align-content: space-between;
}

HTML:

1
2
3
4
5
6

El valor start establece el espaciado al final del contenedor para alinear los elementos al inicio del contenedor:

CSS:

.contenedor-grid {
  display: grid;
  height: 300px;
  grid-template-columns: auto auto auto;
  align-content: start;
}

HTML:

1
2
3
4
5
6

El valor end establece el espaciado al inicio del contenedor para alinear los elementos al final del contenedor:

CSS:

.contenedor-grid {
  display: grid;
  height: 300px;
  grid-template-columns: auto auto auto;
  align-content: end;
}

HTML:

1
2
3
4
5
6