CSS peut-il afficher des lignes de quadrillage ?

Question

J'ai commencé à apprendre la disposition des grilles CSS. Dans un monde idéal, je serais capable de créer un div avec plusieurs zones de grille et de placer mes éléments exactement à l'intérieur, en fournissant des superpositions si nécessaire (un peu comme utiliser Sticky on Grid dans Illustrator).

Cela peut être très difficile sans une représentation visuelle de la grille, est-il possible de voir une grille sur mon serveur live ? J'ai essayé d'utiliser Chrome Dev Tools "Afficher le quadrillage", mais chaque fois que j'actualise ou apporte une modification, ils disparaissent.

Ou existe-t-il un meilleur système que je peux utiliser lorsque je souhaite avoir une disposition plus précise composée de plusieurs éléments et d'espaces vides ?

Answer 1

Le navigateur Firefox a cette fonction https://firefox-source-docs. mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html

Un bug a été créé pour le problème que vous rencontrez https://bugzilla.mozilla.org/show_bug.cgi?id=1342310

Answer 2

Comme @ashish-singh l'a déjà répondu, tirer parti des outils de développement de navigateur natifs est une bonne option, comme le Firefox CSS Grid Inspector déjà mentionné ou même la Chrome Inspection CSS Grid Layout feature . Ce sont des fonctionnalités puissantes qui fournissent des informations importantes sur les colonnes, les lignes, les espaces rendus, etc.

Quoi qu'il en soit, si vous souhaitez vraiment implémenter une méthode d'actualisation croisée persistante utilisant CSS, je vous recommande d'utiliser outline quelques astuces sur vos éléments de grille. Je recommande d'utiliser des contours car avec eux, les éléments peuvent s'effondrer les uns sur les autres (puisque les contours ne prennent techniquement pas de place), mais aussi parce que l'affichage et le masquage dynamiques des contours ne déclenchent pas un recalcul de la disposition du navigateur (les performances étaient meilleures lors des tests).

Voici un exemple simple montrant ce qui se passe en action :

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1px;
}

.item {
  display: grid;
  place-items: center;
  padding: 1rem;

  /* Here's the trick: */
  outline: 1px dashed magenta;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

  
1
  
2
  
3
  
4
  
5
  
6