What is the best way to display swipebox thumbnails in a grid layout instead of a single column?

I'm a novice in the world of web design and attempting to organize a group of 70 thumbnails into a grid or columns within an existing layout for a friend. Currently, they are displayed in a single lengthy column. Is there a straightforward way to adjust the layout?
Check out the page here:

www.mikehamiltonpaintings.com/gallery.html

Along with the CSS:

www.mikehamiltonpaintings.com/css/main.css  
www.mikehamiltonpaintings.com/css/fixed_vert.css  
www.mikehamiltonpaintings.com/css/swipebox.css

And the JavaScript files:

www.mikehamiltonpaintings.com/js/jquery.swipebox.min.js  
www.mikehamiltonpaintings.com/js/jquery-2.1.0.min.js  
www.mikehamiltonpaintings.com/js/ios-orientationchange-fix.js

Any helpful tips would be greatly appreciated!
Thank you :)

htmlcss

Answer №1

Simply utilize the grid-template-columns property in your parent element to resolve this issue!

Helpful link for reference

Furthermore, using 1fr as a unit of measurement will ensure responsiveness by adjusting to the width of the parent element (especially if you have an image within a div).

Instead of inserting a <p> with a unicode character code for spacing, it is recommended to utilize the gap property.

Useful resource on the gap property 

.container img {
  /* ensures images are responsive */
  width: 100%;
  height: auto;
}

.container {
  /* utilizes CSS grid */
  display: grid;
  /* specifies 4 images in a column with auto-generated rows*/
  grid-template-columns: repeat(4, 1fr);
  /* serves as margin between elements */
  gap: 0.5rem;
}
<div class="container">
  <!-- dark -->
  <img src="image-dark.jpg" alt="dark windows 11">
  <!-- light -->
  <img src="image-light.jpg" alt="light windows 11">

  <!-- Repeat dark and light images... -->

</div>

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

Transform a Div element into an image, ensuring compatibility with Internet Explorer 7 and 8

Currently, I am utilizing the jqplot charting library to create charts in my ASP.NET MVC application. Within a div element, the chart is being rendered. The goal is to convert this div element into an image and export it to a PDF document. The jqplotToIm ...

asp.net-mvchtmlhtml5-canvasjqplotexcanvas

Exploring the world of web development with a mix of

var articles = [ {% for article in article_list %} {% if not forloop.first %},{% endif %} { title: "{{ article.title }}", slug: "{{ article.slug }}", content: "{{ article.content }}", auth ...

javascripthtmldjango

Styling text and images with Bootstrap

Currently, I'm utilizing bootstrap to structure a row with 2 div elements. The first div contains an image while the second div holds text content. The challenge I am facing is aligning the text to the edge of the image. However, since the image does ...

htmlbootstrap-4

The div's height surpasses that of the image

I'm new to front-end development and have been experimenting with code. Here's an example of what I've been working on: <div style="background-color:red"> <img src='https://www.logaster.com/blog/wp-content/uploads/20 ...

htmlcss

Adjust the background color of a column in HTML based on its corresponding color name

Is there a way to change the background color of a column in an HTML table if the value is green? We want the background color to reflect the color name. The data will be retrieved from a web service. Here is the HTML code used to display the data in the ...

javascripthtmlcss

How float elements can affect z-index through opacity

While troubleshooting the alignment of my floated images, I came across an unexpected issue related to opacity: http://jsfiddle.net/tshwbnLo/ It appears that when an element has opacity, it does not adhere to the usual behavior and instead overlaps the f ...

htmlcsscss-floatopacity

Ways to generate multiple choices for options

Is there a method to provide multiple options within an option? I am utilizing CSelect to create options. One of the options needs to include additional options. <CSelect custom name="select_pattern_filter" id="select_pattern_filter" ...

htmlreactjs

Locate the textbox that pertains to the element currently in focus

My HTML is structured as follows: <tr> <td colspan="2" class="borderBottomCell"> <div class="benefitInfo" style="WIDTH: 99%! important;"> <asp:DropDownList ...

javascriptjqueryhtmlhtml-table

Add text to a separate div element on a different webpage using jQuery Mobile

Having a list view, upon tapping by the user, there is a transition to a loading page followed by switching to an article page after completion. The issue I am facing is that although the loading works well, I am unable to append content to the div of the ...

jqueryhtmljquery-mobilecordova

Merge floating and absolute positioning techniques

Creating a calendar exhibiting all events in one div requires precise positioning based on the values of top and height. Let me demonstrate this concept. In the image below, both 6am events are aligned vertically. This alignment issue can be resolved by u ...

javascripthtmlcsscss-floatabsolute

Is there a way to set up HTML5 Video.js in Boonex Dolphin?

My current project involves utilizing the Video.js Source Code to update the video player on my website that currently uses Boonex Dolphin. I am looking to transition from the flash player used by Dolphin to HTML5. Dolphin's modules contain specific f ...

javascriptphphtmlvideoboonex-dolphin

``Is it possible to adjust the style of an HTML element based on the style of another element?

Within my web application, I am dynamically changing the style of an HTML element using JavaScript. Below is the code snippet: function layout() { if(document.getElementById('sh1').getAttribute('src') == "abc.png") { docum ...

javascripthtmlcss

The navigation bar expands in height as the media width changes

I have a rather straightforward navbar: <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header pull-left"> @Html.ActionLink("Contact ...

htmlcsstwitter-bootstrap

The publicPath configuration in Webpack is not functioning as expected

Check out my demo setup: Take a look at my webpack configuration below: module.exports = { entry: './app.js', output: { filename: 'bundle.js', path: './build', publicPath: 'http://localhost:3000/&apos ...

javascripthtmlwebpack

FitText.js malfunctioning

I'm currently experimenting with using FitText.js to dynamically adjust the size of headlines to fit within the limits of the browser width. Interestingly, while this script successfully resizes the text in multiple sections of my website, it seems t ...

javascriptjquerycsswebfontsfittextjs

In Padrino, where should the access control headers be configured?

When working with Padrino, the placement of access control headers differs from Ruby on Rails. While in Ruby on Rails you typically place them in the Application Controller, in Padrino it may not work when placed inside a Controller method or app.rb. If ...

htmlrubyaccess-controlpadrino

Displaying combined data from various databases in an HTML table

I have a database that consists of 5 tables, with one dedicated to storing IDs. My goal is to establish links between this ID table and the other tables in order to display their corresponding names. For instance: ask Genre: Action This query should retu ...

phphtmlmysqlsqlhtml-table

Updating student data in Django using loops

I need assistance with this as I am new to development and lacking knowledge on how to achieve it. Can someone please help me in obtaining the code for capturing the ID of an absent student using JavaScript? Below is my HTML code displaying a list of stud ...

javascriptpythonhtmldjango

How can you avoid an abrupt transition when using `ng-hide` for animations?

I've been working on an accordion animation using ng-hide based on the panels height. However, I've noticed a slight jump when the ng-hide is applied. (click on the first title to show and hide) Can anyone offer assistance in resolving this issu ...

cssangularjs

Adjust the transparency level of a span element inside a div when hovering over it

Is it possible to change the transparency of a span within an a element when the parent div is hovered over? Example HTML code: <div id="about"> <a style="text-decoration: none;" href="/about"><h1>ABOUT ME</h1><br><span ...

htmlcss