--- id: foundation-layout title: Layout sidebar_label: Layout --- "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 color, 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 education and the effect of work devised in a constructive and creative spirit." [Grid systems in graphic design by Josef Müller-Brockmann](https://monoskop.org/images/a/a4/Mueller-Brockmann_Josef_Grid_Systems_in_Graphic_Design_Raster_Systeme_fuer_die_Visuele_Gestaltung_English_German_no_OCR.pdf) ## Grid Basics "The grid determines the constant dimensions of space. There is virtually no limit to the number of grid divisions. It may be said in general that every piece of work myst be studied very carefully so as to arrive at the specific grid network corresponding to its requirements. The rule: The fewer the differences in the size of the illustrations, the quieter the impression created by the design . As a controlling system the grid makes it easier to give the surface or space a rational organization. Such a system of arrangement compiles the designer to be honest in his use of design resources. It requires him to come to terms with the problem in hand and to analyse it. It fosters analytical thinking and given these solution of the problem a logical and material basis. If the text and pictures are arranges systematically the prioritise stand out more clearly. A suitable grid in visual design makes it easier: - to construct the argument objectively with the means of visual communication - to construct the text and illustrative material systematically and logically - to organize the text and illustrations in a compact arrangement with its own rhythm - to put together the visual material so that it is readily intelligible and structured with a high degree of tension" [Grid systems in graphic design by Josef Müller-Brockmann](https://monoskop.org/images/a/a4/Mueller-Brockmann_Josef_Grid_Systems_in_Graphic_Design_Raster_Systeme_fuer_die_Visuele_Gestaltung_English_German_no_OCR.pdf) ## How It works Grid systems in graphic design was published in 1981. That's three years before the Macintosh, and the start of mainstream graphic computer interfaces. These rules come from [International Typographic Style](http://smearedblackink.com/swiss_style_timeline/) that was birthed in Switzerland in the late 1940's. Yet they hold true for today. We aim to have a systematic approach to layout with in SimSpace. That the space surrounding every Component has mean. We start with 2px not 1px because it produces numbers that evenly divide in half continuously. Ultimately we are bound by what what we can display on a screen. Our smallest unit being 1px. Building from 2px, we move up to 4px, and then to our primary base, 8px. 8px is really the base unit of spacing. Two buttons in a row will have 8px of spacing: