Hello, this post will try to explain why bleed on CSS grids is bad.

For anybody who's not familiar with the concept of bleed, it's the space (typically padding) applied on a container so that its content doesn't touch the edges. This is not to be confused with gutter, which is the space between content columns.

Of course there are many scenarios where this is completely legit and necessary design-wise, since space gives air to breathe and improves the overall experience. Especially on mobile we should never see any text touching the edges of the device, as this would be a very bad UX (this is not always true for images).

Now, the problem comes when we nest a bleeding grid inside another, and we get an annoying indenting of the elements. To better explain this concept, please take a look at this illustration:

  | main grid |
  | a nested grid |
    | another nested grid |

As you can see, each time we nest a grid inside another, the content is pushed towards the right (or left, if it was rtl). This is very annoying because it's almost never the desired/expected result and it needs to be reset manually.

To all the Grid Makers, I suggest 3 solutions:

  1. Do not add bleed by default
  2. Reset bleed for nested grids
  3. Create helpers (classes/mixins) to add/remove the bleed
  4. (bonus) Change the class name .row to .grid

Thank you


312 0 0