Is there a way to make bootstrap grid span multiple rows?

Question

It spans rows columns, but how do I make bootstrap 5 span multiple rows? I want to make a collage with images, and I would like the collage to look like this:

https://i.stack.imgur.com/JjnF0.png

(guess I don't have a good reputation yet...)

But anyhow, this is the code I have:

<div class="container">
            <div class="row">
                <div>
                    <img src="flowers.jpg" alt="placeholder">
                </div>
                <div>
                    <img src="flowers.jpg" alt="placeholder">
                </div>
                <div>
                    <img src="flowers.jpg" alt="placeholder">
                </div>
            </div>
            <div>
                <img src="flowers.jpg" alt="placeholder">
            </div>
            <div>
                <img src="flowers.jpg" alt="placeholder">
            </div>
        </div>

It's set up to make a grid but... I can't seem to figure out how to make some of the elements span multiple rows. Why columns and not rows?

Answer 1

There are different ways to achieve something like this. There are these I use quite a lot.

• You can create a column which contains more than one row

  <div class="container">
    <div class="row">
      <div class="col">Outer row 1, column 1 - spans two rows (column 2 has two rows)</div>
      <div class="col">
        <div class="row">
          <div class="col">Inner row 1, column 1</div>
          <div class="col">Inner row 1, column 2</div>
        </div>
        <div class="row">
          <div class="col">Inner row 2, column 1</div>
          <div class="col">Inner row 2, column 2</div>
          <div class="col">Inner row 2, column 3</div>
        </div>
      </div>
      <div class="col">Outer row 1, column 3 - spans two rows (column 2 has two rows)</div>
    </div>
  </div>
  

• You can use the row-cols-* classes

  <div class="container">
    <div class="row row-cols-2">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>
  

Of course, you can use col-*-* to specify how exactly you want your columns to look and behave. There are lots of examples and useful info in the official grid system documentation.