How to display cards horizontally with for loop in Flask

Issue

I am using a for loop to display of list of cars in cards view. However, after using the jinja template the cards started displaying vertically instead of horizontally.

Html code:

{% for car in cars %}
        <div class="row">
            <div class="column">
                <div class="card">

                    <ul>
                        <li>Car Name: {{ car.ev_name }}</li>
                        <li>Manufacturer: {{ car.ev_manufacturer }}</li>
                        <li>Year:{{ car.ev_year }}</li>
                        <li>Battery Size: {{ car['ev_battery_size'] }} (Kwh)</li>
                        <li>WLTP range: {{ car['ev_range'] }} (Km)</li>
                        <li>Cost: €{{ car['ev_cost'] }}</li>
                        <li>Power: {{ car['ev_power'] }} (Kw)</li>
                    </ul>
                        <br>
                    <form action="/car_details/{{ car.key.name }}" method="post" class="filter_form">
                        <input type="submit" name="show_details" class="button-1" value="Details"/>
                    </form>

                </div>
            </div>
        </div>
        {% endfor %}

Css code:

* {
  box-sizing: border-box;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 100%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  width: 800px;
  height: auto;
  margin:auto;
  font-weight: 600;
}

li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  width: 32%;
}

I want the cards to be displayed side by side with auto resizing of the width. Can anyone help me out?

Solution

Try using flex or grid instead of floats.

Here's how I would approach it..

.row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));
    gap : 1rem
} 
 

All you need to do is style the cards and you are done.

Answered By - kanuos