Layout in web development: the CSS Grid module | Antreem
Go to blog

Layout in web development: the CSS Grid module

of reading
Massimo Artizzu
thumbnail

Over the years the contents of the world of the web have consistently evolved, both in terms of subjects and targets. Already in the ‘90s, a decade that seems like “prehistoric” times for the IT sector, it was easy to see that the presentation of contents was a fundamental part of the communication process. In a world where information is always accessible users need to be guided in getting hold of it, so that they don’t feel lost.

And right from the very start many web pages – although in a way that to the eyes of a modern user seems naive and amateur-like – tried to provide contents in a structured way, with a layout that facilitated the browsing and discoverability of the site.

Sito di Apple nel 1997
The apple.com website as it appeared in 1997

From the first attempts, based on tables (used improperly for the layout of contents and interactions in the page), awareness has grown of what needs to be done in order to reach the goals of presentation, accessibility and responsiveness.   The latest CSS evolutions can respond to all these needs, thanks to the Grid module, that will be supported by default by Chrome and Firefox as of this month.

At the next CSS Day,scheduled to take place on 17 March in Faenza, the main features of CSS Grid and its applications will be illustrated, for solving one of the oldest problems of web design – the page layout – in most of its iterations.

It is a very flexible and versatile module, able to respond to various common requirements in layout and interface development, such as:

  • Arrangement of elements aligned with predefined guides;
  • Positioning of elements in the horizontal and vertical direction;
  • Complete control over the order in the arrangement of elements;
  • Semantic development through the use of custom identification;
  • Clear approach to alignment and gutter problems.
Esempio di layout web classico
With the CSS grid module, it will be extremely simple to create layouts like this in a clean way and without any “tricks”.

It will probably be the most advanced CSS module ever created before the introduction of Houdini. But it still has a long way to go in terms of definition, development and adoption.

So, don’t miss CSS Day on 17 March, an event sponsored by Antreem.

Massimo Artizzu
Written by
Massimo Artizzu

Educated in Mathematics, but professionally adopted into programming, a passion I had since I was little. Puzzle and origami lover, rugby player for fun.