Disposition en grille dynamique avec propriétés personnalisées et éléments redimensionnables (@properties)

Informations copiées du CodePen :

Grille utilisant des propriétés personnalisées pour les colonnes et les lignes. Il permet également de faire glisser pour redimensionner, à l'aide d'une simple poignée de déplacement. Le redimensionnement est aligné sur les étendues de la grille.

Statut de base de prise en charge du navigateur ajouté pour plus de transparence.

---

Voici la version révisée de la publication DEV.to avec des blocs de code ajoutés pour les parties clés :

---

Grille avec propriétés personnalisées et éléments redimensionnables

Bonjour, communauté DEV ! ?

J'ai récemment expérimenté les grilles CSS et je souhaite partager un projet amusant : Grille avec propriétés personnalisées et éléments redimensionnables. Ce stylo a commencé comme une tentative de créer une grille de style Bento, mais a évolué vers quelque chose de plus dynamique, avec des dimensions de grille personnalisables et des éléments redimensionnables déplaçables. Bien qu'il y ait de la place pour grandir (le glisser pour réorganiser est le prochain sur ma liste !), je suis enthousiasmé par ce qui est déjà possible avec cette configuration.

Décomposons-le ! ?

---

?️ Comment ça marche

@propriété

J'ai utilisé la règle at @property pour définir des propriétés personnalisées, qui ajoutent la sécurité des types et contrôlent l'héritage. Voici un exemple du projet :

@property --grid-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --col-span {
  syntax: "<integer>";
  inherits: false;
  initial-value: 2;
}

@property --row-span {
  syntax: "<integer>";
  inherits: false;
  initial-value: 2;
}

Ces propriétés permettent d'ajuster dynamiquement la disposition de la grille avec un minimum d'effort, que ce soit via CSS ou JavaScript. Par exemple, vous pouvez définir la structure de la grille avec :

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  gap: var(--grid-gap);
}

Faites glisser pour redimensionner

Chaque élément de la grille possède une poignée de coin déplaçable qui permet aux utilisateurs de redimensionner l'élément tout en l'alignant sur la grille. La poignée de déplacement est conçue comme ceci :

.grid-element .drag-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: skyblue;
  border-radius: 50%;
  cursor: nwse-resize;
}

La logique de redimensionnement est implémentée en JavaScript, en alignant la taille de l'élément sur les étendues de la grille. Voici un extrait simplifié du fonctionnement du redimensionnement :

dragHandle.addEventListener('mousedown', (event) => {
  const startX = event.clientX;
  const startY = event.clientY;

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  function onMouseMove(e) {
    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;

    // Calculate new spans based on the grid dimensions
    const colSpan = Math.max(1, Math.round(deltaX / gridCellWidth));
    const rowSpan = Math.max(1, Math.round(deltaY / gridCellHeight));

    gridElement.style.gridColumnEnd = `span ${colSpan}`;
    gridElement.style.gridRowEnd = `span ${rowSpan}`;
  }

  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
});

col-span et row-span

Les propriétés personnalisées --col-span et --row-span contrôlent la taille par défaut de chaque élément de la grille. Voici comment ils sont appliqués :

.grid-element {
  grid-column: span var(--col-span);
  grid-row: span var(--row-span);
}

Cette approche simplifie le style et facilite l'ajout ou le redimensionnement dynamique d'éléments par programmation.

---

Testez-le vous-même !

---

? Conclusion

Ce projet met en valeur la puissance du CSS moderne combiné à du JavaScript léger pour créer des mises en page interactives et dynamiques. En utilisant @property et les fonctionnalités de grille CSS, nous avons créé les bases d'un système de grille personnalisable et redimensionnable.

Les projets futurs incluent l'ajout d'une fonctionnalité de glisser-réorganiser afin que les utilisateurs puissent réorganiser les éléments, rendant la grille encore plus interactive.

Par souci de transparence, j'ai inclus des éléments d'état de base pour montrer la prise en charge du navigateur pour les fonctionnalités expérimentales utilisées.

---

? Ressources

Voici quelques liens utiles pour en savoir plus sur les fonctionnalités CSS utilisées dans ce projet :

• MDN : @propriété
• MDN : disposition de la grille CSS
• MDN : Couches en cascade
• MDN : Styles de départ
• MDN : Relative Colors : Simplifiez les ajustements de couleurs directement dans CSS.
• MDN : Propriétés logiques : écrivez du CSS indépendant de la direction pour une prise en charge multilingue.
• MDN : Requêtes de conteneur : adaptez les mises en page en fonction de la taille d'un conteneur plutôt que de la fenêtre d'affichage.
• MDN : currentColor Mot-clé : utilisez la couleur actuelle du texte dans d'autres propriétés CSS telles que les bordures ou les arrière-plans.
• MDN : -web-kit-Line Clamp : Contrôlez le nombre maximum de lignes affichées dans un élément de bloc.
• MDN : Transition Behaviour - Allow-Discrete : Définissez comment les valeurs discrètes changent pendant les transitions.

---

J'aimerais entendre vos commentaires ou vos idées d'améliorations supplémentaires ! Faites-moi savoir ce que vous pensez dans les commentaires, ou n'hésitez pas à créer le stylo et à vous l'approprier. ?

Bon codage ! ?✨

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!