La tecnología de cuadrícula CSS representa una forma completamente nueva de pensar los diseños web, una forma en la que usted tiene el control total de la presentación. No más elementos de anidación HTML extraños ni semánticos aquí y allá para ayudar a nuestros diseños. A diferencia de cualquier otra herramienta disponible en CSS, esta herramienta presenta un sistema de cuadrícula bidimensional potente y completo, esto básicamente significa que colocará elementos en un cuadrante X/Y.

Antes de saltar a los detalles de su implementación, tenga en cuenta que esta tecnología ha existido durante algunos años y, a partir de hoy, todos los principales navegadores la admiten sin prefijos de proveedores, cubriendo más del 90% de los usuarios globales. Por lo tanto, es seguro usarlo.

En este artículo expondré el uso básico para que pueda familiarizarse con la sintaxis y su comportamiento.

Configure el contenedor de la cuadrícula

.grid {
  display: grid;
  grid-template-columns:
    [left1] 100px
    [left2] 100px
    [center] auto
    [right1] 100px
    [right2] 100px [end];
  grid-template-rows:
    [row1] auto
    [row2] auto
    [row3] auto [end];
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

El código anterior muestra cómo se ve la sintaxis en el elemento contenedor de la cuadrícula. Como puede ver, la mayor parte es fácil de entender, la pantalla: la cuadrícula inicializa el sistema de diseño de la cuadrícula, luego declaramos la estructura de la columna/fila y el espacio entre los elementos dentro de la cuadrícula.

Cada valor dentro de grid-template-columns o grid-template-rows representa la distancia entre las líneas de cuadrícula y los textos dentro de los corchetes son nombres opcionales que podemos establecer en las líneas de cuadrícula. En el ejemplo, estamos inicializando una cuadrícula con 5 columnas y 3 filas, la cuadrícula se verá así:

Coloque Elementos en la Cuadrícula

Ahora que tenemos nuestro contenedor de cuadrícula inicializado y configurado, podemos proceder a colocar los elementos, que son los elementos secundarios directos del contenedor de cuadrícula. En el HTML a continuación, los elementos de la cuadrícula son seis: header, nav, main, aside#sidebar1, aside#sidebar2 y footer:

<div class="grid">
  <header><h1>The Page Title</h1></header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <main>
    <h2>Recent Posts</h2>
    <article>
      <h3>Post title</h3>
      <p>Some lorem text here</p>
      <p>Second paragraph</p>
    </article>
  </main>
  <aside id="sidebar1">Sidebar 1</aside>
  <aside id="sidebar2">Sidebar 2</aside>
  <footer>Last one</footer>
<div/>

Por defecto, los elementos se colocan uno en cada celda de la cuadrícula:

Para cambiar la forma en que mostramos los elementos en la cuadrícula, podemos usar grid-column y grid-row, la sintaxis funciona de esta manera

grid-column: <start line> / <end line>;
grid-row: <start line> / <end line>;

Para construir un diseño básico de 3 columnas, podemos agregarlo con este conjunto de reglas:

header {
  grid-column: left1 / end;
}
footer {
  grid-column: left1 / end;
}
nav {
  grid-column: left1 / end;
}
main {
  grid-column: center / right1;
}
#sidebar1 {
  grid-column: left1 / center;
  grid-row: row3;
}
#sidebar2 {
  grid-column: right1 / end;
  grid-row: row3;
}

Este es el resultado, con la cuadrícula resaltada en la parte superior como referencia:

Sin la cuadrícula:

Plantilla de Cuadrícula

Esta es otra opción muy útil que podemos usar. En lugar de establecer las propiedades de ubicación en cada elemento, también podemos hacerlo dentro del elemento contenedor de cuadrícula. Esto funciona al etiquetar el elemento con un área de cuadrícula, grid-area:

header {
  grid-area: header;
}
footer {
  grid-area: footer;
}
nav {
  grid-area: nav;
}
main {
  grid-area: main;
}
#sidebar1 {
  grid-area: sidebar1;
}
#sidebar2 {
  grid-area: sidebar2;
}

Y especificando el diseño en el contenedor de cuadrícula con la propiedad grid-template-areas:

.grid {
  ...
  grid-template-areas:
    'header header header header header'
    'nav nav nav nav nav'
    'sidebar1 sidebar1 main sidebar2 sidebar2'
    'footer footer footer footer footer';
}

El resultado será exactamente el mismo.

Nuevas Funciones y Unidades

Unidad FR

La unidad «fr» representa una fracción del espacio disponible en el contenedor de la cuadrícula. Uso:

grid-template-columns: 1fr 2fr 1fr 1fr<br>

Función Repeat

La función repeat() representa un fragmento repetido de la lista de pistas, lo que permite escribir una gran cantidad de columnas o filas que exhiben un patrón recurrente en una forma más compacta. Uso:

grid-template-rows: repeat(3, auto)

Función Minmax

La función minmax() define un rango de tamaño mayor o igual a min y menor o igual a max. Uso:

grid-template-rows: minmax(200px, 1fr)

La Cuadrícula es Responsive

Como es de esperar, la cuadrícula funciona perfectamente bien con consultas de medios, pero hay más que eso. La cuadrícula puede responder por sí misma. Hay técnicas para lograr eso, como combinar las funciones repeat() y minmax(). Por ejemplo, considere esta configuración:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}     
.grid > * {
  padding: 0.5em;
  background: #ddd;       
  height: 100px;
}

Producirá este comportamiento responsive:

Muy bien, ¿verdad? No se utiliza una sola consulta de medios. Pero lo que sucede aquí es un poco más difícil de entender, así que déjeme tratar de desglosarlo por usted:

• La función minmax establece el ancho mínimo y máximo permitido para las columnas, en este caso, 240px y 1fr.
• Y el valor auto-fit en la función de repetición está obligando al navegador a agregar tantas columnas en una fila y luego también abarcarlas un poco para ajustarse exactamente al espacio.

¿Desea aprender más?

Por favor, eche un vistazo a estos recursos útiles:

• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/
• https://developer.mozilla.org/en-US/docs/Web/CSS/grid
• https://www.youtube.com/watch?v=7kVeCqQCxlk
• https://cssgrid.io/

Conclusión

Para los desarrolladores web no es ningún secreto que la estructura del contenido de la página web ha sido un gran problema desde el comienzo de la web. En los primeros días, algo tan simple como mostrar varios elementos uno al lado del otro solo se podía lograr con tablas, pero las tablas se volvieron inútiles en la era móvil.

La aparición de CSS significó un gran avance porque vino con más herramientas para el diseño como flotantes, bloques en línea, posicionamiento relativo/absoluto y más tarde Flexbox. Pero ninguna de estas herramientas o técnicas funciona bien en situaciones más difíciles. Por esta razón, se inventó la cuadrícula: para resolver estos problemas de diseño sin hacks HTML o Javascript.