Здравствуйте, я изучаю html и css, сейчас практикуюсь и столкнулся с проблемой. У меня имеется база данных с информацией о карточках товаров. Их я загружаю в html документ, все хорошо, но эти карточки выстраиваются в столбик, а мне нужно в ряд, что бы когда количество товаров заполняли полный ряд, последующие переносились на новую строку.
Код прикрепил ниже.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalog</title>
<link rel="stylesheet" href="{{ url_for('static', filename='Catalog.css')}}">
</head>
<body>
<header>
<div class="All_header_menu">
<div class="Logo">
<h1>
<img src="{{ url_for('static', filename='logo.jpg')}}" width="100px">
</h1>
</div>
<div class="Top_menu">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Catalog">Catalog</a></li>
<li><a href="AboutUs">About Us</a></li>
<li><a href="Contact">Contact</a></li>
<li><a href="Login">Login</a></li>
</ul>
</div>
</div>
</header>
<div class="conttainer mt-5">
{% for el in product %}
<div class="row">
<div class="col-md-4">
<div class="product">
<div class="image">
<img src="{{ el.image }}" alt="">
</div>
<div class="info">
<h3>{{ el.name }}</h3>
<div class="info-price">
<span class="price">{{ el.prise }}<small>₽</small></span>
<button class="add-to-cart"><ion-icon name="cart-outline"></ion-icon></button>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
{
margin: 0;
padding: 0;
}
body{
background: black;
color: white;
}
header{
display: flex;
justify-content: center;
}
.Top_menu{
margin-right: 25px;
display: inline-block;
vertical-align: middle;
background: #1a1a1a;
border-radius: 20px;
}
.Logo{
margin-right: 25px;
display: inline-block;
vertical-align: middle;
}
.Top_menu li{
margin-right: 25px;
display: inline-block;
vertical-align: middle;
}
.Top_menu a{
vertical-align: middle;
font-family: arial;
font-size: 15px;
color: white;
text-decoration: none;
}
.Top_menu a:hover{
color: #DA70D6;
}
.Logo h1{
vertical-align: middle;
}
.product {
width: 250px;
background: #1a1a1a;
border-radius: 20px;
background: #1a1a1a;
border-radius: 20px;
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
}
.image img {
height: 250px;
object-fit: cover;
border-radius: 7px;
}
.info h3 {
font-family: arial;
font-size: 21px;
color: white;
text-decoration: none;
margin-bottom: 0;
margin-top: 5px;
margin-left: 5px;
}
.info-price {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
margin-top: 5px;
}
.add-to-cart {
border: none;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
border-radius: 10px;
margin-right: 10px;
margin-block-end: 10px;
}
.add-to-cart:hover {
border: none;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: #DA70D6;
border-radius: 10px;
margin-right: 10px;
margin-block-end: 10px;
}
.price {
font-family: arial;
font-weight: 700;
font-size: 18px;
color: white;
text-decoration: none;
margin-left: 10px;
margin-block-end: 10px;
}
