products gap

Author Posts


hi please open above image
. this is element that name is columns-4. as you can see it include of products that attached to it . i want increas gaps between products . i tried it but it will send last product to next line . i want products be in 4 columns with 2px gap between products image


Hey Mohammad,

I couldn’t open the image file. It says it’s been deleted. However, when it comes to troubleshooting CSS issues, a link to the page you’re working on is much more useful because it allows me to view the HTML and existing CSS rules, and then provide very specific advice on what you need to do.

You can send the link privately via my contact form if you prefer.

If the site isn’t online yet, I can try to guess at what’s going on from your description. It may be that the current layout is using float or flexbox with flex-wrap set to wrap. So instead, use Microthemer’s CSS grid options to set a 4 column grid on the element with the class “columns-4”. If you use the drag and drop grid controls, this should set “display: grid” and set the column widths to “1fr”. That way, the items should not wrap over multiple rows. Instead, they should shrink to fit the available space.

Without viewing the page, I can’t really say for sure what’s going on though.



i upload it in several uploadcenter



Thanks for that. So if you like to work directly with code, I recommend removing the current code shown in your screenshot and replacing it with:

.columns-4 {
	display: grid;
	column-gap: 2px;
	row-gap: 2px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto;

The following screenshot shows how this code should layout the items:

CSS grid for 4 columns

The following screenshot shows how to create this layout using the drag and drop CSS grid controls:

Microthemer CSS grid controls

If this doesn’t work for some reason, you may need to make sure you are targeting the direct parent of the items you want in a grid (rather than a higher up parent). That’s because CSS grid alignment only applies to direct child elements.

Let me know if this helps!



it works perfectly thanks alot


Excellent, thanks for confirming.

You must login or register to reply to this topic.