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!