Modelo de Diseño de Cuadrícula CSS

Diseño de Cuadrícula

El Modelo de Diseño de Cuadrícula CSS ofrece un sistema de diseño basado en cuadrícula con filas y columnas, haciendo más fácil diseñar páginas sin tener que usar flotamiento y/o posicionamiento.

Elementos de Cuadrícula

Un diseño de cuadrícula consiste de un elemento padre, con un o más elementos hijos.

Un elemento HTML se convierte en un contenedor de cuadrícula la propiedad display es establecid a grid o a inline-grid.

Con valor grid

CSS:

.contenedor-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: DodgeBlue;
  padding: 10px;
}
.contenedor-grid > div {
  background-color: #f1f1f1;
  border: 1px solid black;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

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>9</div>
</div>

Muestra:

1
2
3
4
5
6
7
8
9

Con valor inline-grid

CSS:

.contenedor-grid {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: DodgeBlue;
  padding: 10px;
}

Muestra:

1
2
3
4
5
6
7
8
9

Los elementos HTML anidados hijos de un contenedor de cuadrícula se convierten automaticamente en elementos de cuadrícula.

Columnas de la Cuadrícula

Los elementos de la cuadrícula alineados verticalmente se denominan columnas.

Filas de la Cuadrícula

Los elementos de la cuadrícula alineados horizontalmente se denominan filas.

Brechas de la Cuadrícula

El espacio entre las columnas y entre las líneas se denominan brechas.

Para ajustrar el tamaño de la brecha se establece uno de las siguientes propiedades:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

La propiedad grid-column-gap

La propiedad grid-column-gap establece la brecha entre las columnas:

CSS:

.contenedor-grid {
  display: grid;
  grid-column-gap: 50px;
}

Muestra:

1
2
3
4
5
6
7
8
9

La propiedad grid-row-gap

La propiedad grid-row-gap establece la brecha entre las filas:

CSS:

.contenedor-grid {
  display: grid;
  grid-row-gap: 50px;
}

Muestra:

1
2
3
4
5
6
7
8
9

La propiedad grid-gap

La propiedad grid-gap es una propiedad abreviada para las propiedades grid-row-gap y grid-column-gap:

CSS:

.contenedor-grid {
  display: grid;
  grid-gap: 50px 50px;
}

Mostrar:

1
2
3
4
5
6
7
8
9

La propiedad grid-gap también puede ser establecida con un unico valor para ambas brechas (filas y columnas):

CSS:

.contenedor-grid {
  display: grid;
  grid-gap: 50px 50px;
}

Líneas de Cuadrícula

En una cuadrícula se denominan las líneas de columnas y las líneas de filas. Las líneas se enumperan comenzando con 1 de izquierda a derecha al inicio, entre y al final de todos los elementos, es decir:

  • para una cuadrícula de una columna, implica que hay dos líneas de columna,
  • para una cuadrícula de dos columnas, implica que hay tres líneas de columna,
  • para una cuadrícula de tres columnas, implica que hay cuatro líneas de columna,
  • y así sucesivamente ...

así, para expander una elemento de cuadrícula a dos columnas, se le establece el inicio de línea su columna al final de línea de columna hasta la que se quiere expandir.

Para fines de demostrar el comportamiento en una cuadrícula; definimos 8 elementos de cuadrícula, dado que el primer elemento ocupara el especio de dos elementos:

CSS:

.elemento-exp {
  grid-column-start: 1;
  grid-column-end: 3;
}

HTML:

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

Muestra:

1
2
3
4
5
6
7
8

Aplica igual para las líneas de filas:

CSS:

.elemento-exp {
  grid-row-start: 1;
  grid-row-end: 3;
}

Muestra:

1
2
3
4
5
6
7
8