HTML5 trae de vuelta las tablas: diseños de cuadrícula contemporáneos con cuadrículas CSS

En los días en que CSS era un rumor y el contenido y el diseño no estaban divididos, construir un sitio web usando tablas era perfectamente común. Con el surgimiento de la web semántica, las tablas se redefinieron para usarse solo para su propósito original, estructurar datos, que debían mostrarse en forma de tablas. Además, CSS no presentó una manera fácil de estructurar diseños en filas y columnas. Ahora, con las nuevas cuadrículas CSS, los diseños rasterizados regresan y se parecen mucho a los diseños basados ​​en tablas.

Preparando la rejilla

Para empezar, tenemos que definir la sección de nuestro documento HTML que se supone que lleva la cuadrícula. Si desea que la cuadrícula llene toda la página, el elemento «» sería un excelente punto de partida. Usando la propiedad „display“, este elemento y sus hijos están preparados para el uso de cuadrículas.

body {
  display: grid;
  display: -ms-grid;
}

Como las cuadrículas CSS solo funcionan en Internet Explorer, debemos cuidar los prefijos adecuados. Entonces, además de „grid“, no olvide usar „-ms-grid“. A partir de ahí, permita que todos los elementos secundarios se posicionen a través de CSS Grids. Antes de comenzar a definir filas y columnas, debemos decirle al elemento „“ su ancho y alto predeterminados. Hacemos esto usando las propiedades „grid-columns“ y „grid-rows“. Agregue un valor delimitado por espacios para cada fila y columna usando valores absolutos o relativos. Si desea dejar eso en manos del navegador, simplemente use la palabra clave «auto».

body {
  width: 100%;
  display: grid;
  display: -ms-grid;
  grid-columns: 25% 75%;
  -ms-grid-columns: 25% 75%;
  grid-rows: auto auto auto;
  -ms-grid-rows: auto auto auto;
}

En este ejemplo, definimos un diseño que consta de dos columnas y tres filas. La primera columna tiene un ancho del 25 por ciento, la segunda ocupa el 75 por ciento. La altura de las tres filas se establece en «auto», lo que significa que la altura se ajustará al contenido. Usando las propiedades „ancho“ y „alto“, también podría definir todos los valores individualmente.

Cuadrícula simple con alturas sensibles al contenido

Un clásico en los diseños de tablas fue la posibilidad de agregar un pie de página que siempre estaría visible sobre el extremo inferior de la ventana del navegador. CSS Grids también puede hacer esto con „calc()“.

body {
  width: 100%;
  height: 100%;
  display: grid;
  display: -ms-grid;
  grid-columns: 25% 75%;
  -ms-grid-columns: 25% 75%;
  grid-rows: 100px calc(100% - 200px) 100px;
  -ms-grid-rows: 100px calc(100% - 200px) 100px;
}

En este ejemplo, la altura de la fila del medio se calcula restando las alturas de la primera y la tercera fila de la altura total de la página (100 por ciento). Para que esa función funcione correctamente, asegúrese de agregar una altura del 100 por ciento al elemento „“ así como al elemento „“.

Rejilla que cubre el 100 por ciento de la altura

Una alternativa a „calc()“ es la nueva unidad „fr“ („unidad de fracción“). Esta unidad siempre ocupará el resto del espacio disponible.

body {
  …
  grid-rows: 100px 1fr 100px;
  -ms-grid-rows: 100px 1fr 100px;
}

En este ejemplo, definimos la fila central con una altura de «1fr». Esto lleva a que la columna ocupe todo el resto de la altura disponible. Mientras que los valores en porcentaje siempre son relativos al alto o ancho total de la página, „fr“ toma en cuenta valores absolutos en otros elementos dentro de la cuadrícula y los maneja correctamente. Y tenemos una tercera forma de definir el ancho y la altura de cualquier elemento de cuadrícula. Usando „minmax()“ podemos fijar un valor mínimo y máximo para el ancho o la altura respectivamente.

body {
  …
  grid-rows: 100px minmax(100px, 1fr) 100px;
  -ms-grid-rows: 100px minmax(100px, 1fr) 100px;
}

En este ejemplo, usamos «filas de cuadrícula» para definir la altura de la fila central para asegurarnos de que su altura sea de 100 píxeles como mínimo y el resto del espacio disponible en la ventana del navegador como máximo.

Definición de filas y columnas

En el siguiente paso posicionamos filas y columnas. Esto se logra usando las propiedades „grid-column“ y „grid-row“. Contienen la posición del elemento dentro de la cuadrícula. Al igual que en los diseños de tablas antiguos, las filas pueden abarcar más de una columna.

header {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 1;
  -ms-grid-row: 1;
  grid-column-span: 2;
  -ms-grid-column-span: 2;
}

En nuestro ejemplo, creamos la sección de encabezado. Se encuentra en la primera columna y fila de la cuadrícula y se supone que abarca ambas columnas. Establecemos el valor respectivo usando la propiedad „grid-column-span“.

nav {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 2;
  -ms-grid-row: 2;
}

article {
  grid-column: 2;
  -ms-grid-column: 2;
  grid-row: 2;
  -ms-grid-row: 2;
}

Se supone que la segunda fila muestra la navegación („