Grid layout broken while image size different..

3 replies · opened Apr 7, 2019

Jjavck2Apr 7, 2019

This page should have 4 column per row.
While images size different , the second row miss one column with blank..

How to fix it?

Page url:http://yyt.digivast.net/articles/cgys/31
PS: I fix the problem by modify all image to same size , but I want to know any chance to fix it without modify image.

SSemicolon WebSTAFFApr 7, 2019

Hello,

This is Definitely Possible! You can simply add the data-layout="fitRows" attribute to the .grid-container Element.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Jjavck2Apr 25, 2019

Hello,

I have added the data-layout attribute in the div tag as you said.

But seems have same problems as below.

attachment

This is the website url:http://yyt.digivast.net/articles/cgys/32

Please give me some advice. Thanks~

SSemicolon WebSTAFFApr 25, 2019

Hello,

This actually is not an Issue. While the Height of the Items in the Grid is same, you will need to use the Images in same heights in order to make the Grid Images equal. The Size of the Images cannot be controlled in this way and will appear distorted if modified using CSS.

So, the solution would be to use Equal Sized Images.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard