Grids

Las rejillas (o grids) son una herramienta establecida de diseño, y los layouts de muchos sitios web modernos están basados en ellas. En este artículo vamos a echar un vistazo al diseño basado en grids y cómo podemos usar CSS para crearlos, así como las herramientas y las nuevas tecnologías que ya están a nuestra disposición en los navegadores

¿Qué es un grid layout?

Un grid es, simplemente, una colección de líneas horizontales y verticales que crean un patrón en el que podemos alinear nuestros elementos. Nos ayudan a crear diseños en donde los elementos no cambian de tamaño cuando nos movemos de una página a otra, proporcionando una mayor consistencia a nuestros sitios web.

Un grid, generalmente, consta de filas, columnas y huecos entre filas y columnas, también llamadas "gutters" (canaletas??)

[Esquema provisional, pronto lo reemplazará uno mejor]

Usando un “grid system” en tus proyectos

Para garantizar una experiencia consistente en tu sitio web o aplicación basada en un sistema de grid no necesitas pensar en el ancho que ocupa un elemento respecto a los demás. Sólo te limitas a decidir "cuántas columnas del grid ocupa dicho elemento".

Tu “grid system” consitirá en decidir, en el proceso de diseño, qué grid utilizar. Si diseñas tu aplicación en Photoshop puedes hacerlo basandote en el post de Elliot Jay Stocks "A better Photoshop grid for responsive web design".

También puedes usar un framework CSS (puedes crearlo tú mismo o usar cualquiera de los disponibles) .

Creando un framework sencillo

Vamos a empezar construyendo un simple framework de grid para tu proyecto

Actualmente la mayor parte de los grids se crean usando bloques flotantes. Si ya has leido nuestro anterior artículo sobre bloques flotantes ya conocerás la técnica para crear un layout con varias columnas (que es la base de cualquier sistema de grid).

El framework de grid más fácil de crear es el de ancho fijo — sólo necesitamos decidir el ancho total que queremos dar a nuestro diseño, elegir cuántas columnas queremos y el tamaño de los espacios entre columnas (carriles). Si por el contrario decidimos que nuestro diseño es un grid con columnas que crecen y decrecen según el tamaño del navegador, necesitamos definir el ancho de las columnas y carriles por medio de porcentajes.

Más adelante iremos viendo cómo crear ambos tipos. Crearemos un grid con 12 columnas — el tipo más común ya que se adapta muy bien a múltiples situaciones y por ser divisible entre 6, 4, 3 y 2.

Un grid sencillo con ancho fijo

Vamos a crear primero un grid con ancho fijo.

Empieza haciendo una copia local del fichero de ejemplo simple-grid.html , que contiene el siguiente código en el "body".

<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col span1">13</div>
    <div class="col span6">14</div>
    <div class="col span3">15</div>
    <div class="col span2">16</div>    
  </div>
</div>

El objtetivo es visualizar una demostración de nuestro grid mediante dos filas de doce columnas — la fila superior muestra el tamaño de cada columna, y la segunda áreas de diferente tamaño en el grid.

En el elemento <style>, debes añadir el siguiente código, que primero hace que el tamaño de todos los elementos de la página incluyan el tamaño de su borde y le da un tamaño de 980 píxeles al contenedor "wrapper", con un padding a la derecha de 20 píxeles. Esto nos deja un ancho de 960 píxeles por columna.

* { box-sizing: border-box; }
    
.wrapper {
  width: 980px;
  margin: 0 auto;
  padding-right: 20px;
}

Ahora usaremos un contenedor "row" para envolver cada fila del grid separándola del resto. Para ello añade la siguiente regla a la anterior:

.row {
  clear: both;
}

De esta forma conseguimos no tener que rellenar completamente una fila con las doce columnas. Cada fila queda separada del resto y no interfiere a las demás.

Los carriles entre columnas son de 20 píxeles de ancho. Los crearemos como un margen a la izquierda de cada columna — incluyendo la primera, para corregir los 20 píxeles de padding a la derecha que le dimos al contenedor "wrapper". Así conseguimos 12 carriles — 12 x 20 = 240.

Tenemos que restar los 240 pixeles al ancho total de 960 píxeles, con lo que nos quedan 720 para usar con nuestras columnas. Como tenemos 12, cada columna medirá 60 píxeles de ancho.

El siguiente paso es crear la clase .col,  flotando a la izquierda, con un  margin-left de 20 píxeles para crear el carril y un width de 60px. Añade la siguiente regla al final de tu CSS:

.col {
  float: left;
  margin-left: 20px;
  width: 60px;
  background: rgb(255,150,150);
}

La fila superior con las columnas individuales se mostrará claramente como un grid.

Los contenedores que deben ocupan más de una columna necesitan reglas especiales para ajustar su width al número de columnas requeridas (más los correspondientes carriles). Necesitamos crear una clase adicional para permitir tamaños de 2 hasta 12 columnas. El tamaño de cada una de elllas es el resultado de sumar el ancho del número de columnas que ocupan más los carriles entre ellas (los carriles serán siempre un número menos que el número de columnas).

Añade el siguiente código al final de tu CSS:

/* Dos columnas de ancho (120px) y un carril (20px) */
.col.span2 { width: 140px; }
/* Tres columnas de ancho (180px) y dos carriles (40px) */
.col.span3 { width: 220px; }
/* Y asi sucesivamente ... */
.col.span4 { width: 300px; }
.col.span5 { width: 380px; }
.col.span6 { width: 460px; }
.col.span7 { width: 540px; }
.col.span8 { width: 620px; }
.col.span9 { width: 700px; }
.col.span10 { width: 780px; }
.col.span11 { width: 860px; }
.col.span12 { width: 940px; }

Con estas clases ahora podemos conseguir columnas con distinto ancho en nuestro grid. Guarda el código y carga la página en tu navegador para verlo en acción.

Prueba a modificar las clases de los elementos del ejemplo, o añade o elimina algunos contenedores para ver cómo va variando su disposición. Por ejemplo, puedes cambiar el aspecto de la segunda fila de esta forma:

<div class="row">
  <div class="col span8">13</div>
  <div class="col span4">14</div>
</div>

Ahora ya tenemos un sistema de grid funcionando, simplemente define las filas y el número de columnas en cada una de ellas y rellena cada contenedor con su propio contenido. ¡Fantástico!

Creando un grid fluido

Nuestro grid funciona perfectamente, pero tiene un ancho fijo. Ahora queremos un grid flexible (fluido) cuyo tamaño crezca y disminuya según el espacio disponible en el navegador. Para conseguirlo podemos usar como referencia los píxeles de ancho actuales y convertirlos en porcentajes.

La ecuación que convierte el ancho fijo en uno flexible basado en porcentajes es la siguiente.

objetivo / contexto = resultado

Para nuestro grid fijo, nuetro "objetivo" es 60 píxeles (el ancho de una columna) y nuestro "contexto" es el ancho del contenedor principal, es decir 960 píxeles. Sustituyendo los valores en la ecuación podemos calcular el porcentaje.

60 / 960 = 0.0625

Para conseguir el porcentaje, multiplicamos por 100 (para mover el decimal dos posiciones) y obtenemos el valor 6.25%. En nuestro CSS, reemplazamos los 60 píxeles del ancho de la columna por 6.25%.

Hacemos lo mismo con el ancho de los carriles:

20 / 960 = 0.02083333333

Tenemos que reemplazar los 20 píxeles del margin-left de la clase .col, y los 20 píxeles de padding-right del .wrapper, por 2.08333333%.

Actualizando nuestro grid

Para comenzar, haz una copia de los ficheros del ejemplo anterior (o haz una copia local del siguiente fichero simple-grid-finished.html). Usaremos ese código como punto de partida.

Cambia el código CSS (de la clase .wrapper) por el siguiente:

.wrapper {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
  padding-right: 2.08333333%;
}

No sólo hemos cambiado el width fijo por un porcentaje, también hemos añadido la propiedad {cssxref("max-width")}} para impedir que el ancho del layout sea demasiado grande.

Después, cambia el CSS de la cuarta regla (la clase .col) por este:

.col {
  float: left;
  margin-left: 2.08333333%;
  width: 6.25%;
  background: rgb(255,150,150);
}

Ahora llega una parte un poco más laboriosa — hay que actualizar todas las reglas .col.span para cambiar los anchos en píxeles por porcentajes. Esto lleva un poca más de tiempo con la calculadora; para ahorrarte este esfuerzo, hemos hecho el trabajo por ti.

Actualiza el bloque de CSS del final por el siguiente:

/* Dos columnas de ancho (12.5%) y un carril (2.08333333%) */
.col.span2 { width: 14.58333333%; }
/* Tres columnas de ancho (18.75%) y dos carriles (4.1666666) */
.col.span3 { width: 22.91666666%; }
/* Y así sucesivamente... */
.col.span4 { width: 31.24999999%; }
.col.span5 { width: 39.58333332%; }
.col.span6 { width: 47.91666665%; }
.col.span7 { width: 56.24999998%; }
.col.span8 { width: 64.58333331%; }
.col.span9 { width: 72.91666664%; }
.col.span10 { width: 81.24999997%; }
.col.span11 { width: 89.5833333%; }
.col.span12 { width: 97.91666663%; }

Guarda tu código, ábrelo en un navegador y cambia el tamaño de la pantalla — verás cómo el ancho de las columnas se ajustan perfectamente. ¡Genial!

Easier calculations using the calc() function

You could use the calc() function to do the math right inside your CSS — this allows you to insert simple mathematical equations into your CSS values, to calculate what a value should be. It is especially useful when there is complex math to be done, and you can even compute a calculation that uses different units, for example "I want this element's height to always be 100% of its parent's height, minus 50px". See this example from a MediaRecorder API tutorial.

Anyway, back to our grids! Any column that spans more than one column of our grid has a total width of 6.25% multiplied by the number of columns spanned plus 2.08333333% multiplied by the number of gutters (which will always be the number of columns minus 1). The calc() function allows us to do this calculation right inside the width value, so for any item spanning 4 columns we can do this, for example:

.col.span4 {
  width: calc((6.25%*4) + (2.08333333%*3));
}

Try replacing your bottom block of rules with the following, then reload it in the browser to see if you get the same result:

.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }

Semantic versus “un-semantic” grid systems

Adding classes to your markup to define layout means that your content and markup becomes tied to its visual presentation. You will sometimes hear this use of CSS classes described as being “un-semantic” — describing how the content looks — rather than a semantic use of classes that describes the content. This is the case with our span2, span3, etc., classes.

These are not the only approach. You could instead decide on your grid and then add the sizing information to the rules for existing semantic classes. For example, if you had a <div> with a class of content on it that you wanted to span 8 columns, you could copy across the width from the span8 class, giving you a rule like so:

.content {
  width: calc((6.25%*8) + (2.08333333%*7));
}

Enabling offset containers in our grid

The grid we have created works well as long as we want to start all of the containers flush with the left hand side of the grid. If we wanted to leave a gap before the first container — or between containers — we would need to create an offset class to add a left margin to our site to push it across the grid visually. More math!

Let's try this out.

Start with your previous code, or use our fluid-grid.html file as a starting point.

Let's create a class in our CSS that will offset a container element by one column width. Add the following to the bottom of your CSS:

.offset-by-one {
  margin-left: calc(6.25% + (2.08333333%*2));
}

Or if you are prefer to calculate the percentages yourself, use this one:

.offset-by-one {
  margin-left: 10.41666666%;
}

You can now add this class to any container you want, to leave a one column width gap on the left hand side of it. For example, if you have this in your HTML:

<div class="col span6">14</div>

Try replacing it with

<div class="col span5 offset-by-one">14</div>

Try loading and refreshing to see the difference, or check out our fluid-grid-offset.html example (see it running live also). The finished example should look like this:

Floated grid limitations

When using a system like this you do need to take care that your total widths add up correctly, and that you don’t include elements in a row that span more columns than the row can contain. Due to the way floats work, if your total width becomes wider than 100% the excess items will drop onto the next line.

If the content of the elements pushes them to become wider this will also make the total width more than 100% and the same thing will happen.

The container <div> with a class of row helps to prevent our design falling into chaos should our lines not add up neatly to 100% but you do need to do a fair amount of managing of the grid when using this method. Commonly you would use media queries to create a different layout at narrower breakpoints to ensure that you don’t have the issue of the grid pushing too wide.

An additional limitation of this system is that it is essentially one dimensional. We are dealing with columns, and spanning elements across columns, but not rows. It is very difficult with these older layout methods to control the height of elements without explicitly setting a height, and this is a very inflexible approach too — it only works if you can guarantee that your content will be a certain height.

Flexbox grids?

If you read our previous article about flexbox you might think that flexbox is the ideal solution for creating a grid system. There are currently any number of flexbox-based grid systems available and flexbox can solve many of the issues that we’ve already discovered when creating our grid above.

However, flexbox was never designed as a grid system and poses a new set of challenges when used as one. As a simple example of this, we can take the same example markup we used above and use the following CSS to style the wrapper, row, and col classes:

.wrapper {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
  padding-right: 2.08333333%;
}

.row {
  display: flex;
}

.col {
  margin-left: 2.08333333%;
  margin-bottom: 1em;
  width: 6.25%;
  flex: 1 1 auto;
  background: rgb(255,150,150);
}

You can try making these replacements in your own example, or look at our flexbox-grid.html example code (see it running live also).

Here we are turning each row into a flex container. With a flexbox-based grid we still need rows in order to allow us to have elements that add up to less than 100%. We set that container to display: flex.

On .col we set the flex property's first value (flex-grow) to 1 so our items can grow, the second value (flex-shrink) to 1 so the items can shrink, and the third value (flex-basis) to auto. As our element has a width set, auto will use that width as the flex-basis value.

On the top line we get twelve neat boxes on the grid and they grow and shrink equally as we change the viewport width. On the next line however we only have four items and these also grow and shrink from that 60px basis. With only four of them they can grow a lot more than the items in the row above, the result being that they all occupy the same width on the second row.

To fix this we still need to include our span classes to provide a width that will replace the value used by flex-basis for that element.

They also don’t respect the grid used by the items above because they don’t know anything about it.

Flexbox is one-dimensional by design. It deals with a single dimension, that of a row or a column. We can’t create a strict grid for columns and rows, meaning that if are to use flexbox for our grid we still need to calculate percentages as for the floated layout.

In your project you might still choose to use a flexbox ‘grid’ due to the additional alignment and space distribution capabilities flexbox provides over floats. You should however be aware that you are still using a tool for something other than what it was designed for. So you may feel like it is making you jump through additional hoops to get the end result you want.

Third party grid systems

Now that we understand the math behind our grid calculations, we are in a good place to look at some of the third party grid systems in common use. If you search for "CSS Grid framework" on the Web you will find a huge list of options to choose from. Popular frameworks such as Bootstrap and Foundation include a grid system. There are also standalone grid systems, either developed using CSS or using preprocessors.

Let's take a look at one of these standalone systems as it demonstrates common techniques for working with a grid framework. The grid we will be using is part of Skeleton, a simple CSS framework.

To get started visit the Skeleton website, and choose "Download" to download the ZIP file. Unzip this, and copy the skeleton.css and normalize.css files into a new directory.

Make a copy of our html-skeleton.html file and save it in the same directory as the skeleton and normalize CSS.

Include the skeleton and normalize CSS in the HTML page, by adding the following to its head:

<link href="normalize.css" rel="stylesheet">
<link href="skeleton.css" rel="stylesheet">

Skeleton includes more than a grid system — it also contains CSS for typography and other page elements that you can use as a starting point. We’ll leave these at the defaults for now however — it’s the grid we are really interested in here.

We will use similar HTML to our earlier example. Add the following into your HTML body:

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col">13</div>
    <div class="col">14</div>
    <div class="col">15</div>
    <div class="col">16</div>   
  </div>
</div>

To start using Skeleton we need to give the wrapper <div> a class of container — this is already included in our HTML. This centers the content with a maximum width of 960 pixels. You can see how the boxes now never become wider than 960 pixels.

You can take a look in the skeleton.css file to see the CSS that is used when we apply this class. The <div> is centred using auto left and right margins, and a padding of 20 pixels is applied left and right. Skeleton also sets the box-sizing property to border-box like we did earlier, so the padding and borders of this element will be included in the total width.

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

Elements can only be part of the grid if they are inside a row, so as with our earlier example we need an additional <div> or other element with a class of row nested between the content <div> and our actual content container <div>s. We've done this already as well.

Now let's lay out the container boxes. Skeleton is based on a 12 column grid. The top line boxes all need classes of one column to make them span one column.

Add these now, as shown in the following snippet:

<div class="container">
  <div class="row">
    <div class="col one column">1</div>
    <div class="col one column">2</div>        
    <div class="col one column">3</div>
    /* and so on */
  </div>
</div>

Next, give the containers on the second row classes explaining the number of columns they should span, like so:

<div class="row">
  <div class="col one column">13</div>
  <div class="col six columns">14</div>
  <div class="col three columns">15</div>
  <div class="col two columns">16</div>   
</div>

Try saving your HTML file and loading it in your browser to see the effect.

If you look in the skeleton.css file you can see how this works. For example, Skeleton has the following defined to style elements with “three columns” classes added to them.

.three.columns { width: 22%; }

All Skeleton (or any other grid framework) is doing is setting up predefined classes that you can use by adding them to your markup. It’s exactly the same as if you did the work of calculating these percentages yourself.

As you can see, we need to write very little CSS when using Skeleton. It deals with all of the floating for us when we add classes to our markup. It is this ability to hand responsibility for layout over to something else that makes using a framework for a grid system a compelling choice!

Skeleton is a simpler grid system than some of the frameworks you may come across. The grids in large frameworks such as Bootstrap and Foundation offer more functionality and additional breakpoints for various screen widths. However they all work in a similar way — by adding specific classes to your markup you can control how the element is laid out using the predefined grid.

Native CSS Grids with Grid Layout

We said at the beginning of this article that CSS has not previously had a real system for creating grid layouts, but this is set to change. While we can’t use a native CSS grid system yet, in the coming year we should see browser support appear for the CSS Grid Layout Module.

Currently you can only use the technique we’ll be showing you in browsers that are implementing CSS Grid Layout “behind a flag” — meaning it is currently implemented, but in an experimental state that you need to switch on to use.

In Firefox, for example, you need to navigate to a URL of about:config, search for the layout.css.grid.enabled preference, and double click it to enable CSS Grids. You cna find out how to use it in other browsers by visiting Grid by Example.

We looked at the Skeleton Grid framework above — like other third party Grids and even hand-built grids, it requires that you add <div>s to form rows, and then specify the number of columns the items in these rows will span.  

With CSS Grid Layout you can specify your grid entirely in CSS, without needing to add these helper classes to the markup at all. Let’s take our simple example and see how we would create that same layout using CSS Grid Layout.

Building a native grid

First, get started by making a local copy of the css-grid.html file. It contains the following markup:

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">9</div>
  <div class="col">10</div>
  <div class="col">11</div>
  <div class="col">12</div>
  <div class="col">13</div>
  <div class="col span6">14</div>
  <div class="col span3">15</div>
  <div class="col span2">16</div>       
</div>

This time we have a parent <div> with a class of wrapper, and then all of the child elements just appear directly inside the wrapper — no row elements. We have added a class to the items that should span more than one column.

Now add the following into the <style> element:

.wrapper {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
}

.col {
  background: rgb(255,150,150);
}

Here we set the .wrapper rule so it is 90% of the body width, centered, and has a max-width of 960px.

Now for the CSS grid properites. We can declare a grid using the grid value of the display property, set up a gutter with the grid-gap property and then create a grid of 12 equal width columns using grid-template-columns, the new repeat() function, and a new unit defined for grid layout — the fr unit.

The fr unit is a fraction unit — it describes a fraction of the available space in the grid container. If all columns are 1fr, they will each take up an equal amount of space. This removes the need to figure out percentages to create a flexible grid.

Having created a grid, the grid auto-placement rules will immediately lay out our boxes on this grid and we get a twelve column flexible grid layout.

To style the containers that span multiple column tracks on the grid we can use the grid-column property. To span 6 columns for example:

.span6 {
  grid-column: auto / span 6;
}

To span 3:

.span3 {
  grid-column: auto / span 3;
}

The value before the forward slash is the start line — in this case we are not explicitly setting that and allowing the browser to place the item on the next available line. We can then set it to span 6, 3 or however many lines we want.

Add the following at the bottom of your CSS:

.span2 { grid-column: auto / span 2;}
.span3 { grid-column: auto / span 3;}
.span4 { grid-column: auto / span 4;}
.span5 { grid-column: auto / span 5;}
.span6 { grid-column: auto / span 6;}
.span7 { grid-column: auto / span 7;}
.span8 { grid-column: auto / span 8;}
.span9 { grid-column: auto / span 9;}
.span10 { grid-column: auto / span 10;}
.span11 { grid-column: auto / span 11;}
.span12 { grid-column: auto / span 12;}

Try saving and refreshing, and you'll see that the containers span multiple columns as appropriate. Cool!

CSS grids are two-dimensional, so as the layout grows and shrinks the elements remain lined up horizontally and vertically.

You can test this by replacing your last 4 col <div>s with the following:

<div class="col">13some<br>content</div>
<div class="col span6">14this<br>is<br>more<br>content</div>
<div class="col span3">15this<br>is<br>less</div>
<div class="col span2">16</div>

Here we've deliberately added in some line break (<br>) tags to force some of the columns to become taller than others. If you try saving and refreshing, you'll see that the columns adjust their height to be as tall as the tallest container, so everything stays neat and tidy.

The final layout looks like so:

Other nice CSS grid features

With CSS grids, we don’t need to push things along by way of margins to offset them. Trying making these changes in your CSS:

.content {
  grid-column: 2 / 8;
}

<div class="col span2 content">16</div>

Container 16 will now span columns 2 to 8, on the next available row where it can fit.

We can span rows just as easily as columns:

.content {
  grid-column: 2 / 8;
  grid-row: 3 / 5;
}

Container 16 will now span rows 3 to 5, as well as columns 2 to 8.

We also don’t need to use a margin to fake gutters or calculate their widths explicitly — CSS grid has this functionality built right in with the grid-gap property.

We’re just touching the surface of what is possible with CSS Grid Layout, but the key thing to understand in the context of this article is that you don’t need to create a grid system with grid - it is one. You can write CSS that places an item directly onto a predefined grid. This is the first time it has been possible with CSS, and this will get a lot more use once browser support solidifies.

Summary

Having read this article you should now have an understanding of how grid layouts, and grid frameworks work in CSS. You have also had a peek into the future off CSS grids, and should now understand that the grid frameworks we use today are essentially a stopgap solution until we have a widely supported native way of achieving this in CSS.