A designer told me my CSS grid had too many columns and I got defensive until I actually tried it

I was building out a product catalog page for a client and had like 8 columns in my grid because I wanted to show 4 different breakpoints with all these gaps. This senior designer I work with took one look and said 'your grid is fighting itself, drop it to 3 max and use subgrid for the inner stuff.' I figured it would break everything but I tried it on a test branch and it actually made the whole layout way cleaner, especially on tablet. Has anyone else gotten feedback that forced them to simplify their grid approach?

3 comments

3 Comments

amy_reed793d ago

I agree that cutting columns helps, but I think "3 or 4" can be a little too rigid depending on the content. If you're doing a simple blog layout, 3 works great, but for product grids or dashboards, 4 or even 5 with careful spacing can still be clean. It's more about how you use the spacing than the exact number.

wadepalmer3d ago

Yeah cut those columns down to 3 or 4 and let subgrid handle the rest. Once you stop fighting the layout and let the browser do its thing, everything just snaps into place.

-1

willow_anderson853d ago

Wait, are you saying I spent three days wrestling with 12 columns and a million media queries for nothing?