2

enter image description here

This is the following Container.
You have noticed that last element in the grid (Table like Structure) looks weird. YES, it looks weird because it is taking the maximum height of the element present in that row.
I just want the element to be look like...
enter image description here

Can you help me what CSS property should be used inside bodyContainer where I applied grid.
This is the CSS I have applied.

.bodyContainer{
    margin-top: 3rem;
    padding: 0rem 2rem 0rem 2rem;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    justify-content: space-between;
}
Souvik Pal
  • 43
  • 1
  • 5
  • Put the contents of the fourth column inside a wrapper `
    ` so that the border is around the desired contents and not the whole column
     – Tim R Aug 05 '23 at 06:43

1 Answers1

1

You want to add the align-items: start; style. That will tell each child to be its own natural height. The default is align-items: stretch;

jons
  • 312
  • 2
  • 10