Search code examples
htmlcssbootstrap-4flexboxbootstrap-5

How to make 2 squares next to eachother one exists out of columns and rows

i want to make a website with a gallery block but i can't get it working. I only want to use Bootstrap with this and my custom css just for the finishing touches. So i want 2 squares next to eachother, left square needs to be 2 columns and 2 rows and the right square needs to be as big as the left square. Like the photo

I tried different approaches with flex box etc, i cant get it working as it should be

Screenshot of what i want

Solution

  • Try this example:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example bd-example-row">
    <!-- Example Code -->

    <div class="container text-center">
      <div class="row">
        <div class="col">
          <div class="col">Cell 1</div>
          <br />
          <div class="col">Cell 2</div>
        </div>

        <div class="col">
          <div class="col">Cell 3</div>
          <br />
          <div class="col">Cell 4</div>
        </div>
        <div class="col"></div>
      </div>
    </div>

    <!-- End Example Code -->
  </body>
</html>