Limiting Grid Columns to Specific Numbers

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:
Specifically, the section labeled “Moz Pro: the proven, all-in-one SEO toolset”.

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

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

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

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.

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.

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.

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

Thank you! Much appreciated.