CSS grid with 2 blank spaces on the left with remaining frames wrapping?

Hi there,

I have the following CSS:

display: grid;
grid-template-columns: 1fr 1fr repeat(2, 1fr);
grid-gap:10px;

What I am trying to do is have a grid of 2 rows and 4 columns, so 8 frames in total, but i would like the first 2 on the top left to be blank so I can insert text.

So basically, it would have 2 blank frames, 2 products/filled frames to the right of the blank frames, and then 4 products/frames underneath.

This is what the CSS is outputting at the moment.

I can’t seem to get it onto a fiddle as it’s a WordPress site.

Any ideas how I can modify the CSS to achieve this? I also don’t have access to the HTML so I can only use CSS.

Thanks!

You haven’t specified rows in your grid CSS.

I can’t seem to get it onto a fiddle as it’s a WordPress site.

We just need the basic HTML and CSS you’re working with. Either paste an HTML file here (with embedded CSS) or maybe knock up something on CodePen. :slight_smile:

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