Having issue with grid layout

[SardaukarWI]

I recently started working on Here Kitty Kitty (herekittykitty) and I'm making good progress so far, but I'm having trouble with the layout. UI Layouts are always a pain for me.

The game supports up to 6 players sitting around a central pool of cats that can be moved onto and off their property. I'm trying to use a grid-layout where the <div>s will span over multiple rows of the grid by adding "grid-row-start" and "grid-row-end" in the style/css to create a more visually pleasing view of the game. But the grid span doesn't seem to be working. The objects are only present in the first value specified and don't flow into the next row.

I've tried some other layout ideas, but the grid layout seems to be the most promising, so I'm hoping someone has experience with it and can tell me what I'm doing wrong. I've tried just using "grid-row: 2 / 3", "grid-row-start: 2" with "grid-row-end: 3", and "grid-row-start: 2" with "grid-row-end: span 2" but none are working. In this example, the referenced <div> just appears in row 2. In the meantime, I'll probably continue with other aspects of the game, like rotating boards and selecting and moving cats.

Thanks.

[Victoria_La]

Not sure what are trying to achive? I run your game and it seems working. If you want span 2 rows you add +2 to the first number
Here you kitty table spans 2 rows. You want to see the grid - click on "grid" keyword in elemtns view in debug tools - it will highlight the grid

Code: Select all

.tableCenter {
    grid-column: 2;
    grid-row-start: 2;
    grid-row-end: 4;
    width: 300px;
}

[SardaukarWI]

Thanks. +2 was what I needed. I was putting the end value for the row I wanted it to expand into, not the first row not to be in. Now it looks much better. I have some other adjustments to make, but the overall table layout it right now.