What can I do to prevent Masonry from floating all of my grid items to the left?

Is there a way to center justify the masonry grid items?

I have noticed that my Masonry layout is aligning all the grid items to the left or justifying them to the left side:

 <div class="wrap">
  <div class="parent grid">
    <div class="grid-item"><div>1</div></div>
    <div class="grid-item"><div>2</div></div>
    <div class="grid-item"><div>3</div></div>
    <div class="grid-item"><div>4</div></div>
    <div class="grid-item"><div>5</div></div>
  </div>
</div>

CSS:

* {
    box-sizing: border-box;
    font-family: Arial, Sans-serif;
}

.wrap {
    background: #FFD54F;
    text-align: center;
}

.parent {
    text-align: center;
    width: 600px;
    display: inline-block;
    border: 1px solid black;
}

.parent > div {
    width: 200px;
    height: 100px;
    background: white;
    margin:5px;
    padding:20px;
    display: inline-block;
}

.parent > div > div {
    font: bold 30px Arial, Sans-serif;
    color: white;
    width: 50px;
    height: 50px;
    background: #FAB400;
    border-radius: 50%;
    padding: 9px;
    text-align:center;
}

Check out the code on jsfiddle

My goal is to achieve a layout similar to this:

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

Do you think it's possible to accomplish this design?

Answer №1

To center child elements within a container, you can add another container inside the parent element with a width that accommodates the size of the child elements along with their margins. Set this inner container's width to align it in the center. Here is an example:

.parent {
    text-align: center;
    width: 60%;
    display: inline-block;
}
.parent-container{
  width: 60%;
  border: 1px solid black;
  margin: 0 auto;
} 

View Sample Code

Answer №2

In my opinion, using the flex property would be the best approach for this.

If you need guidance on how to utilize flex, you can refer to this link: all about flex

Below is the code snippet that I have modified from your initial fiddle:

$('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    percentPosition: true
});
* {
        box-sizing: border-box;
        font-family: Arial, Sans-serif;
    }

    .wrap {
        background: #FFD54F;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .parent {
        width:600px;
        border: 1px solid black;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
    }
    .grid{
      display:flex;
      flex-direction:column;
      flex-wrap:wrap;
      width:430px;
      height:100%;
    }
    .parent .grid-item {
        width: 200px;
        height: 100px;
        background: white;
        margin:5px;
        padding:20px;
        
    }

    .grid-item div {
        font: bold 30px Arial, Sans-serif;
        color: white;
        width: 50px;
        height: 50px;
        background: #FAB400;
        border-radius: 50%;
        padding: 9px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="parent">
   <div class="grid">
    <div class="grid-item"><div>1</div></div>
    <div class="grid-item"><div>2</div></div>
    <div class="grid-item"><div>3</div></div>
    <div class="grid-item"><div>4</div></div>
    <div class="grid-item"><div>5</div></div>
   </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script src="https://npmcdn.com/masonry/dist/masonry.pkgd.min.js"></script>

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

Tips on implementing a circular progress bar with locomotive scroll functionality

Can anyone help me integrate progress functionality with Locomotive Scroll using JavaScript? Link to CodePen for reference Check out this code snippet from Locomotive Scroll that calculates the percentage of pages scrolled: const scroller = new Locomotiv ...

Managing concurrent users updating the same form on a web application

Imagine a scenario where user A opens a form with pre-filled data. While user A makes changes to the form data, user B also opens the same form with the data intended for user A. Just as user B begins modifying the data, user A clicks on the submit butto ...

To redirect to a webpage in PHP, incorporate nested if statements and override the meta HTML

I am looking for a way to automatically redirect to another webpage when a certain condition is met. Currently, I have set up a meta redirect in case the condition is not satisfied. <meta http-equiv="refresh" content="4; url=form3.html" /> <?ph ...

Creating an array of logos in ReactJS with the help of TailwindCSS

After seeing multiple implementations of this feature, I find myself struggling to search for a solution. I can only access the HTML and CSS through inspecting elements, wondering if others are facing the same issue as me. Typically, we aim to implement t ...

Utilizing the input element to modify the font color of the title upon clicking the button

I've been honing my skills in Angular and facing an issue with altering the font color of a variable called title. I'm struggling to figure it out. Take a look at the code snippet from tools.component.ts: [...] title: string = 'Add note ...

jQuery AJAX issues on Safari and iOS gadgets

I'm facing a compatibility issue specifically with Safari and all iOS devices. I've developed this jQuery code for a project, but it seems to have trouble working with Safari. Interestingly, it works perfectly fine with Chrome, Firefox, and even ...

Having trouble adjusting the refresh timer based on user focus with setTimeout

For the past few days, I've been utilizing an ajax call to dynamically refresh specific elements of my webapp every 5 seconds. The implementation with setInterval(refreshElements, 5000) worked perfectly fine. However, now I am considering whether the ...

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

Issue with Bootstrap columns being misaligned on mobile devices

On my website, I've implemented a Bootstrap Grid design with three columns under the container-fluid BS attribute, along with .row .no-gutters. While the boxes are perfectly aligned in the desktop view, they stack vertically on mobile and tablet devi ...

Tips for effectively creating and appending elements using JavaScript

Code Sample var result=$.getJSON("http://search.twitter.com/search.json?callback=?",{q:query}, function(data) { ... question. }); Query: In order to display each tweet result, I want to ...

The jQuery Modal Dialog functions properly on the initial page load, but fails to work on subsequent pages unless manually refreshed

So, I've encountered an issue with my jQuery modal dialog. It's set up to remind non-registered users to sign up when they try to access user-only actions. Oddly enough, the dialog functions perfectly after a page refresh on THAT specific page. H ...

Effortlessly submit multiple forms at once with just a single click using the WordPress form

One issue I'm experiencing is that the forms on my site are generated using shortcodes. I have a suspicion that the buttons I created, which lead to submission form1 and then form2, may not be working properly because of this. This is the current set ...

Showcasing articles in an XML feed according to specific keywords found in the headline

I'm currently working on designing a website for a client and I want to minimize my involvement in its maintenance. I am considering using RSS feeds to automate the process by having content posted on Blogger and then feeding it to the site. However, ...

Restore radio input functionality with a transparent method

I've experimented with various methods, including traditional form reset techniques and jQuery solutions from different sources on the internet without success. Snapshot: The Objective: I am working on a sortable list where users are required to ra ...

How can I create a design that adjusts to show 5 columns on larger screens and 2 columns on smaller screens using Bootstrap 4?

I am working on a responsive column layout for an online store. I need to display 5 columns on large screens and 2 columns on mobile screens using Bootstrap4. However, on screens below 576px width, only one column is being rendered instead of two. How ca ...

Unable to display the value of a server-side li element using JQuery

I am trying to retrieve values from a ul list that is populated from the database using server-side code. I want to display the li value in a jquery alert function, but it doesn't seem to be working as expected. Strangely, the same function works perf ...

Flot seems to be having difficulty uploading JSON files

I am relatively new to working with json and flot, but have been tasked with creating a chart. Can someone please help me troubleshoot why my code is not functioning as expected? $.getJSON('chart.json', function(graphData){ alert(graphData); ...

Central Player Component

Do you need help with centering text and a player on your WP site? Check out my website Here is the code I am currently using: <div class="listen_section"> <div class="container"> <div class="row"> <div class ...

Adjusting the width of a button can result in gaps forming between neighboring buttons

I am currently working on a calculator project that involves customizing the width of a specific button with the ID equal. However, when I adjust the width of this button, it results in unexpected spacing between the third and fourth buttons in each row, c ...

click to display additional content using ajax

I have implemented ajax functionality on a load more button, but I am facing an issue where clicking the button retrieves the same data from content.php each time. The content.php file contains a mysql query to fetch data from a table. How can I modify th ...