Question 73060 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Bootstrap with grid layout gets unnecessary spacing in 3 columns – Reactjs

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?

Tags:

3

Answers


  1. 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/

    Login or Signup to reply.
  2. 0

    You’re looking for Masonry layout

    Bootstrap Masonry

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

    Login or Signup to reply.
  3. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search