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

Question

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:

Answer 1

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*/
}