What is the most effective way to line up three square images, with one being larger than the other two, and positioning the larger one to the left of the two smaller ones stacked on top of each other?

Question

What is the most effective way to line up three square images, with one being larger than the other two, and positioning the larger one to the left of the two smaller ones stacked on top of each other?

Currently, I am struggling with arranging three square images on a webpage. The larger image should measure 800 x 800 pixels and be positioned to the left, while the two smaller images, each measuring 400 x 400 pixels, should stack vertically to the right of the larger image.

To give you a better understanding, here is an illustration:

https://i.sstatic.net/Ocspo.jpg

The HTML code using Bootstrap 4 that I have implemented looks like this:

<div class="container">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-7">
                <img src="modernforms/src/img/main.jpg" width=700 height=700 />
            </div>
            <div class="col-lg-5">
                <img src="modernforms/src/img/side.jpg" width=350 height=350 />
                <img src="modernforms/src/img/sidetwo.jpg" width="350" height="350" />
            </div>
        </div>
    </div>

However, my main challenge lies in ensuring that this layout remains user-friendly when viewed on mobile devices. Ideally, I would like the squares to become full width col-12, stacking on top of one another, but I am unable to achieve this effect. Is there a misunderstanding on my part, or is it simply impossible? Any guidance would be greatly appreciated. Thank you.

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

To create a layout with one row containing 2 columns, you can nest another row in the second column with two images each taking up the full width. It's recommended to remove the width and height attributes from the images and rely on the col classes for sizing. Additionally, consider adding img-fluid class to the image for better resizing.

<div class="row">

 <div class="col-12 col-lg-7">
   <img src="big picture here" />
 </div>

 <div class="col-12 col-lg-5">
   <div class="row">

     <div class="col-12">
       <img src="small image 1 here"/>
     </div>
     <div class="col-12">
       <img src="small image 2 here"/>
     </div>

   </div> <!-- end of nested row-->
  </div>
</div> <!-- end of main row -->

Answer 2

To create a layout with one row containing 2 columns, you can nest another row in the second column with two images each taking up the full width. It's recommended to remove the width and height attributes from the images and rely on the col classes for sizing. Additionally, consider adding img-fluid class to the image for better resizing.

<div class="row">

 <div class="col-12 col-lg-7">
   <img src="big picture here" />
 </div>

 <div class="col-12 col-lg-5">
   <div class="row">

     <div class="col-12">
       <img src="small image 1 here"/>
     </div>
     <div class="col-12">
       <img src="small image 2 here"/>
     </div>

   </div> <!-- end of nested row-->
  </div>
</div> <!-- end of main row -->

Answer 3

Answer №2

If you're looking to simplify your design by removing some of the complexity of Bootstrap, you can achieve this easily using CSS grid. For example, creating a 2x2 grid where the first image spans two rows while the others only occupy one row for the desktop version.

For mobile, simply adjust the grid structure to 1x1 so that all images are stacked vertically. Here's an example:

body{
  margin: 0;
  overflow-y: auto;
  height: 100vh;

  --grid-columns: 1fr 1fr;
  --grid-rows: 1fr 1fr;
}

img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  min-height: 300px;
}

.grid-container{
  height: 100%;
  display: grid;
  grid-template-rows: var(--grid-rows);
  grid-template-columns: var(--grid-columns);
}

.big-img{
  grid-row: span 2;
  grid-column: 1;
}

@media only screen and (max-width: 768px) {
  body {
    --grid-columns: 1fr;
    --grid-rows: 1fr;
  }
}

<div class="grid-container">
      <img class="big-img" src="https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
      <img src="https://www.thewowstyle.com/wp-content/uploads/2015/02/Beautiful-Wallpapers-14.jpg" alt="">
      <img src="https://thumbs.dreamstime.com/b/beautiful-dandelion-flower-flying-feathers-colorful-bokeh-background-macro-shot-summer-nature-scene-beautiful-dandelion-147400154.jpg" alt="">
  </div>

Answer 4

If you're looking to simplify your design by removing some of the complexity of Bootstrap, you can achieve this easily using CSS grid. For example, creating a 2x2 grid where the first image spans two rows while the others only occupy one row for the desktop version.

For mobile, simply adjust the grid structure to 1x1 so that all images are stacked vertically. Here's an example:

body{
  margin: 0;
  overflow-y: auto;
  height: 100vh;

  --grid-columns: 1fr 1fr;
  --grid-rows: 1fr 1fr;
}

img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  min-height: 300px;
}

.grid-container{
  height: 100%;
  display: grid;
  grid-template-rows: var(--grid-rows);
  grid-template-columns: var(--grid-columns);
}

.big-img{
  grid-row: span 2;
  grid-column: 1;
}

@media only screen and (max-width: 768px) {
  body {
    --grid-columns: 1fr;
    --grid-rows: 1fr;
  }
}

<div class="grid-container">
      <img class="big-img" src="https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
      <img src="https://www.thewowstyle.com/wp-content/uploads/2015/02/Beautiful-Wallpapers-14.jpg" alt="">
      <img src="https://thumbs.dreamstime.com/b/beautiful-dandelion-flower-flying-feathers-colorful-bokeh-background-macro-shot-summer-nature-scene-beautiful-dandelion-147400154.jpg" alt="">
  </div>

What is the most effective way to line up three square images, with one being larger than the other two, and positioning the larger one to the left of the two smaller ones stacked on top of each other?

Answer №1

Answer №2

Similar questions

The margin-left and margin-right in HTML CSS are not cooperating to center a div

Nuxt.js implemented with Auth using jwt refresh tokens

When jQuery fails to detach() due to the presence of an input tag

Is it possible for me to connect one element to another using CSS or JavaScript?

Tips for updating the css class for multiple DOM elements using jQuery

What is the best way to send an email with a randomly generated HTML output using a <button>?

Navigate to the specific page using the router-link with the designated path

The function view() is not displaying the CSS and JS files properly

PHP failing to forward HTML form responses via email

Troubleshooting HTML Output Display Issues

Do not trigger mouseleave events when absolute positioned elements have overlapping layers

Add a variety of images

Tips for utilizing the JQuery feature to clear input text

The menu shifts the remaining parts of the page downwards as it expands

What are the best techniques for resizing a bar graph column to perfectly and proportionally match its container size?

Scrape embedded content within an IFrame on a webpage with Java

Problem with Bootstrap 4 layout in Firefox - works fine, but not displaying correctly in

Design the title attribute for the style area tag

Adding a .PHP File to Two Separate DIVs

Display the closing tag depending on specific conditions to simulate the behavior of a calendar