css Question posted in
Some basic documentation can be found here.

How can i expand a cell to occupy entire row in a grid structure using css?

My page looks something like

|  A  |  C  |
|-----|     |
|  B  |     |
|-----|-----|

Problem statement is how can i expand div B to occupy the entire row if the height of div A is equal to that of div C?

Basically.. structure should be like below image

|  A  |  C  |
|-----|-----|
|     B     |
|-----------|

Problem with the 1st structure is that since the div C is made by combining 2 vertical cells as a result its height becomes dynamic ( dependent on A and B) … As a result B never get the chance to expand on the entire row.

I also tried bringing C out from the grid structure so that its height becomes independent of A and B … But that also didn’t work as there will be only one column remaining so B doesn’t have any place to expand .

can someone help me on how can we achieve the desired behaviour ?

Tags:

2

Answers


  1. 0

    for item b you can add css style grid-column: 1/-1, it will let the item take width of complete row,
    ref:[https://www.w3schools.com/cssref/pr_grid-column.php][W3Schools]

    Login or Signup to reply.
  2. 0

    What you can do is defining the placement of your grid containers in order to place them exactly where you want them to be.

    In order to reach that you’ll have to define the amount of rows and columns of your grid container and then set the "grid-column-start" and grid-column-end" (for row as well) for your containers inside.

    Here is an example I created for you in Codepen so you can see what I mean.

    .container-a {
/*CENTER TEXT*/
display: flex;
justify-content: center;
align-items: center;
background-color: blue;

/*GRID STYLING*/
grid-area: 1 / 1 / 2 / 2;

    }

    Here is an example on Codepen

    the command I used there for the containers A to C, grid-area, is a combination of the two I mentioned above. The order of the numbers is always "row-start / column-start / row-end / column-end".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search