Layout scenarios for a grid

[Braveheart4]

I’m basically creating my own simple grid, where I would like to cover the following scenarios:

1. Different number of grid items per viewport.
2. Offsetting and centering grid items.
3. Making guterless grid items for special cases.
4. Making full-width grid container.

The design scenarios that I would like to cover are the following:

While it’s easy to simply lay out the grid and include content in it, things get more complicated like for instance when I want to remove the gutter and want to display an image that goes half the width of the grid, or especially when that half is not a half of the grid container, but half of the entire screen.

How do you approach these cases? Here is my current CodePen thus far.

[PaulOB]

The first thing you want to do is use the box-sizing:border-box model as your columns are wrapping to the next line due to the width and the padding you are adding.

If your gutters are created with padding you can set negative margins on elements that you want to overlap the gutters assuming you are consistent throughout. The negative margins though would need to be placed on the inner element (your .box elements) as it won’t work on the flex items themselves as they have width applied.

I’m not a fan of grids because I look at your drawing and that sort of structure can be created in 15 mins or so from scratch without the need for a grid. I suppose its ok if you are always going to be designing those ‘blocky’ type of layouts but I always find that it takes longer to bend a grid for the exceptions than it does to code it from scratch.

That doesn’t mean that you shouldn’t perhaps create a set of templates that can serve as a starter for projects but trying to make something that caters for everything whether you need it or not always seems like overkill to me

However. others do love grids so I suppose it’s down to personal preference and whatever suits the way you work.

[Braveheart4]

I see. Thanks for the advices.

I did, however, found my own solution to these edge-case scenarios. I won’t use gutless variation of the grid, as these kind of CSS rule I can set in the very component styling. That way I simplify my grid to the following rules:

<div class="grid">
  <div class="grid__item">
    <!-- Components go here -->
  </div>
</div>

Now the only problem arises when a component consists of a number of columns which have their own margins. That way if I apply margins/paddings to the component columns, they go a bit off the grid. Nested grids would make the same issue of doubling the margins/paddings. I assume there are many workarounds to this problem.

Here is my simplified grid so far.