Back to portfolio

Grid systems

in web design

A visual demonstration of the CSS Grid's capabilities for graphic designers, typographers and programmers.

Grid and design philosophy

From Grid Systems by Josef Müller-Brockmann

The use of the grid as an ordering system is the expression of a certain mental attitude inasmuch as it shows that the designer conceives his work in terms that are constructive and oriented to the future.

This is the expression of a professional ethos: the designer's work should have the clearly intelligible, objective, functional and aesthetic quality of mathematical thinking.

[The designer's] work should thus be a contribution to general culture and itself form part of it.

Constructive design which is capable of analysis and reproduction can influence and enhance the taste of a society and the way it conceives forms and colours. Design which is objective, committed to the common weal,

well composed and refined constitutes the basis of democratic behavior. Constructivist design means the conversion of design laws into practical solutions. Work done systematically and in accordance with strict formal principles makes those demands for directness, intelligibility, and the integration of all factors which are vital in sociopolitical life.

Working with the grid means submitting to laws of universal validity.

Every visual creative work is a manifestation of the character of the designer. It is a reflection of [the designer's] knowledge, ability, and mentality.

The use of the grid system implies:

the will to systematize, to clarify

the will to penetrate to the essentials, to concentrate

the will to cultivate objectivity instead of subjectivity

the will to rationalize the creative and technical production processes

the will to integrate elements of colour, form, and material

the will to achieve architectural dominion over surface and space

the will to adopt a positive, forward-looking attitude

the recognition of the importance of work devised in a constructive and creative spirit

Thank you for reading


Grids serve as powerful design tools for solving visual problems. CSS Grid offers a simple and powerful method to quickly organize site content in accordance with conventional design principles.

Mastering CSS grid affords designers the luxury of developing the presentation of webpages with an unprecedented and unrivaled level of control. I've benefitted enormously from my basic utilization of grid systems in CSS and highly recommend developers of all skill levels consider utilizing it in future projects.


Learn CSS Grid