CSS Grid - Design Help

Design help General
1

I have this design to implement but my CSS skills are from 2014! I’m helping out my son and for the last 8 years I’ve been doing native mobile dev.

ProductPageDesign
ProductPageDesign1146×631 284 KB

Is that design a single CSS Grid where the image on the left and the text and shopping elements on the right are spanning multiple columns and rows? Or is it an image, a 2 col grid and a DIV Block inside a single FlexBox?

The ReadOnly link below shows my attempt so far.

Thanks

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

HI @PatLong how I see it you have some basic done. If I can add some my thoughts how I will create structure for this design. You can create everything with Flex only or with combination of Grid and flex. One approach can be …

  • section container - block
    • section wrapper - grid repeat(3, 1fr)
      • div_1 - block (main image) (cover)
        • Image
      • div_2 - block
        • Collection - flex wrap / minmax
          • collection item
      • div_3 - flex
        • card items

Keep in mind that this is only basic structure and you will need to set grid eg. tablet 2fr and mobile 1fr etc

3

Sorry but when you say “repeat(3, 1fr)” how does that translate to WebFlow UI? Is that Simply 3 cols?

And the “minmax” on the Collection, what does that mean?

Thanks for everything so far

4

HI @PatLong Sorry for strict description as I didn’t had much time. Yes in code “repeat(3, 1fr)” is identical set Grid 3 col by clicking in WF to create 3 cols. These cols will have identical width but you can set their width by value of any relative unit that will suite you.

When you set Flex wrap you can set with minmax that image in your set of images take eg. 50% of one row this mean that there will be 2 images per row and rest will wrap under and so on.

5

The smaller wrapping images\collection items are currently behaving with the wrap by themselves i.e. without the 50% minmax

6

Hi @PatLong yes they do as images are I presume identical W/H (I can’t check dimensions in collection). By explicit instruction 50% you can prevent any problems if client would not pay attention to images optimisation etc. But it is up to you how you will set it up, I have only mentioned as I will thing about structure and settings.

1 Like
7

So I’m just looking at how to sort it on Mobile Landscape and Portrait and I see that the Grid gets it’s column width changed from 1FR to 450PX

Why’s that? I assume I should be setting width to 1FR

Here’s the ReadOnly Link

Read Only Link

8

Hi @PatLong it is because you have explicitly set width 450px. You can set it to 1fr or set your values with min/max

CleanShot 2021-10-27 at 23.52.16

9

I have absolutely no recollection of doing that :slight_smile:

10

but someone had to do that, ask your son. :upside_down_face:

11

lol there is no way i’d let him near the site :slight_smile:

1 Like
12

hi @PatLong do you need further assistance with your request?

13

No, I’m all good. Thanks

14

HI @PatLong that’s good news. So feel free to close your request as solved.

15

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