Grid or table recommendation?

Hi Tom,

Yes, Grid can do so.

You can set the Grid container width to 100% on mobile.

Ying, thanks!
Another question - how do I handle rows? Do grids have rows? Or is it 2 column grid, then a two column grid after that?

I looked - but could not find anything.

Appreciate your help!

You can use one Grid block with multiple containers.

- Grid
  -- container a-1
  -- container b-1
  -- container a-2
  -- container b-2
  -- container a-3
  -- container b-3

For example:

- On the desktop, set container a-1 to 30% width, and container b-1 to 70% width, the rest of the containers will automatically wrap to the next row.

- On the mobile, set all containers to 100% width, they will stack.

Will try this - thanks Ying!

No problem :)

When I have a 2 column grid:
30%[A-1 Week 1:] | 70%[A-2 one sentence description here]
30%[B-1 Week 2:] | 70% [B-2 one sentence description here]

I get this when mobile:
[A-1 Week 1:]
[B-1 Week 2:]
[A-2 one sentence description here]
[B-2 one sentence description here]

When I WANT this:
[A-1 Week 1:]
[A-2 one sentence description here]
[B-2 Week 2:]
[B-2 one sentence description here]

https://imgur.com/WXp8KBD

I hope this is a clear explanation of what I am getting.

Should I be using a discreet grid for each entry to get what I want?

[GRID A-1 | A-2]
[GRID B-1 | B-2]

I re-read your post and think I understand what I did will try it again!

Let us know if you run into any trouble :)

Apologies Ying -

I cannot figure out how to do this within the single grid (like your illustration above).
- Grid (1)
-- container a-1
-- container b-1
-- container a-2
-- container b-2
-- container a-3
-- container b-3

I can only seem to get it to work when I have a SEPARATE grid for every pair

Grid (1) -> A1 | A2
Grid (2) -> B1 | B2
Grid (3) -> C1 | C2
and so on.

Any help is appreciate - sorry I'm not getting it!

I cannot figure out how to do this within the single grid (like your illustration above).

What is the thing you can't figure out?

Is that how to add extra containers to the grid?

If you select container a-1, click on the +icon of its floating tool bar, it will duplicate a new container a-1 for you.
check the gif here: https://docs.generateblocks.com/article/grid-overview/#grid-items-with-same-or-similar-styles

If you run into difficulties, please let me know what it is so I can help you more efficiently :)

Perfect! I was not understanding how to ADD other containers other than the initial screen of choices.

The sample GIF's illustrated it exactly.

Thank you YING!

Awesome :)

Glad to hear that!

Ying,
I created two grids - each with multiple containers - using your advice. In one grid I styled each container separately. But it was time consuming.

I want to now create a style that adds a bottom border and a right border to each container within the grid.

I tried this (added style to advanced CSS):
.gb-grid-wrapper>gb.grid-column>.gb-container .border-test {
background-color: var(--base);
border-right-style: solid;
border-right-width: 4px;
border-bottom-style: solid;
border-bottom-width: 4px;
border-color: #ff9900;
}

Then added the .border-test to the grid "Advanced CSS" box. But it did not work.

Any hints are appreciated.
Thank you!

If you have GB pro, there's a feature that allows you to copy the style of one block and paste the style to another block which is really an efficient tool.

Then added the .border-test to the grid “Advanced CSS” box. But it did not work.

Make sure it's only border-test being added to the additional CSS class field, do NOT include the . :)