How to create a reactive gallery with 3 columns on large screens and 2 columns on mobile? - Html

Coolbeans
March 13, 2023
214 views
3 votes
3 Answers

Essentially, I’m trying to create an image gallery via bootstrap with 3 columns on large screens and 2 columns on mobile. I want to keep the aspect ratio of each image but have a fix width so they align within the columns. I’m a bit of a newbie but I managed to achieve the look on large screens. The issue comes when it’s on mobile. While it does follow the intended format, the last column essentially just stacks below the first column. I think I may need to redo my entire approach since I want the images to basically fill up any available space. I have tried other similar posts here but the issue is that their images have similar aspect ratios. The solution may not be bootstrap but I’m not sure exactly where to proceed.

This was my attempt:

<div class="container">
        <div class="row">
            <div class="break"></div>
            <h4 class="headline text-center">illustrations.</h4>
            <div class="break"></div>
            <div class="col-md-4 fcontainer">
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test3.jpg" alt="Test6">
                </div>
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test4.jpg" alt="Test5">
                </div>
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test6.jpg" alt="Test4">
                </div>
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test1.jpg" alt="Test3">
                </div>
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test5.jpg" alt="Test2">
                </div>
                <div class="row iframe">
                    <img class="item" src="Assets/Illustrations/Test2.jpg" alt="Test1">
                </div>
            </div>
            <--! multiply above div 2 more times for 3 columns -->
        </div>
    </div>
    <div class="break"></div>

Answers

Chosen as BEST ANSWER

I got around to exploring and this is how I achieved what I wanted. Just multiply the gallery-item div multiple times per images in the gallery.

.gallery-container{
    max-width: 86%;
    margin: 0 auto;
}
.gallery-container .gallery{
    columns: 3;
    gap: 10px;
}
@media (max-width: 600px) {
    .gallery-container .gallery {
        columns: 2 !important;
    }
}
.gallery-container .gallery img{
    width: 100%;
}
.gallery-item{
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0 0 10px 0;
}

<div class="gallery-container">
  <div class="gallery">
    <div class="gallery-item">
      <img>
    </div>
  </div>
</div>

(Edit)

This is pure css not bootstrap. hope this helps.If you have any questions comment down below.

html { font-size: 22px; }
body { padding: 1rem; }

.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}

.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr)
}
   
@media (max-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); 
}

<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>
  <div class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
</div>

For custom personalization on screen size use media queries

@media (max-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); 
}

Use col-4 for mobile display, and use col-md-6 for the other large screens display.
https://getbootstrap.com/docs/5.3/layout/grid/#grid-options

<!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-4 col-md-6">col-sm-4</div>
        <div class="col-4 col-md-6">col-sm-4</div>
        <div class="col-4 col-md-6">col-sm-4</div>

        <div class="col-4 col-md-6">col-sm-4</div>
        <div class="col-4 col-md-6">col-sm-4</div>
        <div class="col-4 col-md-6">col-sm-4</div>
      
      </div>
    </div>
    
    <!-- End Example Code -->
  </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

How to create a reactive gallery with 3 columns on large screens and 2 columns on mobile? – Html

Answers