responsive grid of hexagons

CSS und HTML Responsive Grid von Sechseckern.

Live -Demo anzeigen

Flexbox gegen CSS -Gitter

Diese Filiale verwendet Flexbox , um die Sechsecke zu layout. Eine andere Version mit CSS-Gitterlayout ist in der CSS-Grid-Filiale verfügbar.
CSS Grid bietet einen niedrigeren Browserunterstützung als Flexbox (siehe Caniuse), erleichtert den Sechskantabstand jedoch leichter zu verstehen und zu arbeiten.

Merkmale

• Das Sechskantraster reagiert nach der Breite des Containers ( #hexGrid )
• Sechskassen behalten ihr Seitenverhältnis nach ihrer Breite
• Die Anzahl der Sechsecke pro Zeile ist adaptiv und ändert sich von 5 auf 2 bei Medienabfragen -Bruchpunkten
• Ein Titel und ein kurzer Text werden auf dem Hexagon -Schwebe und Fokus einrutschen
• Sechsecke und können mit der Registerkarte (Tastaturnavigation) durchlaufen werden.

Text- und Schwebeffekt:

Das CSS für den Text und den Schwebeffekt wird in den hexagons.css identifiziert. CSS Stylesheet. Sie können es vollständig entfernen oder den Schwebeffekt, die Schriftart und die Schriftgröße ändern ...

Ändern der Anzahl der Sechskantungen pro Zeile:

Die Breite der .hex -Elemente definiert die Anzahl der Sechsecke pro Reihe. Die CSS -Eigenschaften, die geändert werden müssen, sind alle in den Medienabfragen unter der HEXAGON SIZING AND EVEN ROW INDENTATION .
Jede Medienabfrage ändert die Anzahl der Sechskassen pro Zeile.

Um die Anzahl der Sechskassen pro Reihe zu ändern , müssen Sie:

Breite von .hex

Passen Sie die mit den .hex -Elementen an mit: an:

 w = width of the .hex elements in percent
x = the number of hexagons you want on the odd rows (1st, 3rd, 5th...)

w = 100 / x

Beispiel für 8 Sechsecke auf ungeraden Zeilen (dies bedeutet, dass es 7 Sechsecke auf gleichmäßige Reihen geben wird):

 w = 100 / 8 = 12.5%

Nehmen Sie sogar Zeilen ein

Die gleichmäßigen Reihen (2., 4., 6. ...) sind auf dem ersten Sechseck mit sogar Reihen mit margin-left eingerückt.

Der Selektor:
Sie können dieses Hexagon mit dem .hex:nth-child(an+b) auswählen (weitere Informationen zum nth-child() Pseudo-Klasse auf MDN). Um den Selektor zu bestimmen, können Sie diese Regel verwenden:

 .hex:nth-child(an+b)

x = the number of hexagons on odd rows(1st, 3rd, 5th...)
Y = the number of hexagons on even rows(2nd, 4th, 6th...)
a = x + y
b = x + 1

Beispiel für 8 Sechsecke auf ungeraden Zeilen (dies bedeutet, dass es 7 Sechsecke auf gleichmäßige Reihen geben wird):

 x = 8
y = 7
a = 8 + 7 = 15
b = 8 + 1 = 9

The selector is : .hex:nth-child(15n+9)

Wert von Margen-Links:
Der Wert der linken Marge ist die halbe Breite eines Sechsecks, also für 8 Sechskantungen in der ungeraden Reihe:

 with of hexagons = 12.5% (see "width of .hex")
margin-left = 12.5 / 2 = 6.25%

---

Erstellt von Web-Tiki