Bootstrap with grid layout gets unnecessary spacing in 3 columns

Question

I'm using a react-bootstrap package on my project,

I have a 3 <Col> component like this

<Container>
    <Row>
        <Col xs={12} lg={7}> {/* A */}
            ....
        </Col>
        <Col xs={12} lg={5}> {/* B */}
            ...
        </Col>
        <Col xs={12} lg={7}> {/* C */}
            ...
        </Col>
    </Row>
</Container>

That makes the output in LG screen similar to this

_______ _______
|     | |     |
|  A  | |  B  |
|_____| |_____|
|     |
|  C  |
|_____|

That output was okay, but the problem here is when the B component gets larger height, it will give a unnecessary spacing between Col A and Col C like this

_______ _______
|     | |     |
|  A  | |     |
|_____| |  B  |
        |     |
        |_____|
_______  
|     |
|  C  |
|_____| 

I don't want to move my C lower when the B gets taller in lg grid, what should I do?

Answer 1

I think, you are looking for Masonry CSS grid. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to completely fill the gaps.

_______ _______
|     | |     |
|  A  | |     |
|_____| |  B  |
_______ |     |
|     | |_____|
|  C  | _______
|_____| |     |
        |  D  |
        |_____|

Here some links how to implement Masonry layout to your sites.

For Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout#:~:text=Masonry%20layout%20is%20a%20layout,to%20completely%20fill%20the%20gaps.

For other browsers: https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Answer 2

You're looking for Masonry layout

Bootstrap Masonry

It works by covering vertical spaces left by uneven same-row columns.

Answer 3

Just Wrote a Pseudocode. Hope It Helps

<Container>
    <Row>
        <Col xs={6} lg={6}> {/* COLUMN 1 */}
              <Col xs={12} lg={12}> {/* A */}
              ...
              </Col>
              <Col xs={12} lg={12}> {/* C */}
              ...
              </Col>
        </Col>

        <Col xs={6} lg={6}> {/* COLUMN 2 */}
            <Col xs={12} lg={12}> {/* B */}
             ...
            </Col>
        </Col>      
    </Row>
</Container>