Replicate The Grid In Pro Grid Element

[whitemedia]

Hi,

I currently have a The Grid grid on one of my pages. The Grid scales perfectly on all screen sizes and keeps its 1:1 aspect ratio and gaps between grid cells. The row is full-width. (see screenshot)

I have tried to replicate The Grid layout with Pro’s grid element, but cannot get the same visual effect. The gaps between each cell vary with screen size and I cannot get it to keep the 1:1 aspect, especially on large screens.

Is there a way to replicate The Grid layouts in Pro’s grid element?

Thanks,
Christopher

[tristup]

Hi Christopher,

Thanks for reaching out.
I would suggest you try the effect module on the Headline element, specifically the interaction effect will help you achieve the animation you are expecting.

Please find the detailed documentation on Effect Module: https://theme.co/docs/effects-module

Hope it helps.
Thanks

[whitemedia]

Hi Tristup,

It is not the headline animation I am worried about. It is the grid cells themselves. I am trying to make the Pro grid look like the The Grid above it on different screen sizes. Notice how The Grid scales and keeps each cell square. Pro grid does not do this and overflows. I would like to try to get the Pro grid mirroring the other one.

Thanks,
Christopher

[tristup]

Hi Christopher,

You can arrange the Grid cells by mentioning the number of Cells to be shown in the specific screen size. In the given screenshot it shows the 2 Cells in the desktop whereas it shows the 4 Cells in tab.

I would also suggest you go through the following article on Grid and Cells and specifically the CELL PLACEMENT CONTROLS.

Grid | Themeco Docs

Hope it helps.
Thanks

[whitemedia]

Thanks, but the main issue is still present. I have set the grid to be as follows:

• Desktop: 3 cells wide
• Laptop: 3 cells wide
• Tablet: 3 cells wide
• Tablet portrait: 2 cells wide
• Mobile: 2 cells wide

Each of the cells in each row should remain square and in proportion depending upon the screen width - just like The Grid in the section above the Pro grid.

This is how the Pro grid looks if the browser window is reduced:

I want it to look like The Grid version here:

In the mobile version, this is how the Pro grid is rendering, with most of the cells overflowing:

This is the mobile version from The Grid, which is how I want the Pro grid to look:

Thanks,
Christopher

[christian]

Hey Christopher,

I’m blocked from your website. I don’t need to log in though but next time, please disable IP blockers temporarily for us to investigate as using VPN is not part of our support service.

The reason why the cells are overflowing is that they have a set Minimum Width and Height. To fix that, set those to 0 first.

Setting a minimum width is not a good option to set a structure to the cells. To maintain that almost square cells. Use the Cell’s Top Padding and set a percent value like 50%.

That will, of course, push the Cell’s contents down so you need to add a Div element to each Cell and insert your Headline to the Div element. The Div element has a Position option so you can set it to Absolute position so it can be positioned anywhere in the cell without taking up space.

The value of 50% will make the div with the headline be off center so you will need to go to the Div’s Effects and put in translateY(-50%) in the Transform field.

That will keep the Div with Headline centered at any screen size.

Desktop:

Tablet:

Phone:

Hope that helps.

[whitemedia]

Hi @christian,

I cannot thank you enough for such a detailed and perfect run through. It does everything I was trying to achieve, except one thing!

How can I the keep the cells square (1:1 ratio)? Everything else works so perfectly.

I am learning so much from you guys!
Christopher

P.S. There are no blocks on the website, except directory protection (secure note), so you should be able to login fine.

[christian]

Hey @whitemedia,

It is the padding that controls the Cell’s aspect ratio so you can try increasing 50% to 100%.

Hope that helps.

[Phidias]

Worked perfectly. Your help has been exceptional, thank you!

[prakash_s]

Hello, @Phidias,

Glad that we were able to help you. Please feel free to reach us if have any more query regarding our theme and theme settings.

Have a great day!
Thanks