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?

Hi @Spikatrix, I'll try to understand it, but can you give a sample use of masonry on my given code snippet? I tried to use it, it works well in lg screen, but in xs, some of the components gets left behind floating at my other components, in short, something went wrong when I use it in small screen size, a sample code of use of it without issue will really help and appreciated. — Dylan
– Dylan, Commented Mar 24, 2023 at 17:17

Seto · Accepted Answer · 2023-03-20 16:30:11Z

0

You're looking for Masonry layout

Bootstrap Masonry

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

answered Mar 20, 2023 at 16:30

Seto

11 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Dylan Over a year ago

but how can I use it on my current setup?

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

JPGalacgac · Accepted Answer · 2023-03-20 19:50:53Z

0

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>

answered Mar 20, 2023 at 19:50

JPGalacgac

12 bronze badges

1 Comment

Dylan Over a year ago

If I do this, the grid won't be aligned for the smaller screen. it's going to be a c b instead of a b c

jxmked · Accepted Answer · 2023-04-05 16:33:32Z

0

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/

edited Apr 5, 2023 at 16:33

answered Mar 20, 2023 at 12:28

jxmked

11 bronze badge

2 Comments

Spikatrix Over a year ago

Link only answers are discouraged in Stack Overflow. Please include the relevant parts of the link in your answer.

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Bootstrap with grid layout gets unnecessary spacing in 3 columns

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related