Grid

CSS Grid. ¿Es Bootstrap un cadáver andante?

La especificación CSS Grid fue introducida en 2017 y ya ha sido adoptada por casi todos los navegadores importantes. Con esta nueva especificación en CSS es posible crear layouts complejos, al estilo de las columnas de Bootstrap. Por ejemplo, horizontal y verticalmente, sin CSS adicional.

Para ver dónde funciona y dónde no, puedes consultar CSS Grid en CanIUse. En general, funciona en todos los navegadores en sus dos últimas versiones, incluido Explorer.

Según mi modesta opinión, CSS Grid va a terminar con frameworks como Bootstrap o Foundation. O puede que estos frameworks lo adopten más pronto que tarde, ya que permite:

  • Código HTML más semántico.
  • Nuevos posibilidades en el diseño.
  • Más complejidad con menos código.
  • Menos dependencias de librerías de terceros.

A continuación he preparado unos CodePens con ejemplos, desde lo más básico hasta lo más complejo, mezclándolo con Flexbox (que fue introducido antes, pero que está claramente pensado para usarse con esta nueva especificación).

Además, hay que tener en cuenta que se pueden anidar diferentes grids y flexboxes.

1 – Set Up básico:

Aquí puedes ver una configuración básica.

También se ha introducido una nueva unidad «fr», es decir, fracciones del espacio disponible.

Además, hay que tener en cuenta que repeat es un shortdode, es decir:

grid-template-columns: repeat(4,1fr);

es lo mismo que:

grid-template-columns: 1fr 1fr 1fr 1fr;

See the Pen CSS Grid – Set up básico by Iban (@IbanVeiss) on CodePen.0

2 – Colocando elementos en la Grid

Aquí puedes ver como crear y posicionar elementos vertical y horizontalmente, y cambiar su posición visualmente, solo con CSS.

Simplemente, si tienes una grid creada de 5 columnas, en el contenedor:

display: grid;
grid-template-columns: repeat(5,1fr);

Si quieres que un elemento empiece en la tercera columna y ocupe dos:

grid-column: 3 / span 2;

Lo mismo pero en filas:

grid-row: 1 /span 2;

Por ejemplo, si quieres que la div 2 aparezca visualmente en la fila 4 en la columna 5:

grid-row: 4;
grid-column: 5 / 6;

Para que un elemento ocupe todo el espacio disponible:

grid-column: 1 / -1;

See the Pen CSS Grid – Colocando elementos en la grid by Iban (@IbanVeiss) on CodePen.0

3 – Alineación de elementos en la Grid:

Para alinear los elementos globalmente, en el contenedor:

justify-items: center; //Horizontal
align-items: center; //Vertical

Luego puedes alinear cada elemento. Por ejemplo, uno que ocupe todo el espacio disponible:

justify-self: stretch; //Horizontal 100%
align-self: stretch; //Vertical 100%

Además, dentro de cada elemento puedes utilizar flex. Por ejemplo:

//Contenido de la celda vía Flex
display: flex;
justify-content: center;
align-items: center;

See the Pen CSS Grid – Alineación de elementos en la grid by Iban (@IbanVeiss) on CodePen.0

4 – CSS Grid AutoFlow:

Si quieres, la grid intentará jugar al Tetris encajando (siempre que sea posible, claro) las piezas que tenga en el espacio dado. Le puedes decir que lo haga en todo o solo en columnas o filas:

 grid-auto-flow: dense;// row, column, dense

See the Pen CSS Grid – Autoflow by Iban (@IbanVeiss) on CodePen.0

5 – CSS Grid Áreas:

Esto es lo más «complejo», defines una grid y sus áreas. Si tiene 6 columnas hemos de especificar 6 veces el área:

display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "header header header header header header"
      "main main main main main main"
      "sidebar1 sidebar1 sidebar1 sidebar1 sidebar1 sidebar1"
      "sidebar2 sidebar2 sidebar2 sidebar2 sidebar2 sidebar2"
      "widgets widgets widgets widgets widgets widgets"
      "footer footer footer footer footer footer";

Luego le dices a los elementos que área han de ocupar. Por ejemplo, la cabecera:

grid-area: header;
background-color: blue;
height: 6vh;

El artículo:

grid-area: main;
background-color: grey;
padding: 1rem;

También puedes ir cambiado el layout con media-queries:

@media (min-width: 992px) {
      grid-template-columns: 150px 150px 1fr 1fr 150px 150px;
      grid-template-areas:
        "header header header header header header"
        "sidebar1 sidebar1 main main sidebar2 sidebar2"
        "widgets widgets widgets widgets widgets widgets"
        "footer footer footer footer footer footer";
  }

See the Pen CSS Grid – Areas by Iban (@IbanVeiss) on CodePen.0

 

En definitiva, este es el presente/futuro de los layouts con CSSs.

Cuanto antes empecemos a utilizarlo mejor.

Bibliografía:

https://css-tricks.com/snippets/css/complete-guide-grid/

http://www.mastercssgrid.com/

https://www.w3.org/TR/css-grid-1/

Escribe un Comentario

Su correo nunca será publicado ni compartido. Los campos requeridos están marcados *

*
*

Compártelo en