Confusion about Grid Cells

[kgpthemex]

Hi,

I’m working with the CSS Grid element inside Cornerstone. I’m very new to the element.

Here’s a sample layout:

• grid-template-columns: 20% 30% 30% 20%
• grid-template-rows: repeat(4, 20vh)

The result would be a grid consisting of 16 children cells.

The problem I discovered later is that when working with grid element in raw HTML (without a builder like cornerstone), when using the above specs, it doesn’t produce 16 additional elements inside the main grid element.

But when working with Cornerstone, there are 16 additional div elements that make up individual cells. The problem is, when I combine cells, it produces a single cell from the combines cells, making the individual cells unnecessary and pushes them down. Here’s the same example shown visually:

Showing a grid consisting of 16 cells.

Grid with combined cells to make up 5 large cells:

5 cells are supposed to be made from all 16 cells:

But combining the cells creates 5 major cells and leaves 11 cells empty and unused:

I’m not sure how to resolve this. The 16 cells were supposed to be used in their entirety. What am I missing?

Any help will be appreciated!

Thank you!

[ruenel]

Hello @kgpthemex,

Thanks for writing in!

You do not need to insert 16 Cells. All you need is only 5 Cells.

Just position the cells in the desired order that you want.

Perhaps, this video tutorial can help you understand how you can work on the Grid element.

• https://www.youtube.com/watch?v=QdT7DeH2HAk&list=PLWPh_GoP7hYXHrOv3sYUNQ5mVeApTnkO2&index=3

Best Regards.

[kgpthemex]

@ruenel,

Thank you. Now I understand. I made the mistake of thinking the “cells” as actual grid cells but the “cells”, in this context, are simply content cells. When you specify the column template and rows, Cornerstone creates the rows and lines, even though you don’t see them.

Thanks again!

[tristup]

Hi @kgpthemex,

Glad that we are able to help you.

Thanks