12-6-3 Columns

columns

Contributed by Anonymous,

Implementation

Here you’ll find the code that is used to generate the layout illustrations above. As with many things in CSS, there are most likely alternative ways to achieve the same layout :)

Keep in mind: This is not a full-featured CSS library that tries to do everything. So for now, please copy, paste and modify the code for your own needs.

Why CSS attributes, not classes?

Many of the examples use a custom layout attribute to style the layout container. While this may be unfamiliar, I find it more expressive than using classes with prefixes.

If you feel uncomfortable using non-standard attributes in your HTML, feel free to change the code to use classes instead.

CSS

HTML

Layouts

About

The title for this project is the short name for “Josef”, the name of the Swiss grapic designer, typographer and teacher Josef Müller-Brockmann.

Layout is a core aspect of many design disciplines ranging from architecture to editorial design and web design. Layout in digital products, especially on the web, needs to adapt to screen sizes. CSS Grid and Flexbox are powerful and flexible tools, but they are very abstract.

By presenting the abstract codes of CSS Grid and Flexbox in a visual way, it becomes easier to understand what’s possible. A gallery of layout examples serves as inspiration and learning resource.

Contributions

Discuss how to further design and develop this project. Design and develop new layouts that are showcased on the gallery.

Github

Authors

A project by Florian Schulz, interface designer, web developer and teacher in Zurich. Supported by Andy Jakubowski, a product designer & software engineer in Berlin.