Showcasing a series of pictures at full width

My goal is to showcase images in a grid where each set of li elements within a ul tag stays in the same row and spans 100% width of the container.

In the demonstration provided in the jsfiddle link, I have included 3 ul tags to illustrate my desired layout of 3 rows of images.

You can view the jsfiddle demo here: demo link

The final output I am aiming for is shown below:

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

I am uncertain about how to achieve the desired outcome where each row occupies 100% width.

Therefore, every row (ul) may vary in the number of images it contains - ranging from 1 to 5 images per row.

htmlcss

Answer №1

All list items within each unordered list should remain on the same line and span the full width of the container

Flexbox is required for this layout

Output

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 3px;
}

li {
  flex-grow: 1;
}

li+li {
  margin-left: 3px;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<ul>
  <li>
    <img src="https://via.placeholder.com/250x200?text=A1">
  </li>
  <li>
    <img src="https://via.placeholder.com/150x200?text=A2">
  </li>
  <li>
    <img src="https://via.placeholder.com/350x200?text=A3">
  </li>
</ul>

<ul>
  <li>
    <img src="https://via.placeholder.com/200x200?text=B1">
  </li>
  <li>
    <img src="https://via.placeholder.com/300x200?text=B2">
  </li>
  <li>
    <img src="https://via.placeholder.com/150x200?text=B3">
  </li>
</ul>

<ul class="fivePerRow">
  <li>
    <img src="https://via.placeholder.com/250x200?text=C1">
  </li>
  <li>
    <img src="https://via.placeholder.com/150x200?text=C2">
  </li>
  <li>
    <img src="https://via.placeholder.com/350x200?text=C3">
  </li>
  <li>
    <img src="https://via.placeholder.com/200x200?text=C4">
  </li>
  <li>
    <img src="https://via.placeholder.com/300x200?text=C5">
  </li>
</ul>

The code can be found on JSFiddle

https://i.sstatic.net/BWYcp.png

Answer №2

Using Flexbox seems like the perfect solution for this task.

ul {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
li {
  display: inline-block;
  vertical-align: top;
}

Check out the Codepen Demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with smooth scrolling for anchor links?

I need help trouble-shooting a smooth scroll effect issue with anchor links on a client's website. Whenever I add the scroll code, the anchors on the page stop working altogether. I tried creating a pen with just a navigation and the code, and it work ...

javascriptjqueryhtmlscrollanchor

Information from contact forms gets inputted into the URL

Currently, I am in the process of developing a website and implementing a Contact Form that allows customers to email me directly. To test if the mail function is working correctly, I am using a Test Mail Server listening on Port 25 through a WAMP server v ...

phphtmlwampservermail-server

Brother or sister is never empty, as every comment is considered an entity

When going through a list of jQuery objects, I want to verify if the nextSibling attribute is null. However, I found that an HTML comment also counts as a sibling object. How can I address this issue? I am looking for an if statement that will trigger fo ...

javascriptjqueryhtml

Troubleshooting Alignment Problems in Bootstrap 4 Tables

Having trouble aligning certain items. In thisFiddle, I have two options: Option1 and Option2. I want to align the toggle switches with the ones in the first two rows. Specifically, I want the toggle switches to be in the second column of the table and t ...

htmlcssbootstrap-4

Can changes on a webpage in PHP be saved without needing to be sent to a database?

I've been conducting some research on this matter, but I haven't been able to find a solution. Is it feasible in PHP to save modifications made on a webpage without storing the information in a database? I want to empower users to edit their pag ...

phphtml

Utilize a dual-color gradient effect on separate words within the <li> element

I am attempting to display the fizz buzz function in an unordered list, with each word being a different color ('fizz'-- green, 'buzz'--blue) as shown here: https://i.sstatic.net/Yvdal.jpg I have successfully displayed "fizz" and "buz ...

javascripthtmlcss

Ways to change the default blue dropdown color in the Chrome browser

When you click on the drop-down menu, a blue color appears when hovered over. I want it to be red instead, but for some reason, it's not working in Chrome browser. Here is the CSS class that I have used: option:checked { box-shadow: 0 0 10px 100p ...

cssasp.net-mvc

Utilizing the power of Bootstrap, you can create a row of eye-catching

I am struggling to get 3 columns of cards to display in a row using bootstrap and CSS. Currently, only 2 columns are showing up. Here is the code snippet: <style type="text/css"> .card{ width: 350px; } </style> ...

htmlcssbootstrap-5

Issue with mime-type when uploading a file in a React js application on Windows operating system

In my React application, I have implemented the following HTML code to upload files: <div className="form-group files"> <label>Upload Your File </label> <input type="file" className="form-control" multiple onChange={this.onC ...

javascripthtmlreactjsfile-uploadbootstrap-4

Electron generates a unique landing page for your first launch

Can you help me create a feature on a webpage that only appears once and then never shows again? Similar to the "Never show me again" checkbox in Visual Studio Code upon first launch. ...

javascripthtmlwebelectron

How to achieve divs with see-through text using CSS?

How can I create a CSS (non-HTML5) based website with a filled div that has a cutout revealing an image underneath? There are various overlays and images involved, making the use of static images inconvenient. Additionally, I anticipate needing to scale th ...

csshtmlmasking

Illuminate the <select> within the form at the bottom

I have experimented with various combinations of Bootstrap 4's flexbox align utilities, as outlined in their documentation, but to no avail. Is there a way to ensure that the second <select> in the form below is aligned at the bottom of the row ...

csstwitter-bootstrapbootstrap-4

Show MQTT web channel information on an HTML webpage

To showcase data from an MQTT channel on an HTML page, I wrote a Node.js script as shown below: var mqtt = require('mqtt'); client = mqtt.createClient(1883, 'mqtt.beebotte.com', //Authenticate with your channel token, {username: &apos ...

htmlangularjsnode.jsmqtt

Custom calendar control vanishes on postback in ASP

After creating a custom calendar control that works smoothly for the most part, I encountered an issue. Whenever it is posted, the control disappears even when the user is still hovering over it. I want users to be able to change months, dates, or anythi ...

c#javascriptjquerycssasp.net

Making sure all items in the top row of Flexbox columns have the same height

Within my flex wrapper, I have multiple column components with various flex items inside. Each column displays content adjacent to each other. The challenge is to ensure that the top item in each column has an equal height, creating a row-like effect. I&a ...

htmlcssflexboxcss-grid

Having issues with implementing CSS3 animations on my webpage

I'm having trouble implementing a bouncing mouse animation on my website. The code works perfectly on another site, but on mine, it's not functioning at all. Here is the CSS code: .mouse { display: block; margin: 0 auto; text-alig ...

csscss-animations

The button is unable to contain all the text, causing it to spill out instead of wrapping to

Need help with creating an HTML button that opens a link. The button consists of a title and a short description, but when the description is too long, it overflows outside the button. Currently implementing bootstrap and jquery. Code: body { backgr ...

htmlcsstwitter-bootstrap-4

JavaScript's local storage feature seems to be failing in both saving and retrieving data

I'm working on a fun math game where two random numbers and a sign (+ or -) are generated using Math.random(). The user needs to input their answer in the provided input box. However, I am facing an issue with saving and retrieving the score and high ...

javascripthtmllocal-storage

Jquery Error in Bootstrap and DataTables Integration

My knowledge of frontend coding is limited, so please bear with me. Initially, my website was using MVCContrib grid along with its own CSS style. Recently, I switched to Bootstrap which caused MVCContrib to stop working. I've been struggling to integ ...

csstwitter-bootstrapdatatables

In what way can the button display the permission directly on the page?

When the website notification is granted, a green button should be displayed. If it is denied, show a red button instead. The button comes with a CSS style and a checkbox but does not have the permission to grant or allow any permissions on the page. Butt ...

javascripthtmlcss