Today I came across a very interesting problem while creating a mockup for a news website.
For my responsive website, I am using a 12-column grid based on the Bootstrap template.
I have a row, where the 2-column grid will have a 6px padding while the 4-column grid will have a 12px padding.
See the illustration below.
The ideal approach is to set a standard padding for both columns either 6pixels or 12pixels for all sides (top, right, bottom, left).
However, a 6px padding will fit the 2col but is too thin for the 4col. While a 12px padding is too tight for a 4col and is just right for a 4column in terms of the text that can fit in it.
If you notice closely, I could also have set the top padding uniform at 6px. But this means that for my 4col, I can set it at 12px left and right padding, but the top will have 6px. This will align with the 6px top padding for the 2col next to it. See below.
In the end, I went with the first illustration, where 2col will have padding:6px 6px;, and the 4col will have padding:12px 12px;.
Why? It is not aligned on top
This is the approach that for me fails less. Visually I am happier with keeping the padding in one column uniform. The elements between the columns are not aligned on top though, but I think that is fine.
Am I satisfied with this approach?
To be honest, no. 😀 This to me is still a riddle. 😀 But for now that is that.