Using the grid for this issue

Hi,

I am very impressed with the new ‘grid’ option. I have a wish for a responsive page that I would like to create with the grid. Example as a jpg attached.

In the middle there is a product picture with numbers that are highlighted. The text around give a small subscription of these highlights.

I am not sure how to start setting up the grid for this problem. Maybe it’s too complicated (I’m not a code writer - unfortunately) If it is possible, could you please help me with the start - how to set up the grid and place the elements in it? How do I calculate the several fractions of the grid f.i.

That would be great. Thanks.

Thank you so much in advance.
liesbeth

Hi Liesbeth,

Thank you for writing in, its a bit complicated but you can achieve that with Grid element, first is mark up your layout, as I can see some of your content span to two cells, I think a 5 columns (1fr 1fr 1fr 1fr 1f) will do, use the Grid editor (purple button) to layout your Grid (watch this tutorial here if you had not yet.)

That image in the middle can be achieved by overlapping the cell.

Grid Element: Overlapping Content Layout (Advanced)
Grid Element: Cell Placement & Overlapping Content (Intermediate)

Hope it helps,
Cheers!

Hi, thanks for your help. I did watch these movies and I thought I needed 5 columns either. But with the responsiveness I lost the way a bit. Perhaps it is just a matter of try and error with this?

I thought it might be about the way to look on the wanted outcome, and than calculate the fractions and overlap. Like on the youtube movies. Perhaps Kory could make a video about this - just the steps before putting the elements to the grid ? The way to think. That would help.

But thanks anyway for helping me out here.
Have a great day!

Thanks again.

Hi @lvandeemter,

Yeah, that is true, especially that you’re still learning around the CSS grid spec. One thing about Grid Element is you can reorder and resize the cell per breakpoints, like that image, you put in the middle on desktop view and then re-order it to the top on the mobile view, you can do that with Grid Element without using any Hide element feature.

I think your layout has similarities to the Mosaic Layout demo in some way, please review that video it might give you a better idea.

Grid Element: Mosaic Layout (Advanced)

Thanks,

1 Like

thanks again. I will go for it :slight_smile:

You are most welcome!

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