CSS peut-il afficher des lignes de quadrillage ?
P粉133321839
P粉133321839 2024-03-31 20:38:21
0
2
591

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 ?

P粉133321839
P粉133321839

répondre à tous(2)
P粉530519234

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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal