What is the best way to align isotope and organize its components?

I have searched for solutions to my issue with centering isotope on my project, but none of the existing answers were sufficient. I am facing challenges trying to center isotope without creating extra space between its elements and arranging them in a specific order (like the one with 300x460 dimensions) as shown in the images below. Although I attempted to use margin-left to move it to the center, the elements ended up sticking together.

View my current progress

See what I'm aiming for

Here's the snippet of my HTML and CSS work so far:

<div class="portfolio">
    <div class="container">
        <div class="portfolio-gallery">
            <div class="row grid">
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x260.png">
                </div>
                <div class="col-md-3 grid-item grid-item--width2">
                    <img src="assets/images/placeholdit300x220.png">
                </div>
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x310.png">
                </div>
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x200.png">
                </div>
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x460.png">
                </div>
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x370.png">
                </div>
                <div class="col-md-3 grid-item">
                    <img src="assets/images/placeholdit300x200.png">
                </div>
            </div>
        </div>
    </div>
</div>

.portfolio{
    padding-top: 64px;
    padding-bottom: 77px;
}
.portfolio .portfolio-gallery{
    margin: 60px auto;
}
.portfolio .grid-item{
    margin-bottom: 20px;
}
htmlcssjquery-isotope

Answer №1

It seems unnecessary to use bootstrap classes in the isotope elements. The question about ordering also appears unclear to me as Isotope naturally reorders its elements with each resize based on layout mode rules. Sorting becomes more relevant when dealing with elements of equal dimensions, as demonstrated in the sorting demo ().

Check out this CodePen link showcasing Isotope and how to create tile combinations similar to your image: https://codepen.io/Sixl/full/GMaQre/

Hopefully, this resource proves helpful to you.

CSS:

.grid {
  background-color: #none;
  width: 960px;
  margin: 10px auto;
    &:after {
    content: '';
    display: block;
    clear: both;
    }
}

.grid-item {
  position: relative;
  float: left;
  width: 300px;
  height: 200px;
  margin: 10px;
  padding: 10px 30px;
  background: #bada55;
  color: white;
  font-size: 96px;
  border-radius: 3px;
  box-shadow: 2px 2px 12px rgba(0,0,0,0.25);
  &--220 { height: 220px;}
  &--260 { height: 260px;}
  &--310 { height: 310px;}
  &--370 { height: 370px;}
  &--460 { height: 460px;}
}

JS:

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'packery',
});

HTML:

<div class="grid">
  <div class="grid-item grid-item--260">1</div>
  <div class="grid-item grid-item--220">2</div>
  <div class="grid-item grid-item--310">3</div>
  <div class="grid-item grid-item--460">4</div>
  <div class="grid-item grid-item--200">5</div>
  <div class="grid-item grid-item--370">6</div>
  <div class="grid-item grid-item--200">7</div>
</div>

Answer №2

Images should be displayed in a column format, not one after the other. The picture order needs to be fixed and a "make 3 columns" rule in CSS is necessary. Also, ensure that the columns are aligned next to each other and adjust spacing accordingly.

<div class="portfolio">
    <div class="portfolio-gallery">
        <div class="grid-item">
            <img src="assets/images/placeholdit300x260.png">
        </div>
        <div class="grid-item">
            <img src="assets/images/placeholdit300x200.png">
        </div>
        <div class="grid-item">
            <img src="assets/images/placeholdit300x200.png">
        </div>
        <div class="grid-item">
           <img src="assets/images/placeholdit300x220.png">
        </div>
        <div class="grid-item">
            <img src="assets/images/placeholdit300x460.png">
        </div>
        <div class="grid-item">
            <img src="assets/images/placeholdit300x310.png">
        </div>
        <div class="grid-item">
            <img src="assets/images/placeholdit300x370.png">
        </div>
    </div>
</div>

.portfolio{
    padding-top: 64px;
    padding-bottom: 77px;
    float: left;
    column-count: 3;
}
.portfolio .grid-item{
    margin-bottom: 20px;
}`

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

Creating an image slideshow with a looping JavaScript array: Step-by-step guide

One issue with the program is that when it runs, only the last array value image is displaying on the screen while the other images are not. Below is the HTML code: <img id="mg" alt="image not found"> And here is the JavaScript code: var images=[ ...

javascripthtmlcss

Developing dynamic HTML content using Android and JavaScript to insert JavaScript code into the head tag dynamically

I need to incorporate a banner into my Android application in a specific way. Upon receiving the following Javascript code from the server: <script type="text/javascript" src="http://rm.face.ua/adriver.core.2.js"></script> <div id="adri ...

javascriptandroidhtmlwebview

Struggling to get collapsible feature functioning on website

I'm trying to create a collapsible DIV, and I found a solution on Stack Overflow. However, I'm having trouble getting it to work on my website. I created a fiddle with the full code, and it works there. But when I implement it on my site, the con ...

javascripthtmljquery

Angular version 6 allows for specifying input types as numbers and displaying two decimal digits after the comma

How can I format user input to display as currency with thousand separators in Angular? <input type="number" (ngModelChange)="calculateSum()" (change)="calculateAmount(invoiceQuota)" [ngModel]="invoiceQuota.controls.grossAmount.value"> I have attem ...

htmlangulartypescriptangular-pipe

Using CSS min-height: 100vh will ensure that the container has enough height to fill the entire viewport

Utilizing min-height: 100vh; in my inner call to action div placed on top of a background video has been mostly successful. However, I've encountered an issue where using 100vh with the absolutely positioned video seems to introduce an unwanted margin ...

htmlcssruby-on-railsbootstrap-4

HTML/CSS Selecting Tables: First, Last, and More

Is there a way to combine selector tags in order to style the first <td> inside the first <tr>? I have attempted various methods to merge these selectors, albeit unsuccessfully. I am simply seeking guidance on whether or not this is even possi ...

htmlcsscss-selectors

Modify the href attribute of an anchor tag that does not have a specified class or

I am currently using an event plugin that automatically links all schedule text to the main event page through anchor tags, like this: <td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros c ...

javascriptjqueryhtmlcss

Reset the queue for the slideDown animation using jQuery

I am experiencing an issue with my code where multiple animation effects are running simultaneously. Specifically, when I hover over navbarli1 and then move to another li element with the same navbarli1 class, the slide-down effect is not working as expect ...

jqueryhtmlcssanimation

Design your website with CSS by incorporating hanging ::before labels that feature unique formatting

I am looking to create labels that designate specific groups of words. Here are the criteria: The label should appear to the left of the word group The words should be enclosed in lines, while the label should not The words should be indented, while the ...

css

I am experiencing difficulties updating my website

Is there a way to automatically refresh my webpage in PHP whenever I press the enter key? ...

phphtmlcss

Allow iframe to be edited within jsfiddle

I have a question that I need to ask soon, but first I need an editable iframe in jsfiddle. It's working fine on my local machine, but not on jsfiddle. I believe it's because of the frames being used? On my local machine, I use: setTimeout(&apo ...

javascriptjqueryhtmliframejsfiddle

Having issues with the background-image style not displaying correctly in the header of an

Trying to update the "background-image:" of a CSS class upon button click. JQuery: $(function() { $('button').on('click', function() { $('.masthead2').css('background-image', 'url("../img/whitehead ...

javascriptjqueryhtmlcss

Add a <div> element to a webpage in a random location every time the page is refreshed

I have a variety of 2 types of <div>s displayed on a single page. Collection 1 consists of: <div class="feature">content 1</div> <div class="feature">content 2</div> ...and so forth. Collection 2 consists of: <div class ...

javascriptjqueryhtmlcss

What is the best way to remove column and row gaps in a Bootstrap grid system?

Despite adjusting padding with the image, div section, and grid gap to 0px in the grid layout, the image still fails to cover the entire cell. I am seeking a solution to eliminate these unwanted paddings that are highlighted in blue. The Bootstrap 5 .g-0 ...

htmlcssbootstrap-5

Struggling with correctly processing values in an HTML PHP Form

Help! I'm struggling with my online PHP form that has checkboxes. When I leave the checkboxes empty and submit the form, the first checkbox option shows up as selected but the second one doesn't (which is correct). Even when I tick both checkboxe ...

phpjqueryhtmlformscheckbox

A guide on Extracting Values from Nested Objects

Although I am not well-versed in JavaScript, I have a small project where I need to use JavaScript. I am attempting to retrieve values from an object nested within another object. However, my code is throwing errors. Below is the snippet of my code with d ...

javascripthtml

Why is it not functioning when storing responses in a jQuery variable?

I am working on a survey where each question is displayed one at a time. Users click on their answers, causing the current question to fade out and the next one to fade in. At the end of the survey, I want to show all the answers they selected. Below is t ...

javascriptjqueryhtml

Adding an image to a Div using Sencha Touch

For the past 20 days, I have been working with Sencha and learning a lot. I finally managed to access the device camera and capture photos using it. However, I am facing an issue where I am unable to display the captured image in a Div on my webpage upon c ...

htmlcameratouchuploading

Ways to perfectly align three images side by side using CSS

I am trying to align 3 pictures horizontally, but they keep ending up on separate lines. Here is the code I have been using: HTML <section class="features"> <figure> <img src="....jpg" alt="..."> ...

htmlcssimageflexboxinline

Issue with React-Route not displaying components

Below is the code snippet from my app.js file: <Router> <Header title="My Todos List" /> <Routes> <Route path="/about" element={<About />} /> <Route path="/" ...

javascripthtmlcssreactjs