Can Masonry.js content be perfectly centered?

I am currently experimenting with creating a layout consisting of one to four variable columns per page using the Masonry plugin. I have been impressed with how it functions so far.

However, there is an aggravating gap that persists despite my best efforts to eliminate it with the available configurations.

It's worth noting that the layout is already centered on the page. However, the content within this centered block appears left-justified.

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

The inner content also does not have any margins. The Masonry plugin is initialized as follows:

$('.msgblock').masonry({
      columnWidth: '.grid-item',
      gutter: 8,
      itemSelector: '.grid-item',
      fitWidth: true,
      resize: false
}); 

In CSS, I have removed the width property for .msgblock entirely, letting the plugin handle it.

.msgblock {
    min-height: 100%;
    margin: 0 auto;
    z-index: 1;
}

.grid-item {
    min-height: 100%;
    padding-top: 10px;
}

Answer №1

Consider trying the flexbox technique:

.grid-item {
    min-height: 100%;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Update: You can utilize the stretch option to fill in any remaining space. Here is a demonstration:

.grid-item {
  background: ghostwhite;
  box-sizing: border-box;
  padding: 10px;
  display: inline-flex;
  min-height: 200px;
  align-self: stretch;
  flex-direction: column;
  flex: 1 0 auto;
  outline: 1px solid #dde;
}

.grid-item:nth-child(2n+1) {
  background: ghostwhite;
}

.grid-item:nth-child(2n) {
  background: #eef;
}

.row {
  width: 100%;
  background: gray;
  display: flex;
  flex-wrap: wrap;
}
<div class="row">
  <div class="grid-item" style='min-width:60%'>Cell 1</div>
  <div class="grid-item" style='min-width:35%'>Cell 2</div>
  <div class="grid-item" style='min-width:45%'>Cell 3</div>
  <div class="grid-item" style='min-width:25%'>Cell 4</div>
  <div class="grid-item" style='min-width:15%'>Cell 5</div>
</div>

Answer №2

Following thorough research and experimentation, I have made the decision to opt for the CSS Flexbox property. It fulfills my requirements with less complexity compared to Masonry, and it aligns well with my browser support strategy, including compatibility with IE 11 - making it the more favorable option. Additionally, implementing this approach reduces the reliance on JavaScript, resulting in a lighter system load.

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

How to submit the next row using jQuery AJAX only when the previous submission is successful without using a loop - could a counter

Currently, I am dealing with loops and arrays. My goal is to submit only the table rows that are checked, wait for the success of an Ajax call before submitting the next row. Despite trying various methods, I have not been successful in achieving this yet. ...

Utilizing d3.csv to load CSV data into an nvd3 multiBar Chart demonstration (in JSON format)

I am attempting to recreate a nvd3.js multiBar Chart using my own .csv data. While I have come across similar questions in the past, none of them have provided a solution specific to my current issue. Some suggestions involve utilizing d3.entries, d3.nest, ...

Authentication through Auth0 login

After successfully registering a user in Auth0 for login purposes (found in the Users section of the dashboard), I implemented the following code to authenticate the user using an HTML form with username and password fields: public login(username: string, ...

How can JavaScript routes be used to apply specific code to multiple pages on a website?

Can you provide guidance on how to run the same code for multiple pages using routes? Below is an example I am currently exploring: var routeManager = { _routes: {}, // Collection of routes add: function(urls, action) { urls.forEach(fun ...

Prevent JavaScript Errors when performing a page postback

I am currently using the Telerik RAD Editor control in my ASP.NET 4.0 application, which is outside of any update panel. On the same page, I have multiple ModalPopUps and update panels to prevent unexpected full postbacks. The page contains PageMethods inv ...

Mastering the Art of Unit Testing JavaScript Asynchronous Code with Jasmine Mocking

Hello, I recently started learning JS and encountered a problem while testing asynchronous methods with jasmine mocking. Below is the code snippet I am trying to test: test.factory('service', ['$http', '$q', function($http, ...

Parsing an Object in Java

I have a JavaScript object that I am sending back to Java using AJAX: var jsonData = { "testJson" : "abc", "userId" : "123" }; After printing the map, it appears as follows: key: jsondata value:[object Object] What is the correct ...

The Next.js page suddenly disappears after a moment

Out of the blue, my next.js page suddenly went blank for no apparent reason. I didn't make any changes, it just happened. I attempted to restart my dev server and even deleted the '.next' folder, but nothing seemed to fix the issue. Despite ...

The bxSlider reloadSlider() function is not defined once the page has finished loading

I am currently working on developing an interactive upload and refresh gallery using AJAX and jQuery. The application allows for the upload of multiple images through drag & drop. After uploading, I need to visualize how the new gallery will appear with t ...

What is the best way to control and manipulate this parallax effect?

Having trouble getting the icon dog to appear correctly in this parallax effect. I want the full body of the dog icon to be displayed over the section, but I'm having no luck so far. Please see my code below and let me know if there are any correction ...

How do I use React and Material-UI to efficiently display multiple tables from a complex JSON object containing multiple arrays of data?

Trying to come up with an innovative approach to generate a unique dynamic table component that can create individual tables based on the number of arrays in a dictionary object (essentially iterating through each array and generating a table). For my sce ...

When trying to access the "form" property of a form ElementRef, TypeScript throws an error

I've encountered an issue with accessing the validity of a form in my template: <form #heroForm="ngForm" (ngSubmit)="onSubmit()"> After adding it as a ViewChild in the controller: @ViewChild('heroForm') heroForm: ElementRef; Trying ...

Executing a webservice method in an html page using javascript without the need to refresh the page

Is it possible to call a webservice from an index.html page using JavaScript? My webservice is located at "localhost/ws/service.asmx" and the specific web method I want to call is called HelloWorld. The index.html page contains an HTML submit button whic ...

Arrange objects in an array based on certain criteria using JavaScript in a dynamic

I have an array containing various items that need to be sorted according to specific rules. The goal is to group all values with "rules" together, and ensure that "ELIG_DATABASE" is grouped with "ELIG_SERVICE." const items =[{"name":"ELIG_ ...

Moving data of a row from one table to another in Laravel by triggering a button click

For instance, consider a scenario where clicking a button moves a row to another table in the database and then deletes it. Implementing this functionality in Laravel seems challenging as I am unable to find any relevant resources or guidance on how to pro ...

Discover the complete compilation of CSS class regulations (derived from various stylesheets) along with their currently active properties for the chosen element

Is there a way to retrieve all the matched CSS Selectors for a selected element and access the properties of each active class applied to that element? I have researched methods like using getMatchedCSSRules and checking out However, I am hesitant to use ...

Creating a receipt program in Python and protecting previous data from being overwritten

I am currently learning Python and attempting to create a program that generates an invoice listing all items, along with their prices and quantities. Each item should be displayed on a separate line. While I have managed to print each item in a line, I a ...

Ways to obtain the output of an If/Else statement

It seems like I might be missing something, but I am unsure of how to extract the result from an else-if statement. Take this code snippet that I've been working on for example: In this scenario, the output would read "It's warm!", and what I wa ...

Deleting the v-stepper-header number with Vuetify

I have been searching everywhere in an attempt to resolve this issue, but I have not been able to find a solution. Is there a way to remove the numbers from the v-stepper-header? - Using Vuetify version: 1.5.6 Current: https://i.stack.imgur.com/gLxFX.png ...

The navigation bar's background color remains static and doesn't update as

Struggling with HTML/CSS and unable to get the NAV bar to display the specified background color. Tried putting the nav in a class, commented out parts of the code, but still couldn't make it work. Despite looking for solutions, I can't figure ou ...