CODEWITHSUNDEEP
htmlcssmaterial-designmaterial-design-lite
Lasagna Cat
Lasagna Cat

Reputation: 397

Trying to stagger Material Design cards and make them evenly distributed in their row

I am using this MDL template here:

https://getmdl.io/templates/portfolio/index.html

As you can see, the "cards" are aligned by 3 columns.

What I'm having difficulty with is trying to stagger each "card" row by 2 columns, and then 3 columns, and so forth.

The problem with removing the 3rd card and just leave two cards is that it doesn't equally distribute the cards on the page. In a 3-column spread, you have LEFT, MIDDLE and RIGHT. When you remove the 3rd card, the two cards appear in the LEFT and MIDDLE columns, leaving the right column awkwardly vacant.

I am trying to attempt something like this:

enter image description here

Upvotes: 0

Views: 363

Answers (1)

Cayman Roe
Cayman Roe

Reputation: 125

Use 'justify-content: center' on the (outer) 'portfolio-max-width' class:

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

Upvotes: 1

Related Questions