Limiting Grid Columns to Specific Numbers

Design help Layout & Design
1

Hi everyone,

I am trying to create a grid that only allows 1, 2 or 4 columns.

In a mobile format I set the grid to be vertical, so this is no problem.

But in a desktop format, at certain widths, the grid will become three columns which creates an unaesthetic appearance. I’ve attached a screenshot of the site at such a width to show what I mean.

I have tried dividing the elements into two div boxes and putting those in the grid.
While that does technically limit the columns to 2 or 4, it comes with several other visual issues.

I would greatly appreciate any advice.

For reference, the effect I am attempting to achieve is essentially the one on this website: https://moz.com/
Specifically, the section labeled “Moz Pro: the proven, all-in-one SEO toolset”.

Here is my site Read-Only: (Webflow - SECENG Site 1)

Webflow Site Issue
Webflow Site Issue1167×1032 109 KB

Here is my site Read-Only: (Webflow - SECENG Site 1)

2

If you want to control the number of columns the easiest way is to just specify the number of columns. It can be reconfigured at each breakpoint.

Here’s a 4-col layout

image
image1652×827 180 KB

3

Thanks memetican.

The problem I have is that within the initial desktop breakpoint there are screen sizes where the grid elements become too thin. Because of this, I would prefer that it change from 4 in a row to 2 rows of 2.

I am able to achieve this effect for the most part. However, I want to eliminate the in-between effect of 3 elements in the upper row and 1 in the lower.

4

The approach I showed you is how you control that.

You can do a 4 col grid on desktop, then switch it to 2 at mobile. Or do 2 x 2 everywhere, it doesn’t matter.

If you look at my example, I’ve set both the number of columns and sized all of them at 1fr.

5

I understand that I can have different number of columns in different breakpoints.

The problem is with different screen sizes in the same breakpoint.

At full width, still in the initial desktop breakpoint, I want there to be four columns.

At narrow screen widths, still in the initial desktop breakpoint, I want 2 rows of 2.

6

Ah, Webflow’s breakpoints are pre-set, and fixed.
However there’s nothing to stop you from creating your own breakpoints using custom CSS.

In your case here’s what I’d do;

  • Create your 4 col layout on desktop
  • Create your 2 col layout on tablet
  • Publish and look at the CSS while in tablet width. You’ll see the exact media breakpoint CSS being used at tablet, to override the desktop styles.
  • Copy that, paste it into an HTML embed
  • Change the media widths to whatever size you want it to take effect
7

Thank you! Much appreciated.