To appreciate the importance of grids think about how you read a newspaper or walk around a city. A grid creates visual rhythm that helps us navigate space and content. What is a grid system and why do we need one?Ī grid is a system for organising content within space – that could be a printed page, screen or the built environment. This would be our first major redesign of the web interface in twelve years and as such would be a rare opportunity to rethink how we approach layout across the wikis and, importantly, to develop a grid system. Luckily, when I joined the Foundation, one of my first projects was working on the visual design for the Desktop Improvements project. There were later attempts to introduce a grid system, which was implemented to our Content Translation project, but to retrofit a grid to already existing projects would have been a major undertaking, so that grid was not applied globally.

Back then there were limited methods to apply layout grid systems on the web – both CSS Grid and Flexbox were still in the early stages of development and not well supported – so it is not surprising that a grid system was not implemented as part of this release. Indeed when I started in early 2021, the last release of a new ‘ skin’ – the template which changes the look and feel of a Wikipedia – was Vector (now called Vector Legacy) which was deployed in 2010. Since its launch there have been relatively few major design iterations. Wikipedia launched in 2001 when the web, and certainly modern web design, was in its infancy. Without a grid system, making decisions about where items should sit on the page, and maintaining visual consistency across multiple projects would be more challenging. As a visual designer, who originally studied graphic design from a print perspective, this felt like an elementary part of our design toolkit was missing.

When I first started working at the Wikimedia Foundation I was surprised to discover that although our projects used some basic layouts, there was no underlying layout grid system. By Kieran McCann & Bárbara Martínez Introduction

Types of grid systems