CSS grid with Oxygen not stretching

Hey Mulyani,

Apologies for the slow reply, I’m currently on holiday and have only just found some time to reply.

It’s hard to diagnose this without inspecting the actual page, so if you could post a link that would help. But for now, first guess is that you might need to set width to 100% via the All tab on the CSS grid options. That way, the elements should fill the grid tracks you set, rather than being a fixed width, which might be the case.

The MT-Oxygen video demonstrates using the All tab of the grid options: https://youtu.be/wLWeo5MpYPY?t=108

I hope that helps.

Cheers,
Sebastian

Thanks for sharing a link to the page. I can see that the issue is due to Oxygen’s flexbox styling combing with your grid styles to create unexpected results. To solve this, I recommend resetting the default flexbox styling.

The problem styles are being applied to the parent of the grid container, which has an id of #div_block-882-5, and the following class that adds the flexbox styles:

.ct-div-block {
    flex-direction: column;
    align-items: flex-start;
}

It adds some others, but those two styles are the ones we need to override. You can use MT’s visual targeting to target the parent of the grid container; the HTML pane, breadcrumbs, or directional arrows may help with that. Or you can use the following custom selector (which you can add to a folder in the selectors menu).

#div_block-882-5.ct-div-block {
    flex-direction: row;
    align-items: normal;
}

You set the two flexbox properties (flex-direction and align-items) via the MT UI fields, or by copying and pasting the above code into the code editor (to the left of the Font property group). The id and class selector above ensures you only override the default Oxygen styling for this specific case, not all elements with the class “ct-div-block”.

Once you have overridden those styles, your grid child elements should fit the 2fr grid tracks you defined.

Does that make sense and seem doable?

Thanks,
Sebastian