How to make materialize cards line up in django?

So I am creating a website with django and I'm using the materialize framework. I am using the cards to show Q&As, and the questions and answers are all of different lengths. I was wondering if there was a way to make them line up so that there are not gaps in the columns.Cards not lining up picture

I did see this code, and I rearranged my html to match it (I did move the for loop to the right spot), then pasted the css at the bottom of the css file, but this caused the cards to display in one long column.

Here is my code:

<div class="row">
        {% for q in faqs %}
            <div class="col s12 m6 l4 cards-container">
                <div class="card blue-grey darken-2">
                    <div class="card-content white-text">
                        <span class="card-title">{{q.question}}</span>

                    </div>
                    <div class="card-action white-text">
                        <p><i>{{q.answer}}</i></p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

If anyone knows a way to fix this, I would appreciate it very much.

Solution

You can achieve this using column-width and column-gap:

div.card-container {
  -moz-column-width: 23rem;
  -webkit-column-width: 23rem;
  -moz-column-gap: 1rem;
  -webkit-column-gap: 1rem;
}

.cardpanel {
  display: inline-block;
  width: 100%;
}

Coupled with:

<div class="row card-container">
        {% for q in faqs %}
            <div class="cardpanel">
                <div class="card blue-grey darken-2">
                    <div class="card-content white-text">
                        <span class="card-title">{{q.question}}</span>

                    </div>
                    <div class="card-action white-text">
                        <p><i>{{q.answer}}</i></p>
                    </div>
                </div>
            </div>
        {% endfor %}
</div>

Demo here: https://jsfiddle.net/mnjh9zr3/1/

Note that you could also use column-count instead of column-width, and specify different column counts for different view-port sizes.

Edit: you can adjust the vertical spacing between cards by setting the bottom margin:

.card {
    margin: 0.5rem 0 0.5rem 0;
}

To reduce the default vertical spacing between rows (ie. between the whole section of cards and the rest of the page), add a class with a custom margin-bottom (see this SO post):

.narrow-margin {
  margin-bottom: 0px !important;
}

Demo: https://jsfiddle.net/glhr0/n5svqej1/