Fix vertical space between projetcs on home page

Author: Benbb96

assets/css/style.css

@@ -45,6 +45,34 @@ footer p a i:hover {
     align-items: center;
 }
 
+.flex-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.flex-col {
+    flex: 1 1 calc(33.333% - 20px); /* 3 colonnes avec un espace de 20px */
+    max-width: calc(33.333% - 20px); /* Limite la largeur pour respecter la grille */
+    box-sizing: border-box; /* Inclut le padding dans la largeur */
+}
+
+@media (max-width: 768px) {
+    .flex-col {
+        flex: 1 1 calc(50% - 20px); /* 2 colonnes sur les écrans moyens */
+        max-width: calc(50% - 20px);
+    }
+}
+
+@media (max-width: 576px) {
+    .flex-col {
+        flex: 1 1 100%; /* 1 colonne sur les petits écrans */
+        max-width: 100%;
+    }
+}
+
+
 .spot-tag {
     margin-right: 5px;
     padding: 4px 7px

base/templates/base/home.html

@@ -12,21 +12,21 @@
 
 {% block content %}
     <div class="container-fluid bg-3 text-center">
-        <div class="row">
-        {% for projet in object_list %}
-            {% if projet.actif %}
-            <div class="col-md-4 col-sm-6 col-xs-12">
-                <h3>
+        <div class="flex-row">
+            {% for projet in object_list %}
+                {% if projet.actif %}
+                <div class="flex-col">
+                    <h3>
+                        <a href="{{ projet.get_absolute_url }}"{% if projet.external %} target="_blank"{% endif %}>
+                            {{ projet.nom }}
+                        </a>
+                    </h3>
                     <a href="{{ projet.get_absolute_url }}"{% if projet.external %} target="_blank"{% endif %}>
-                        {{ projet.nom }}
+                        <img src="{% if projet.image %}{{ projet.image.url }}{% endif %}" class="img-responsive projet" style="max-height: 300px; margin: auto" alt="{% trans "Project" %} {{ projet.nom }}">
                     </a>
-                </h3>
-                <a href="{{ projet.get_absolute_url }}"{% if projet.external %} target="_blank"{% endif %}>
-                    <img src="{% if projet.image %}{{ projet.image.url }}{% endif %}" class="img-responsive projet" style="max-height: 300px; margin: auto" alt="{% trans "Project" %} {{ projet.nom }}">
-                </a>
-            </div>
-            {% endif %}
-        {% endfor %}
+                </div>
+                {% endif %}
+            {% endfor %}
         </div>
     </div>
 {% endblock %}