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?

See [masonry](https://getbootstrap.com/docs/5.0/examples/masonry/) — Spikatrix, Mar 19 '23 at 15:38
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, Mar 24 '23 at 17:17

jxmked · Answer 1 · 2023-04-05T16:33:32.443

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 05 '23 at 16:33

answered Mar 20 '23 at 12:28

jxmked

1
1

Link only answers are discouraged in Stack Overflow. Please include the relevant parts of the link in your answer. – Spikatrix Mar 24 '23 at 08:02
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](/help/how-to-answer). – Community Mar 25 '23 at 07:03

score 0 · Answer 2 · answered Mar 20 '23 at 16:30

0

You're looking for Masonry layout

Bootstrap Masonry

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

answered Mar 20 '23 at 16:30

Seto

1
1

but how can I use it on my current setup? – Dylan Mar 25 '23 at 16:30
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](/help/how-to-answer). – Community Mar 26 '23 at 08:24

score 0 · Answer 3 · answered Mar 20 '23 at 19:50

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>

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 — Dylan, Mar 21 '23 at 02:29

Bootstrap with grid layout gets unnecessary spacing in 3 columns

3 Answers3