AdaptiveGrid - Gutter width

Hi Guys,

I’m trying to put some space between each cell, but there’s no ‘gutter width’ option?

Is there anything I can do, as I’d like to space each cell out a bit across the ‘grey’ area

, rather than being bunched up as they are?

Thanks in advance,

If I understand the question, AdaptiveGrid has a Margin checkbox (under AdaptiveGrid Style settings:
2020-01-03_13-00-07

Cheers for the reply Doug, as you can see by the attached, the margin adds to all, there’s no seperate detailed margin settings to just to left & right etc. In the pic I added a margin of 12 but it moves up & down from the container, rather than just space the cells out, hence making the content smaller.

There is no delivered setting that I’m aware of. You can try some custom CSS:

.columnInner {
	margin-left: 12px;
	margin-right: 12px;
}

Not sure what it will look like at breakpoints.

Again, thanks Doug, I’ll give that a go now :slight_smile:

As @teefers correctly says, CSS can be used to introduce some spacing between each grid item.

If you want to change the amount of spacing on different screen widths, you could use viewport width units of measurement:

.columnInner {
	margin-left: 3vw;
	margin-right: 3vw;
}

Or separate media breakpoints:

.columnInner {
	margin-left: 0px;
	margin-right: 0px;
}

@media screen and (min-width: 568px) {
    .columnInner {
	margin-left: 6px;
	margin-right: 6px;
    }
}

@media screen and (min-width: 768px) {
    .columnInner {
	margin-left: 12px;
	margin-right: 12px;
    }
}

The other option you have is to apply the left / right spacing on the stacks you are putting inside AdaptiveGrid.

I have considered putting together a new grid stack, now that Flexbox support has gone fully mainstream. I have a few basic ideas for how it should look and work. Other ideas are welcomed.

1 Like

Thanks Will, you’re a legend!!

I was a programmer in my former life (COBOL) but CSS etc. is all very new to me (as is web design), so you guys with all the expertise are invaluable!

Really appreciate your help & advice,
:slight_smile:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.