The proximity between two columns of HTML elements is not closely aligned

Question

The proximity between two columns of HTML elements is not closely aligned

Currently, my web app has two columns when the screen size is big enough.

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

The spacing between the elements in the left column and the one below it is causing an issue that I want to address.

.thumnnail {
   display: inline-block;
   width: 400px;
   float: right;
 }

This snippet represents the CSS for the small boxes. I'm uncertain about how to make them stack more closely together. Please let me know if you need more information!

EDIT: Here is the JS Fiddle link.

http://jsfiddle.net/hkLXZ/

html css

Answer 1

Answer №1

There are two options to achieve this:

You can utilize CSS columns by adding the following code:
```
.your-element { column-count: 3; }
```
. However, keep in mind that with this method, your columns will be displayed from top to bottom rather than left to right.
Another alternative is to use a JavaScript layout engine such as Masonry or Isotope. These tools provide more flexibility in arranging elements, but do require JavaScript to function properly.

Answer 2

There are two options to achieve this:

You can utilize CSS columns by adding the following code:
```
.your-element { column-count: 3; }
```
. However, keep in mind that with this method, your columns will be displayed from top to bottom rather than left to right.
Another alternative is to use a JavaScript layout engine such as Masonry or Isotope. These tools provide more flexibility in arranging elements, but do require JavaScript to function properly.

The proximity between two columns of HTML elements is not closely aligned

Answer №1

Similar questions

Tips for applying a class to an element depending on data stored in Local Storage using JQuery

Difficulty achieving transformation of one div element within another div element

Tips for making a screen adapt to different monitor resolutions

Persistent error caused by unresponsive Tailwind utility functions

The navigation bar in javascript automatically removes the active class once the page has finished loading

Eliminate the hovering effect from images that are hyperlinked

Transforming a two-digit year into a four-digit year

Retrieving innerHTML from a VueJS custom component

Different methods for adjusting CSS properties that are dependent on other components

What is the established procedure for resetting all elements within an (X)HTML document?

Batch Script for Reading and Writing HTML files

Obtaining IDs of Divs that have been Dragged into a Drop Zone upon Clicking a Button using JavaScript

Creating a dropdown menu and adjusting the content below

What is the best way to use CSS 3 to resize and enlarge an image, such as sprite icons?

Creating colorful containers using Bootstrap

Button with tooltip for easy access to trigger a modal dialog

Issue with syntax when transferring an HTML element from the #div to the body

scrolling smoothly to a specific div on another webpage

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

Exploring td data inside tr element using LXML