Pourquoi ma disposition de grille CSS se brise-t-elle ?

Dépannage des problèmes de zone de grille dans la grille CSS

Lors de la mise en œuvre du système de grille CSS, il est essentiel de s'assurer que les zones sont correctement disposées. . Si vous rencontrez des problèmes, vérifiez les points suivants :

Garantir un nombre de colonnes cohérent

Lors de l'utilisation de la propriété grid-template-areas, les valeurs de chaîne doivent avoir un nombre égal de colonnes. En effet, chaque spécification de ligne dans la chaîne correspond à une ligne dans le modèle de grille et chaque mot dans une spécification de ligne correspond à une colonne.

Dans votre code fourni, vous avez une ligne avec deux colonnes ("logo faq") mais une autre ligne avec une seule colonne ("à propos de nous"). Cette incohérence provoque un problème de mise en page.

Code corrigé :

.grid {<br> affichage : grille;<br> grille-modèle-colonnes : 1fr 1fr;<br> grille-modèle-lignes : 1fr 1fr;<br>grid-template-areas: "logo faq" "à propos de nous à propos de nous";<br>}<br>

 <div class="logo"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">LOGO