Concern with Isotope's masonry feature

Question

Concern with Isotope's masonry feature

I'm at my wit's end!

The container div I'm dealing with is 1170px wide. My goal is to fit in 3 divs within this width. The first div is 275px wide, the second is 580px wide, and the third is also 275px wide. Altogether, these divs should add up to a total width of 1130px.

No matter how much I adjust the width of the container div, I just can't seem to get that third div to align on the same line as the other two. It keeps dropping down.

My brain is on the verge of exploding from frustration. Please, someone help!

Sample HTML code:

<div class="container">
    <div class="row">
        <div class="grid">

            <div class="grid-item">
                <img src="img/portfolio1.jpg" alt="">
            </div>

            <div class="grid-item width-double">
                <img src="img/portfolio2.jpg" alt="">
            </div>

            <div class="grid-item">
                <img src="img/portfolio3.jpg" alt="">
            </div>

        </div>
    </div>
</div>

CSS snippet:

.grid {

    .grid-item {
        padding: 0;
        width: 275px;
        height: 275px;
        float: left;

        &.width-double {
            width: 580px;
        }

        &.height-double {
            height: 580px;
        }
    }

}

Javascript function:

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

Check out the code here: http://codepen.io/anon/pen/meORoL

javascript jquery html css jquery-isotope

Answer 1

Answer №1

View Demo

var $grid = $('.grid');
$grid.isotope(
{
      itemSelector: '.grid-item',
      masonry: 
      {
          columnWidth:1
      }
});

Remember to specify the width of the columns as needed for your layout.

Answer 2

View Demo

var $grid = $('.grid');
$grid.isotope(
{
      itemSelector: '.grid-item',
      masonry: 
      {
          columnWidth:1
      }
});

Remember to specify the width of the columns as needed for your layout.

Answer 3

Answer №2

Although Diptox's solution seems to work, there could be a better approach to handling this issue.

In an ideal scenario, you would manually define the columnWidth. However, if it is not set, Masonry will base it on the size of the first item in the grid. The problem arose because the larger item in the grid was not a perfect multiple of the width of the first item. With a width of 580px as opposed to the first item's 275px, the larger item did not align properly within the column array established by Masonry. If its width had been a multiple of 275px, like 550px (275 * 2 = 550), it would have displayed correctly.

I am unsure whether setting the columnWidth to 1 poses any concerns, but intuitively it may not be the optimal choice since it is the default value -- though it might not cause any issues after all.

Edit: I forgot to include the code snippets

CSS:

.grid-item.width-double {
  width: 550px;
}

Javascript:

$grid.isotope({
  itemSelector: '.grid-item',
  masonry: {
        columnWidth: 275,
    }
});

Check out the demonstration on CodePen here!

Answer 4

Although Diptox's solution seems to work, there could be a better approach to handling this issue.

In an ideal scenario, you would manually define the columnWidth. However, if it is not set, Masonry will base it on the size of the first item in the grid. The problem arose because the larger item in the grid was not a perfect multiple of the width of the first item. With a width of 580px as opposed to the first item's 275px, the larger item did not align properly within the column array established by Masonry. If its width had been a multiple of 275px, like 550px (275 * 2 = 550), it would have displayed correctly.

I am unsure whether setting the columnWidth to 1 poses any concerns, but intuitively it may not be the optimal choice since it is the default value -- though it might not cause any issues after all.

Edit: I forgot to include the code snippets

CSS:

.grid-item.width-double {
  width: 550px;
}

Javascript:

$grid.isotope({
  itemSelector: '.grid-item',
  masonry: {
        columnWidth: 275,
    }
});

Check out the demonstration on CodePen here!

Concern with Isotope's masonry feature

Answer №1

Answer №2

Similar questions

Leverage React Context beyond the confines of a React component

Adding a navigation bar to every administrator page while excluding it from shop pages can be achieved by creating a

Identifying the user's location within the application and dynamically loading various Angular scripts

Attempting to save the result of a fetch call into a variable for the purpose of rendering it as a list in a

The value from the textbox is not being received by the JavaScript and PHP

No content in a DIV element causing unusual height in IE7

The process of exporting and utilizing models in Sequelize

Adjusting the size of <nav> element to accommodate its child elements

Using Node.js with the express framework for requiring and posting data

What is the reason behind the perpetual hiding of the button?

Upon successful authorization, the Node Express server will pass the access token to the React client app via OAuth in the callback

Div with sidebar that sticks

Generating text upon clicking by utilizing vue apex charts dataPointIndex

Arranging content within a bounding box

Having trouble with jQuery not functioning properly in IE9 when trying to add items to a List

Storing data locally in Angular applications within the client-side environment

There seems to be a complete absence of rendering in this particular vue

Leverage the URL parameter with variables in HTML using AngularJS

The functionality of Access-Control-Allow-Origin is not effective in Chrome, yet it operates successfully in Firefox

Unexpected behavior encountered when implementing specific Textfield validation with Material UI