Bonjour,
La piste avec
fit-content et
auto-fill et tes
mediaqueires peut être adapter à ce que tu veut faire en gérant la taille du titre de la boite .
L'idée est de se servir du titre pour donner une largeur au conteneur principal via les
mediaqueries valider par le nombre d'enfant disponible dans la grille, pour ne pas avoir de
cellules vides.
Voici un exemple, qui utilise calc() et var() pour donner une largeur de X colonnes au titre (cela peut-être un autre conteneur ou un pseudo-element.
https://codepen.io/gc-nomade/pen/JoGoBmx
Base HTML reprise de démo:
<section>
<h1>Titre</h1>
<ul class="grid">
<li>card 1</li>
<li>card 2</li>
<li>card 3</li>
<li>card 4</li>
<li>card 5</li>
</ul>
</section>
Le CSS:
MediasQueries:
* {
box-sizing: border-box;
}
/* reglage du nombre de colonnes via fit-content et largeur de H1 en fonction du nombre d'enfant */
:root {
--qw: 1;
@media (width > 1000px) {
section:has(ul.grid li:nth-child(2)) {
--qW: 2;
}
}
@media (width > 1190px) {
section:has(ul.grid li:nth-child(3)) {
--qW: 3;
}
}
@media (width > 1380px) {
section:has(ul.grid li:nth-child(4)) {
--qW: 4;
}
}
@media (width > 1570px) {
section:has(ul.grid li:nth-child(5)) {
--qW: 5;
}
}
@media (width > 1760px) {
section:has(ul.grid li:nth-child(6)) {
--qW: 6;
}
}
@media (width > 1950px) {
section:has(ul.grid li:nth-child(7)) {
--qW: 7;
}
}
@media (width > 2140px) {
section:has(ul.grid li:nth-child(8)) {
--qW: 8;
}
}
@media (width > 2330px) {
section:has(ul.grid li:nth-child(9)) {
--qW: 9;
}
}
}
CSS de base
/* reduction de la largeur au contenu */
section {
width: fit-content;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
grid-auto-rows: 1fr;
}
h1 {
color: gray;
text-align: center;
border-bottom: double;
/* largeur minimale du conteneur */
min-width: calc(12.5rem * var(--qW));
}
cdt
