Dynamisches Rasterlayout mit benutzerdefinierten Eigenschaften und anpassbaren Elementen (@properties)

Kopierte Informationen vom CodePen:

Raster mit benutzerdefinierten Eigenschaften für Spalten und Zeilen. Es bietet auch die Möglichkeit, die Größe durch Ziehen mithilfe eines einfachen Ziehpunkts zu ändern. Die Größenänderung wird an den Rasterspannen ausgerichtet.

Basisstatus der Browserunterstützung zur Transparenz hinzugefügt.

---

Hier ist die überarbeitete Version des DEV.to-Beitrags mit hinzugefügten Codeblöcken für wichtige Teile:

---

Raster mit benutzerdefinierten Eigenschaften und anpassbaren Elementen

Hallo, DEV-Community! ?

Ich habe in letzter Zeit mit CSS-Rastern experimentiert und möchte ein lustiges Projekt teilen: Raster mit benutzerdefinierten Eigenschaften und anpassbaren Elementen. Dieser Stift begann als Versuch, ein Raster im Bento-Stil zu erstellen, entwickelte sich jedoch zu etwas Dynamischerem mit anpassbaren Rasterabmessungen und verschiebbaren, in der Größe veränderbaren Elementen. Es gibt zwar Raum für Wachstum (Drag-to-Reorder steht als nächstes auf meiner Liste!), aber ich bin gespannt darauf, was mit diesem Setup bereits möglich ist.

Lassen Sie es uns aufschlüsseln! ?

---

?️ Wie es funktioniert

@property

Ich habe die @property at-Regel verwendet, um benutzerdefinierte Eigenschaften zu definieren, die Typsicherheit hinzufügen und die Vererbung steuern. Hier ist ein Beispiel aus dem Projekt:

@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;
}

Diese Eigenschaften ermöglichen eine dynamische Anpassung des Rasterlayouts mit minimalem Aufwand, sei es über CSS oder JavaScript. Beispielsweise können Sie die Rasterstruktur festlegen mit:

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

Zum Ändern der Größe ziehen

Jedes Rasterelement verfügt über einen ziehbaren Eckgriff, mit dem Benutzer die Größe des Elements ändern und es gleichzeitig am Raster ausrichten können. Der Ziehgriff hat den folgenden Stil:

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

Die Größenänderungslogik ist in JavaScript implementiert und passt die Größe des Elements an Rasterspannen an. Hier ist ein vereinfachter Ausschnitt, wie die Größenänderung funktioniert:

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 und row-span

Die benutzerdefinierten Eigenschaften --col-span und --row-span steuern die Standardgröße jedes Rasterelements. So werden sie angewendet:

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

Dieser Ansatz vereinfacht das Styling und erleichtert das dynamische Hinzufügen oder Ändern der Größe von Elementen per Programm.

---

Testen Sie es selbst!

---

? Abschluss

Dieses Projekt zeigt die Leistungsfähigkeit von modernem CSS in Kombination mit leichtem JavaScript, um interaktive und dynamische Layouts zu erstellen. Durch die Verwendung von @property und CSS-Rasterfunktionen haben wir eine Grundlage für ein anpassbares, in der Größe veränderbares Rastersystem geschaffen.

Zukünftige Pläne umfassen die Hinzufügung einer Drag-to-Reorder-Funktion, damit Benutzer Elemente neu anordnen können, wodurch das Raster noch interaktiver wird.

Aus Gründen der Transparenz habe ich Baseline-Status-Elemente eingefügt, um die Browserunterstützung für die verwendeten experimentellen Funktionen anzuzeigen.

---

? Ressourcen

Hier finden Sie einige hilfreiche Links, um mehr über die in diesem Projekt verwendeten CSS-Funktionen zu erfahren:

• MDN: @property
• MDN: CSS-Rasterlayout
• MDN: Kaskadenschichten
• MDN: Startstile
• MDN: Relative Farben: Vereinfachen Sie Farbanpassungen direkt in CSS.
• MDN: Logische Eigenschaften: Schreiben Sie richtungsunabhängiges CSS für mehrsprachige Unterstützung.
• MDN: Containerabfragen: Passen Sie Layouts basierend auf der Größe eines Containers und nicht auf dem Ansichtsfenster an.
• MDN: Schlüsselwort currentColor: Verwenden Sie die aktuelle Textfarbe in anderen CSS-Eigenschaften wie Rahmen oder Hintergründen.
• MDN: -web-kit-Line Clamp: Steuern Sie die maximale Anzahl der in einem Blockelement angezeigten Zeilen.
• MDN: Übergangsverhalten – Allow-Discrete: Definieren Sie, wie sich diskrete Werte während Übergängen ändern.

---

Ich würde gerne Ihr Feedback oder Ihre Ideen für weitere Verbesserungen hören! Lassen Sie mich in den Kommentaren wissen, was Sie denken, oder teilen Sie den Stift mit und machen Sie ihn zu Ihrem eigenen. ?

Viel Spaß beim Codieren! ?✨

Das obige ist der detaillierte Inhalt vonDynamisches Rasterlayout mit benutzerdefinierten Eigenschaften und anpassbaren Elementen (@properties). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!