Je dois placer 7 Voici ce que j'ai fait: p> p> div code> s (images) en deux rangées, 3 en 1ère rangée et 4 en 2e rangée. Top 3 Div code> S doit être centré et le bas 4 peut prendre tout l'espace. 
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
3 Réponses :
CSS change:
Éliminez tout le code CSS (dans votre question) et remplacez-le avec ceci. Utilisation de Template-Template-colonnes: 1FR Repeat (3, 170px) 1fr; Code> était en train de gâcher les choses car il ne représentait pas les deux rangées de boîtes. Utilisation de Template-Template-colonnes: répétition (ajustement automatique, Minmax (170px, 1fr)); code> permet au navigateur / système de déterminer le placement réel de cette ligne spécifique. et em> strong> il permet à chaque rangée faire leur propre chose. Utilisation de Place-Éléments: Centre d'extrémité; code> indique que vous souhaitez que tout axé centré, mais que vous souhaitez que le système commence à la fin, puis centrifugez-le. Cela empêche que les choses soient coincées à l'extrême gauche. Remarque: vous n'avez besoin d'aucun autre CSS pour l'effet que vous souhaitez. Juste le .Content code> et box code> classes. Rien d'autre. <div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="content">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
Merci @elbrant. J'ai proposé des solutions similaires avec deux grilles / rangées distinctes.
Vous pouvez créer un grille de colonne em> à l'aide de ajustez la colonne sur em> à 4 pour la première rangée et à 3 pour la deuxième ligne. p> li>
Utilisez Vous pouvez maintenant ajuster em> le couvre em> ou utilisez voir une démo ci-dessous: p> p> Template-colonnes: répétez (12, 1fr) code>:
justify-items: Centre code> à Align em> les conteneurs au centre pour obtenir l'alignement central. P> LI>
justify-auto code> pour la disposition requise. p> li >
ol>
<div class="content">
<div class="box">
<img src="https://via.placeholder.com/150" />
</div>
<div class="box">
<img src="https://via.placeholder.com/150" />
</div>
<div class="box">
<img src="https://via.placeholder.com/150" />
</div>
<div class="box">
<img src="https://via.placeholder.com/150" />
</div>
<div class="box">
<img src="https://via.placeholder.com/150" />
</div>
<div class="box">
<img src="https://via.placeholder.com/150" />
</div>
<div class="box">
<img src="https://via.placeholder.com/150" />
</div>
</div>
Bonne réponse ! !!
Une grille, comme son nom l'indique, doit être façonnée comme une grille. Que les ménes que le nombre de colonnes doivent être l'espace de toutes les lignes.
Donc, votre style pour les zones n'est pas accepté par le navigateur, car il dispose de 5 colonnes pour la première rangée et 4 pour la deuxième rangée. P>
@kukkuz a déjà posté une réponse corrigeant ce problème. Ici, vous avez une autre possibilité, dans mes vies plus ajustées à votre demande. P>
Quoi qu'il en soit, la meilleure solution pour cette disposition utiliserait Flex (puisque la mise en page n'est pas une vraie grille) p> p>
<div class="content"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> </div>
Merci beaucoup. C'était de simples mathématiques que je ne pouvais pas obtenir.
Enlevez l'espace de votre sélecteur et utilisez le nom que vous avez défini dans les zones.
@Tmaniafif est-ce quelque chose à faire avec la solution ou simplement le coiffage du code?
C'est pour corriger votre code (en quelque sorte la solution) qui ne va pas. L'espace dans le sélecteur a signification, il ne s'agit pas seulement de coiffer le code ( Stackoverflow.com/q/1126338/8620333 )