Create your design system, part 2: Grid & Layout

Claudia Romano
Jul 25, 2018 · 9 min read

1 — Layout with an auto-generated number of columns

Let’s say you have a gallery of products you want to lay out in a grid: all your items need to have the same width (they are instances of the same ‘product’ component, so they have the same dimension) and have a minimum width so that the design does not break; assume you want, at different screen sizes, the maximum number of items per row; something like the CodyHouse library (resize the page to see the change in number of items).

2— One-dimensional layout

This is probably the easiest layout we can create: we have items we want to arrange in columns, with the option of customizing their width and still being able to distribute the space among them equally.

3 — Two-dimensional layout

In layout 2, we considered the case where we needed to control the width of the elements in our row. We didn’t consider the height of the elements at all.

4 — Two-dimensional layout with overlapping elements

This is quite a specific layout case: let’s say you want to create a two-dimensional layout (as we did with case 3 where you can set both width and height of your items) but you want to control the start/end position of your elements as well (so that they can overlap).


CodyHouse

Web design nuggets

Claudia Romano

Written by

Web Developer. Co-founder of @CodyWebHouse and @nucleoapp

CodyHouse

CodyHouse

Web design nuggets