π₯ ΠΠ°ΡΠΊΠΈΠΉ ΡΠΏΠΎΡ ΠΏΠΎ ΡΠ΅ΠΌΠ΅ Masonry Π² CSS
ΠΠ°ΠΊ ΠΏΠΈΡΠ°Π» ΡΠ°Π½ΡΡΠ΅, CSS ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π», Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ΅ΡΠΊΠΈ ΠΏΠΎ ΡΠΈΠΏΡ Pinterest.
ΠΠΎ ΠΈΠ·-Π·Π° Π΄Π΅Π±Π°ΡΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ WebKit ΠΈ Chrome ΡΠ΅Π»ΠΈΠ· Π·Π°Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ. Π Π΅ΡΠ°Π΅ΡΡΡ Π²ΠΎΠΏΡΠΎΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ.
ΠΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½Π° Ρ Π΄Π²ΡΠΌΡ ΡΡΡΠ»ΡΡΠΌΠΈ:
- ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display: masonry. ΠΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π° Chrome.
ΠΠΎ ΠΌΠ½Π΅, ΡΠ°ΠΊ ΡΡΠΎ Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ΅ ΠΈ Π»Π°ΠΊΠΎΠ½ΠΈΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π΅.
ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅, ΡΡΠΎ Ρ Π²Π°Ρ ΡΠ΅ΡΠΊΠ° ΠΏΠΎΡΡΡΠΎΠ΅Π½Π° Π½Π° flex/grid ΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, flex-direction ΠΈ Ρ.Π΄.). ΠΠΎ Π½Π° ΠΊΠ°ΠΊΠΎΠΌ-ΡΠΎ ΠΈΠ· ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ display: masonry. Π’ΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ½ΠΎΠ²Π° ΠΏΠΈΡΠ°ΡΡ "ΠΏΠ°ΡΠΊΡ" Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ masonry-ΡΠ΅ΡΠΊΠΈ. ΠΡΠΎ ΡΠΆΠ΅ Π½Π΅ ΡΠ°ΠΊ ΡΠ°Π΄ΡΠΆΠ½ΠΎ ΠΈ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π³ΡΠΎΠΌΠΎΠ·Π΄ΠΊΠΎ.
- ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ grid. ΠΠΎΠΌΠ°Π½Π΄Π° WebKit ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ collapsed Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ» grid-template-rows ΠΈ grid-template-columns.
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Π²ΡΠ΅Π³Π΄Π° grid-ΡΠ΅ΡΠΊΡ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ "ΡΠ²ΠΈΡΡΠΈΡΡ" ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΡ, Π½Π΅ ΠΌΠ΅Π½ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅.
ΠΠΎ ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ»ΠΎΠΆΠ½ΠΈΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΡΠ΅ΡΠΊΠΈ.
ΠΠ°ΠΊ ΠΈΡΠΎΠ³, ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, Π² ΠΊΠ°ΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π° ΡΡΠ°ΠΏΠ΅ ΡΠ΅Π»ΠΈΠ·Π°, Π½ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΡΡΠ²ΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠΈΠ»Ρ Π΄Π΅ΠΌΠΎΠΊΡΠ°ΡΠΈΠΈ, ΠΏΡΠΈΠ½ΡΠ² ΡΡΠ°ΡΡΠΈΠ΅ Π² ΠΎΡΠΊΡΡΡΠΎΠΌ issue ΠΎΡ W3C.
ΠΠΎΠ»ΡΡΠ΅ ΠΎΠ± Π°ΠΉΡΠΈ ΠΈ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅ Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ Π² ΠΌΠΎΠ΅ΠΌ Π’ΠΠ: