`CSS gallery that adjusts its layout after a certain number of rows`

Question

`CSS gallery that adjusts its layout after a certain number of rows`

My goal is to create a responsive gallery following this tutorial. Here is my attempt on codesandbox.io

However, I'm facing an issue where only four columns are shown instead of the expected five. The image below illustrates the problem:

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

Code CSS (media query not included)

#gallery {
  line-height: 0;
  -webkit-column-count: 5; /* split it into 5 columns */
  -webkit-column-gap: 5px; /* give it a 5px gap between columns */
  -moz-column-count: 5;
  -moz-column-gap: 5px;
  column-count: 5;
  column-gap: 5px;
}

#gallery img {
  width: 100% !important;
  height: auto !important;
  margin-bottom: 5px; /* to match column gap */
}

HTML

<body>
<div id="gallery">
  
   <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
   <!-- More images here -->

  </div>
 
 </body>

If you have any insights or solutions, please share them. Appreciate your help.

//EDIT I came across what seems like a great gallery example at https://codepen.io/maxvoltar/pen/eYOPdMG

html css responsive image-gallery

Answer 1

Answer №1

Although I'm not entirely sure why the grid is causing issues in this particular scenario, I managed to resolve the problem by making some adjustments to your HTML and CSS for better specificity.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Image Gallery</title>
    <meta name="description" content="Responsive Image Gallery" />
    <meta name="author" content="Tim Wells" />
    <link rel="stylesheet" href="/src/styles.css" />
    <style type="text/css"></style>
  </head>
  <body>
    <div id="gallery">
      <div class="combo">
        <img
          src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
        />
        <img
          src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
        />
      </div>
      ... <!-- More image combos -->
    </div>
  </body>
</html>

CSS

#gallery {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}

#gallery img {
  object-fit: contain;
  width: 100%;
  padding-bottom: 2px;
}

.combo {
  margin: 0;
  padding: 0 2px;
  width: 50%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

@media only screen and (min-width: 760px) {
  .combo {
    width: 33%;
  }
}

@media only screen and (min-width: 1200px) {
  .combo {
    width: 20%;
  }
}

Instead of using grid for containers with an unknown number of items, I recommend using flexbox, especially when dealing with responsiveness.

Grid works best for a fixed number of specific items that need to be positioned responsively.

It's also important to set a maximum width for your container unless there is a specific reason not to do so.

You can view the updated sandbox with flexbox and width constraints here.

Answer 2

Although I'm not entirely sure why the grid is causing issues in this particular scenario, I managed to resolve the problem by making some adjustments to your HTML and CSS for better specificity.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Image Gallery</title>
    <meta name="description" content="Responsive Image Gallery" />
    <meta name="author" content="Tim Wells" />
    <link rel="stylesheet" href="/src/styles.css" />
    <style type="text/css"></style>
  </head>
  <body>
    <div id="gallery">
      <div class="combo">
        <img
          src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
        />
        <img
          src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
        />
      </div>
      ... <!-- More image combos -->
    </div>
  </body>
</html>

CSS

#gallery {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}

#gallery img {
  object-fit: contain;
  width: 100%;
  padding-bottom: 2px;
}

.combo {
  margin: 0;
  padding: 0 2px;
  width: 50%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

@media only screen and (min-width: 760px) {
  .combo {
    width: 33%;
  }
}

@media only screen and (min-width: 1200px) {
  .combo {
    width: 20%;
  }
}

Instead of using grid for containers with an unknown number of items, I recommend using flexbox, especially when dealing with responsiveness.

Grid works best for a fixed number of specific items that need to be positioned responsively.

It's also important to set a maximum width for your container unless there is a specific reason not to do so.

You can view the updated sandbox with flexbox and width constraints here.

Answer 3

Answer №2

The tutorial's layout is determined by the number and dimensions of the images, with columns stacking vertically to display the content. In this example, 24 images (both small and big) are used in the tutorial.

By adding two more images, you can see the layout adjust accordingly when viewing the code in full screen mode on a high-resolution display with five columns.

#gallery {
  line-height: 0;
  -webkit-column-count: 5; /* split it into 5 columns */
  -webkit-column-gap: 5px; /* give it a 5px gap between columns */
  -moz-column-count: 5;
  -moz-column-gap: 5px;
  column-count: 5;
  column-gap: 5px;
}

#gallery img {
  width: 100% !important;
  height: auto !important;
  margin-bottom: 5px; /* to match column gap */
}

@media (max-width: 1200px) {
  #gallery {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #gallery {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Image Gallery</title>
    <meta name="description" content="Responsive Image Gallery" />
    <meta name="author" content="Tim Wells" />

    <style type="text/css"></style>
  </head>


  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Image Gallery</title>
    <meta name="description" content="Responsive Image Gallery" />
    <meta name="author" content="Tim Wells" />
    <link rel="stylesheet" href="/src/styles.css" />
    <style type="text/css"></style>
  </head>
  <body>
    <div id="gallery">
      [insert image URLs here]
    </div>
  </body>
</html>

To potentially address any layout issues, consider utilizing flexbox along with modifying the HTML structure accordingly.

Answer 4

The tutorial's layout is determined by the number and dimensions of the images, with columns stacking vertically to display the content. In this example, 24 images (both small and big) are used in the tutorial.

By adding two more images, you can see the layout adjust accordingly when viewing the code in full screen mode on a high-resolution display with five columns.

#gallery {
  line-height: 0;
  -webkit-column-count: 5; /* split it into 5 columns */
  -webkit-column-gap: 5px; /* give it a 5px gap between columns */
  -moz-column-count: 5;
  -moz-column-gap: 5px;
  column-count: 5;
  column-gap: 5px;
}

#gallery img {
  width: 100% !important;
  height: auto !important;
  margin-bottom: 5px; /* to match column gap */
}

@media (max-width: 1200px) {
  #gallery {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #gallery {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Image Gallery</title>
    <meta name="description" content="Responsive Image Gallery" />
    <meta name="author" content="Tim Wells" />

    <style type="text/css"></style>
  </head>


  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Image Gallery</title>
    <meta name="description" content="Responsive Image Gallery" />
    <meta name="author" content="Tim Wells" />
    <link rel="stylesheet" href="/src/styles.css" />
    <style type="text/css"></style>
  </head>
  <body>
    <div id="gallery">
      [insert image URLs here]
    </div>
  </body>
</html>

To potentially address any layout issues, consider utilizing flexbox along with modifying the HTML structure accordingly.

`CSS gallery that adjusts its layout after a certain number of rows`

Answer №1

Answer №2

Similar questions

What is the best way to display a webpage within an iOS app using PhoneGap?

Troubleshooting: Why is my CSS background image URL not displaying?

Unable to Toggle the 'Checked' Prop on Selection with React Bootstrap CheckBox

Is it possible to have the cells in a grid adjust and fill the available space when the size of the grid changes?

Customizing the image border at the top of the navigation bar

What is the best way to implement ajax loading on scroll?

Repeatedly tapping the Bootstrap Dropdown option

JavaScript prohibiting input prior to execution

Inverting the hierarchy of a tree structure

Display only the selected index and conceal the rest

Having trouble implementing button functionality in a web app using JS, jQuery, HTML, and CSS along with an API integration

Duplicate text content from a mirrored textarea and save to clipboard

Arrangement containing 4 separate div elements - 2 divs are fixed in size, 1 div adjusts dynamically (without scroll), and the remaining div fills the

Managing the Fullscreen Feature of HTML5 Video

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

"Utilizing the appendTo attribute in primeNG within a ContextMenu component - A step-by-step guide

The carousel feature in Angular JS is malfunctioning

Adjusting the size of an image and its accompanying span within the container div

Is it possible to modify the default name from "choose file" to "upload file" while maintaining the same functionality in AngularJS?

Conceal hyperlink repeatedly using jQuery