CODEWITHSUNDEEP
htmlcssgridbootstrap-5
Leonid
Leonid

Reputation: 237

nested grid layout in bootstrap

I need to create a grid with two columns, on sm and larger screen the right one's width should adjust itself to its content, the left one should occupy the rest of the space. on xs screen there are two rows

<div className='row' >
        <div className='col text-light bg-success'>
          large left column
        </div>

        <div className='col-sm-auto' >
          right column
        </div >
</div >

it looks like this on >=sm screen

enter image description here

and like this on xs screen:

enter image description here

which is exactly what I need

but if instead of plain text there's another row with two subcolumns inside right column:

<div className='row' >

        <div className='col text-light bg-success'>
          large left column
        </div>

        <div className='col-sm-auto' >
          <div className='row row-cols-sm-1' >
            <div className='col text-light bg-secondary'>subcolumn</div>
            <div className='col text-light bg-primary '>subcolumn</div>
          </div>
        </div >

      </div >

enter image description here

the right column's width now seems to be such that it could fit both subcolumns if they were in the same row. How to force the right column to adjust its width according to the widest subcolumn width?

Upvotes: 1

Views: 248

Answers (1)

Rok Benko
Rok Benko

Reputation: 22890

You don't need nested grid to achieve that. Use flex-grow-1.

See the snippet below.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class='row d-flex'>

  <div class='col-sm-auto text-light bg-success flex-grow-1'>
    large left column
  </div>

  <div class='col-sm-auto ps-sm-0'>
    <div class='text-light bg-secondary'>subcolumn</div>
    <div class='text-light bg-primary'>subcolumn subcolumn subcolumn subcolumn</div>
  </div>

</div>

Upvotes: 1

Related Questions