Index


Sí, la redundancia es intencional. Y por si queda alguna duda, lo repetimos. “Únicamente una sola”. Ahora que ha quedado claro, vamos ello, hablemos del grid.

Todo diseño web que se precie tiene un grid definido. Puede tener más o menos columnas. Con o sin gap. Puede ser un grid inusual o uno de 12 columnas al uso. Pero todo diseño web tiene, al menos, un grid definido. Es de las primeras clases de todo curso de diseño web que se precie.

Y si nos atenemos a los sitios de marketing, nos encontramos con un enfoque conservador en cuanto al grid, donde casi la gran mayoría recurre siempre a las 12 columnas.

En este contexto, la pregunta que se hace The System es la siguiente. Si la gran mayoría de los diseños sobre los que trabajamos tienen un único grid sobre el que se basan casi todas las composiciones del diseño, ¿por qué en nuestra construcción en Webflow creamos clases independientes cada vez que tenemos una nueva composición con columnas? La respuesta no es clara, pero la verdad es que este enfoque abre la posibilidad a que cada composición en columnas tenga unas características distintas sin relación entre ellas. Perdiéndose así el orden subyacente y placer visual que otorga el grid.

Por este motivo en The System todos los layouts que respondan al grid, se basan en un único grid global. Este grid está definido como un clase estructural.

Beneficios de usar un grid global

Modificación y ampliación del grid

El grid predefinido en The System puede no estar alineado cono el diseño con el que vayamos a trabajar. En estos casos, podemos modificar el número de columnas y el gap por defecto de nuestro grid.

Puede ocurrir también, que el diseño con el que trabajamos tengas más de un grid. En ese caso basta con crear tantos grid como se incluyan en el diseño. Aunque la verdad, para sitios de marketing, encontrar dos o más grid as algo casi sobrenatural.

Gap: espacio entre contiguos