responsive grid of hexagons

CSS dan HTML Responsif Grid of Hexagons.

Lihat demo langsung

Flexbox vs CSS Grid

Cabang ini menggunakan Flexbox untuk tata letak heksagon. Versi lain menggunakan tata letak kisi CSS tersedia di cabang CSS-Grid.
CSS Grid memiliki dukungan browser yang lebih rendah daripada Flexbox (lihat CANIUSE) tetapi membuat jarak segi enam lebih mudah dipahami dan dikerjakan.

Fitur

• Grid Hexagon responsif sesuai dengan lebar wadah ( #hexGrid )
• Hexagon menjaga rasio aspek mereka sesuai dengan lebar mereka
• Jumlah Hexagon per baris adaptif dan berubah dari 5 menjadi 2 pada poin break kueri media
• Judul dan teks pendek meluncur di atas hexagon hover dan fokus
• Hexagons dan dapat bersepeda dengan tab (navigasi keyboard)

Teks dan Efek Mengendapkan:

CSS untuk efek teks dan hover diidentifikasi dalam stylesheet hexagons.css . Anda dapat menghapusnya sepenuhnya atau mengubah efek hover, font, ukuran font ...

Mengubah jumlah segi enam per baris:

Lebar elemen .hex mendefinisikan jumlah segi enam per baris. Properti CSS yang perlu diubah semuanya ada dalam kueri media di bawah HEXAGON SIZING AND EVEN ROW INDENTATION .
Setiap kueri media mengubah jumlah segi enam per baris.

Untuk mengubah jumlah segi enam per baris , Anda harus:

Lebar .hex

Kustomisasi dengan elemen .hex dengan:

 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

Contoh untuk 8 segi enam pada baris aneh (ini berarti akan ada 7 segi enam pada baris bahkan):

 w = 100 / 8 = 12.5%

Indentasi bahkan baris

Baris genap (ke-2, ke-4, ke-6 ...) dilekik dengan margin-left pada segi enam pertama dari baris bahkan.

Pemilih:
Anda dapat memilih segi enam itu dengan pemilih .hex:nth-child(an+b) (info lebih lanjut tentang nth-child() -kelas pseudo di mdn). Untuk menentukan pemilih, Anda dapat menggunakan aturan ini:

 .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

Contoh untuk 8 segi enam pada baris aneh (ini berarti akan ada 7 segi enam pada baris bahkan):

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

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

Nilai margin-kiri:
Nilai margin kiri adalah setengah lebar satu segi enam jadi untuk 8 segi enam di baris aneh:

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

---

Dibuat oleh Web-Tiki