Modified Don’t Overthink It Grids and Styling

[David_Leitch]

Recently, I’ve been using Chris Coyier’s [Don’t Overthink It Grids](https://css-tricks.com/dont-overthink-it-grids/ “https://css-tricks.com/dont-overthink-it-grids/”) as my grid template, as shown [here](http://codepen.io/David_Leitch/pen/kHEmg “http://codepen.io/David_Leitch/pen/kHEmg”). Unfortunately, this approach actually doesn’t produce the correct widths. As shown in my example, the left column is narrower than the right (the squares’ heights/widths are the same ration, thus if the left is shorter, then the left column is narrower).

This is remedied with [Matt Berridge’s fix](https://css-tricks.com/dont-overthink-it-grids/#comment-187333 “https://css-tricks.com/dont-overthink-it-grids/#comment-187333”) as show [here](http://codepen.io/David_Leitch/pen/IxBho “http://codepen.io/David_Leitch/pen/IxBho”), but this fix introduces another problem. In the fix, the grid is positioned using a negative left margin, with the first column’s left padding pushing back into place. This means that any styling applied to the grid(such as borders or backgrounds) show this extra padding on the left.

Is there any way to correctly position the grid without showing the padding on the left, while maintaining the correct widths? Or, is there any way to hide (?) the left padding of the first column?

[Andy Howells]

It’s the padding right on the last-of-type that’s causing the problem.

I assume you added the padding to the others?

[David_Leitch]

Thanks for the input, Andy. I understand that in the first grid it’s the lack of padding on the final element that’s causing the element to be wider.

In the second grid, however, this is fixed by putting the padding on the left of the elements, then moving the entire grid left using a negative margin. The problem with this (and the problem that I’m grappling with at the moment) is that by using the negative margin and left padding together, I’m not able to effectively apply any styles. Any backgrounds or borders I place on the grid or columns shows the extra padding which is effectively outside of the grid.

Sorry if my first post (or this post) is unclear.

[uneart]

I’m having the same problem right now. Any solution on this so far?

The solution of [Matt Berridge](https://css-tricks.com/dont-overthink-it-grids/#comment-187333) did not work for me because the negative margin on .grid makes its parent element .page-wrap wider to the left. And therefore the whole thing would not centered on the page anymore but instead slightly moved to the left.

I created a quick [codepen](http://codepen.io/uneart/pen/Lonrq) with my grid. I use Chris Coyiers solution for the gutters with a padding-right. And the last column gets padding: 0.

The only problem apart from browser support (IE 8 can’t use that, right?) occurs when I would want to insert e.g. more than two 50% columns to create multiple lines.
Because then only the last item of those would get the appropriate padding:0.
I would have to wrap every few elements that add up to 100% (so every line of columns) in a .grid.

[David_Leitch]

Unfortunately, the only way that I could solve the problem was to put the whole grid in a container div, which is probably not the most semantic way to go about it. I put one together [here](http://codepen.io/David_Leitch/pen/JugAH “http://codepen.io/David_Leitch/pen/JugAH”) to show you what I mean. By using a containing div, you can give the whole grid external padding, with precisely equal columns, give it a background without showing the negative left margin and give it borders etc.

I’m still looking for better grid systems out there.

[uneart]

@David_Leitch Where would you apply your .grid-pad class then? I tried on both .container and .grid but in each case I got the result that the right column is smaller than the other because it gets padding right and left.

[Author]

Posts