Looking for advice on designing a unique Gallery layout using CSS?

Question

Looking for advice on designing a unique Gallery layout using CSS?

Tasked with converting various layouts, some of which utilize a specific layout pattern (refer to the image below.) I'm seeking advice on the most efficient way to use CSS to display a list of images in this manner without dividing items into separate row containers. There must be a method to achieve this as a list.

The main challenge lies in properly spacing the images and aligning the far right image with the edge of the layout container (indicated by orange lines).

https://i.sstatic.net/wp2PS.gif

Ideally, I would prefer to keep the HTML structure like so:

<ul class="gallery-list">
    <li class="gallery-list-item">
        <img src="..." alt="..." />
    </li>
    <li class="gallery-list-item">
        <img src="..." alt="..." />
    </li>
</ul>

Thank you for your assistance, and if there is a superior solution available, I am open to closing this query and referring to that solution instead.

html css

Answer 1

Answer №1

Consider this method as a potential solution, although it may not be the only one. It operates under certain assumptions, such as always having four images per row while ensuring responsiveness.

The key points are:

We adjust the width of the image container as a percentage of the parent container to dictate the number of images per row.
A negative right margin on the ul is used to counteract the right margin applied to the li for image spacing.
The calc function allows us to subtract the margin reserved for spacing so that all elements can stay on a single line without reflowing.

I have included media queries to illustrate how you can alter the row count for smaller screens and ensure a responsive grid layout.

In addition, some padding and borders have been added to .container to demonstrate that the images occupy the full width of the container.

This represents just one approach among many possible solutions.

body {
  margin: 0;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container {
  width: 80%;
  margin: 50px auto;
  /* additional styling for demonstration purposes */
  padding: 50px 0;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  overflow: hidden;
}
ul {
  margin-right: -5px;
}
li {
  float: left;
  margin: 0 5px 5px 0;
  width: calc(50% - 5px );
}
img {
  display: block;
  width: 100%; /* or max-width: 100%; */
  height: auto;
}
@media(min-width: 550px) {
  li {
    width: calc(33.333% - 5px );
  }
}
@media(min-width: 750px) {
  li {
    width: calc(25% - 5px );
  }
}

<div class="container">
  <ul>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=1">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=2">
    </li>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=3">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=4">
    </li>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=5">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=6">
    </li>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=7">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=8">
    </li>
  </ul>
</div>

Answer 2

Consider this method as a potential solution, although it may not be the only one. It operates under certain assumptions, such as always having four images per row while ensuring responsiveness.

The key points are:

We adjust the width of the image container as a percentage of the parent container to dictate the number of images per row.
A negative right margin on the ul is used to counteract the right margin applied to the li for image spacing.
The calc function allows us to subtract the margin reserved for spacing so that all elements can stay on a single line without reflowing.

I have included media queries to illustrate how you can alter the row count for smaller screens and ensure a responsive grid layout.

In addition, some padding and borders have been added to .container to demonstrate that the images occupy the full width of the container.

This represents just one approach among many possible solutions.

body {
  margin: 0;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container {
  width: 80%;
  margin: 50px auto;
  /* additional styling for demonstration purposes */
  padding: 50px 0;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  overflow: hidden;
}
ul {
  margin-right: -5px;
}
li {
  float: left;
  margin: 0 5px 5px 0;
  width: calc(50% - 5px );
}
img {
  display: block;
  width: 100%; /* or max-width: 100%; */
  height: auto;
}
@media(min-width: 550px) {
  li {
    width: calc(33.333% - 5px );
  }
}
@media(min-width: 750px) {
  li {
    width: calc(25% - 5px );
  }
}

<div class="container">
  <ul>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=1">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=2">
    </li>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=3">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=4">
    </li>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=5">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=6">
    </li>
    <li>
      <img src="http://placehold.it/200x200/fc0/&text=7">
    </li>
    <li>
      <img src="http://placehold.it/200x200/ccc/&text=8">
    </li>
  </ul>
</div>

Answer 3

Answer №2

If you're looking for a solution, I recommend using flexbox. You can set a fixed width on the gallery, but it can also be fluid. Here's a snippet of code to get you started:

.gallery {
  display: flex;
  flex-wrap: wrap;
  width: 440px;
  margin: auto;
  padding: 0;
  list-style: none;
}


.gallery img {
  margin-right: 10px;
  margin-bottom: 10px;
}

<ul class="gallery">
  <li>
     // Add your image sources here
  </li>

  <li>
    // Add more image sources here
  </li>

  <li>
     // And keep adding image sources
  </li>
</ul>

Answer 4

If you're looking for a solution, I recommend using flexbox. You can set a fixed width on the gallery, but it can also be fluid. Here's a snippet of code to get you started:

.gallery {
  display: flex;
  flex-wrap: wrap;
  width: 440px;
  margin: auto;
  padding: 0;
  list-style: none;
}


.gallery img {
  margin-right: 10px;
  margin-bottom: 10px;
}

<ul class="gallery">
  <li>
     // Add your image sources here
  </li>

  <li>
    // Add more image sources here
  </li>

  <li>
     // And keep adding image sources
  </li>
</ul>

Answer 5

Answer №3

You can achieve the desired layout using display:flex and flex-wrap.

I made some changes to the markup structure, replacing ul li's with div and img elements. The last image in each row now expands to fit the container.

Take a look at this code snippet:

.gallery-list-item {
  display: flex;
  width: 100%;
  margin-top: 10px;
}
div img:not(:first-child) {
  margin-left: 10px;
}
div.gallery-list-item img:last-child {
  flex: 1;
}
div.gallery-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 450px;
  border: 1px solid black;
  padding: 0;
}

<div class="gallery-list">
  <div class="gallery-list-item">
    <img src="http://shushi168.com/data/out/123/36699123-images.png" alt="..." height=100 width=100/>


    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://shushi168.com/data/out/123/36699123-images.png" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
  </div>
  <div class="gallery-list-item">
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
  </div>

</div>

I hope this solution helps!

Answer 6

You can achieve the desired layout using display:flex and flex-wrap.

I made some changes to the markup structure, replacing ul li's with div and img elements. The last image in each row now expands to fit the container.

Take a look at this code snippet:

.gallery-list-item {
  display: flex;
  width: 100%;
  margin-top: 10px;
}
div img:not(:first-child) {
  margin-left: 10px;
}
div.gallery-list-item img:last-child {
  flex: 1;
}
div.gallery-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 450px;
  border: 1px solid black;
  padding: 0;
}

<div class="gallery-list">
  <div class="gallery-list-item">
    <img src="http://shushi168.com/data/out/123/36699123-images.png" alt="..." height=100 width=100/>


    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://shushi168.com/data/out/123/36699123-images.png" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
  </div>
  <div class="gallery-list-item">
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>

    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
  </div>

</div>

I hope this solution helps!

Looking for advice on designing a unique Gallery layout using CSS?

Answer №1

Answer №2

Answer №3

Similar questions

Trouble encountered with bootstrap toggling when multiple identical inputs are used

Incorporate JavaScript functionality with HTML dropdown lists

Tips for aligning a div within a flexbox to the bottom position

Is it possible to enhance the GamepadAPI's functionality?

"Facing a dilemma with Javascript's Facebox getElementById function - not fetching any

AJAX Username verification failing to validate

Conceal navigation options on smaller screens and enable drop-down menu functionality with Bootstrap 3

Animate linear-gradient using jQuery script

Determine the number of elements chosen within a complex JSON structure

Achieving opacity solely on the background within a div class can be accomplished by utilizing CSS properties such

The code written inside the <script> tag seems to be malfunctioning when placed in the component.html file within VScode while working with

Struggling to apply size in percentage to several images used as a background

Automated line wrapping within a div

When the tailwind utilities are implemented, they do not appear on the screen

Center elements at % on the webpage using CSS styling

What is the best way to specify attributes such as font size and padding for the mobile version in AMP for email?

Execute a JavaScript function on a Node server following a click event in an HTML document

Unable to create follow/unfollow feature with jquery ajax

Utilizing Multiple Carousels on a Single Bootstrap 5 Page

When the enter key is pressed, the form will be submitted and the results will be displayed in a modal window without