Attempting to organize Material Design cards in a staggered formation while ensuring they are evenly spaced out within their row

I found a great MDL template to use for my website at the following link:

One feature of this template is that it aligns the "cards" in three columns.

I am facing a challenge as I attempt to stagger the rows of "cards" by 2 columns, then by 3 columns, and so on.

If I simply remove the 3rd card and leave only two cards, the layout becomes unbalanced. In a 3-column setup, you have LEFT, MIDDLE, and RIGHT. Removing the 3rd card places the two cards in the LEFT and MIDDLE columns, leaving the right column empty.

I am striving to achieve a layout similar to the one in this image:

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

htmlcssmaterial-designmaterial-design-lite

Answer №1

To achieve center alignment for the content inside the 'portfolio-max-width' class, apply 'justify-content: center' as shown below:

.portfolio-max-width {
    max-width: 900px;
    margin: auto;
    justify-content: center;    /*This rule centers the elements within*/
}

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

I'm looking to create a parent div that adjusts its size dynamically and can contain two child divs, each with variable sizes that can scroll independently. How can I achieve this?

Consider this layout configuration: <div id="PARENT_DIV"> <div id="LEFT_CHILD_DIV"> </div> <div id="RIGHT_CHILD_DIV"> </div> </div> Key features for PARENT_DIV: PARENT_DIV must have a higher z-ind ...

csshtml

How to create ::after pseudo-element with identical width as its preceding sibling

My HTML code includes a <div> container with an <img> and an ::after pseudo-element. Check it out: <div class="container" data-caption="The caption should match the width of the image and wrap accordingly"> <img> </div> . ...

htmlcss

The button remains in a pressed state when viewed on a mobile device

This button is functioning properly in desktop view, but in mobile view the button remains pressed down. :root { --green: #4285f4; --black: rgba(9, 13, 25, 0.752); --box-shadow: .4rem .4rem 1rem #ccc, -.4rem -.4rem 1rem #fff; --box-shadow-inset: ...

htmlcss

Activate all chosen CSS circles

I'm currently working on creating a progress bar using CSS circles. The idea is that when you click on each circle in sequence (1, 2, 3), all three circles and the line connecting them will fill up with red color. If you then go back (3, 2, 1), the co ...

javascripthtmlcss

showing database table contents on a website page

What is the best way to retrieve data from a MySQL database that corresponds to user input on a web page, and then showcase the content without having to reload the page using PHP or another suitable language? I would greatly appreciate any assistance wi ...

phpmysqlajaxhtml

What is the best way to include a header in my fixed navigation bar?

I'm currently facing an issue that I can't seem to resolve, and I suspect it might have something to do with the positioning. Despite my attempts to find a solution online, I still can't determine why this problem persists. My objective is ...

htmlcssheadernavigationfixed

What is the best way to locate the closing tag for a specific div element?

My HTML code looks like this: <div class="body"> <h1>ddd</h1> <p>dadfsaf</p> <div id="name"> <div class="des">psd</div> <div>www</div> </div> <div&g ...

javascripthtmlnode.js

A guide on converting array values to objects in AngularJS HTML

Here is my collection of objects: MyCart = { cartID: "cart101", listProducts : [ {pid:101, pname:"apple", price: 200, qty:3}, {pid:102, pname:"banana", price: 100, qty:12} ] } I have incorporated a form in ...

javascripthtmlangulartypescript

Launch a new window with the window.open() method and execute a function on the newly opened window

I am having trouble generating a barcode in a new window using the barcode generator script. Despite trying to use window.focus(), I can't get the barcode to appear in the new window. Any assistance on how to generate the barcode in a separate window ...

javascripthtmlgoogle-chrome

Using canvas to smoothly transition an object from one point to another along a curved path

As a beginner in working with canvas, I am facing a challenge of moving an object from one fixed coordinate to another using an arc. While referring to the code example of a solar system on https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutori ...

javascripthtmlcanvas

What is the most efficient method for creating and adding an element in jQuery?

When it comes to appending div elements to a page, there are different approaches that can be taken. Let's explore two methods: $('#page123').append("<div id='foo' class='checkbox' data-quesid='foofaa'>&l ...

javascriptjqueryhtml

What is the best way to display a default image when a specific image file cannot be located?

Is there a way to request images for user profile photos from an Amazon S3 bucket, and if the image file is not found for a user, automatically redirect to an alternate default image file for the profile photo? If so, how can I implement this using Amazo ...

htmlamazon-web-servicesamazon-s3

When toggling the menu in bootstrap, the functionality of <a href=""> links may be disrupted

My attempt to integrate a toggle function into each link in the menu to automatically close the menu on mobile after selecting a link has hit a snag. With the solution of adding data-toggle="collapse" data-target="#navbarSupportedContent" to the <a href ...

javascripthtmlbootstrap-4

Using the Google Maps API to display a map on two different HTML pages, but encountering an error on one of them

"Map: Expected mapDiv of type Element but was passed null." -The height of the div is set in the css. Javascript (googleMaps.js): function initMap() { try { const sportHall2 = { lat: 51.18310959584043, lng: 4.388290 ...

javascripthtmlcssgoogle-maps-api-3

How to retrieve values from checkboxes generated dynamically in php using jquery

This is a unique question and not related to event binding or any suggested duplicates. Hello, I am facing an issue while trying to fetch the value of a checkbox to send it in an ajax request to a PHP page. The checkboxes are dynamically created using PHP ...

javascriptphpjqueryhtmlcheckbox

To fill the remaining white space, add an underline after the last line of text

I'm struggling to implement a SCSS/CSS styling concept where I need to add a solid line before or after the last line of a heading. The challenge is that the width of the last line varies based on the screen size. I am open to any suggestions. Here&a ...

htmlcssreactjssassnext.js

ng-table Filtering with dropdown selection

Hello, I am currently working on creating a Ng-table with a select dropdown menu for filtering the results. Here is where I am at so far. 1) How can I remove one of the pagination options that appear after applying the filter? I only want to keep one pagi ...

javascripthtmlangularjsngtable

Steps for executing the code on cPanel

Below is the code I have been using to convert PPT files to IMG <html> <head> <title>ShotDev.Com Tutorial</title> </head> <body> <?php $ppApp = new COM("PowerPoint.Application"); $ppApp->Visible = True; ...

phphtmlcss

Match the input fields with the corresponding table columns

Could you assist me in adjusting the alignment of my inputs? I am looking to position them above the last two columns ("Primary price" and "Secondary price"). To provide clarity, I have included a wireframe. https://i.sstatic.net/Zq983.jpg I attempted to ...

htmlcssbootstrap-4

Persistent Footer and Internet Explorer Compatibility

I'm facing an issue where my sticky footer doesn't stick to the bottom when there's a floating element in my content. Instead, it sits at the end of the non-floated content. My goal is to have the footer at the bottom of the page window if ...

csshtmlfooter