Defining the grid means creating the system to structure your content, whether it’s a single component or a page layout.

In this article, we are going to see how a grid system can be implemented, and how some CSS techniques can be used to create specific layouts.

Here’s what we will cover:1) Layout with an auto-generated number of columns — using CSS Grid;2) One-dimensional layout — using Flexbox;3) Two-dimensional layout — using CSS Grid;4) Two-dimensional layout with overlapping elements — using CSS Grid.

This article is part of a series on design systems inspired by our (upcoming) library of web components. The library relies on a solid system of CSS globals. So this is us sharing the things we’ve learned setting the global style of our library! ✌

Article Series:- Part 1: Typography- Part 2: Grid & Layout- Part 3:

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

It would be ideal to find a way to automatically determine this maximum number of items without having to add new CSS code at different media queries.

This can be done using CSS Grid.

Let’s start by creating a grid mixin (we’ll be reusing it also for the layouts 3 and 4).

This mixin is used to initialize the grid container (with display grid) and set the grid gap (which is the free space between two adjacent items).

We have included the CSS Grid code inside a @supports rule to target browsers that support the Grid (leaving out also the browsers that support the old CSS Grid specification, like IE 11).

Now we can define the mixin that will create our gallery; the min-width of the items will be the only argument of this mixin:

The minmax function allows us to set a min-width for our elements, while the repeat() function takes care of actually creating the grid.

We can now use these mixins like that:

And here’s an example of these mixins in action:

The mixins we defined above won’t work in IE and older versions of Edge (<= 15). Your gallery would still be accessible, but your items would show up one per row (100% width).

If you need to provide a better fallback, then you can use the float property to recreate your gallery, but you won’t be able to change the number of items per row at different screen sizes: you’ll need to set a fixed number of items per row (this number will be passed as the second argument to the gridAuto() mixin).

Here’s what the grid mixin becomes with the fallback addition:

The CSS properties defined inside the @supports rule are the ones applied when the browser supports CSS Grid (the new specification); while the properties defined outside the @supports are applied in all browsers (and this is why, inside the @supports rule, we had to add some additional style to overwrite those properties).

The gridAuto() mixin becomes:

The mixin now accepts two arguments: the first one is the minimum width of the items in the gallery (the same as before — it will be used only if the browsers support CSS Grid), the second (which is optional — default value is 3) is the number of items per row on browsers that do not support CSS Grid (where the fallback is applied).

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.

There are few techniques we can use to implement this kind of layout. We are going to use Flexbox in combo with utility classes to customize the items width.

This approach has been around for a long time. It’s handy, but if you don’t want to use utility classes in your HTML (something like col — 1, col — 5, …), then a different method is the one I describe in section 3, where we create the same layout using CSS Grid.

Before defining our grid classes, let’s set a variable that we will use as grid gap:

Let’s define a class for our grid container:

We initialize our flex container (using display flex) and allow the children to wrap on multiple lines if needed (using the flex-wrap property). The negative margins are added to balance the padding we use to create the grid gap (see .col class definition below) so that no empty space is left between the .flex-grid element and its container.

Our grid items will have a .col class:

We use the padding to create the gap between elements and the background-clip so that the background-color/image of the .col element is not applied to the padding (leaving the gap visible).