ΠΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ | htmlbook.ru
Π’Π΅ΠΊΡΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π΄Π°Π²Π½ΠΎ ΡΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² ΠΈΠ·Π΄Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΌ Π΄Π΅Π»Π΅ ΠΏΡΠΈ Π²ΡΡΡΡΠΊΠ΅ Π³Π°Π·Π΅Ρ, ΠΆΡΡΠ½Π°Π»ΠΎΠ² ΠΈ ΠΊΠ½ΠΈΠ³. Π§Π΅Π»ΠΎΠ²Π΅ΠΊΡ ΠΊΠΎΠΌΡΠΎΡΡΠ½Π΅Π΅ ΡΠΈΡΠ°ΡΡ ΡΠ΅ΠΊΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ ΡΠ°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΡΡΠΎΠ»Π±ΡΡ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠ° ΡΠ°ΠΉΡΠ°Ρ ΡΡΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ» Π΄Π΅Π»Π°ΡΡ ΠΈΠ·-Π·Π° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΡΡΠΈ Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π§ΠΈΡΠ°ΡΠ΅Π»Ρ Π²Π½Π°ΡΠ°Π»Π΅ ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ ΠΎΠ΄Π½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡ Π²Π½ΠΈΠ· Π΄ΠΎ ΠΊΠΎΠ½ΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ Π²Π΅ΡΠ½ΡΡΡΡΡ Π½Π°Π²Π΅ΡΡ ΠΊ Π½Π°ΡΠ°Π»Ρ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π½Π΅ΡΠ΄ΠΎΠ±Π½ΠΎ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ» ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΈΠ·-Π·Π° ΡΡΡΠ΅ΠΊΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅.
CSS3 ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΡΠ°Π·Ρ ΡΠ΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ: column-count, column-gap, column-width ΠΈ column-rule. ΠΠ»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. Π‘ΡΠΈΠ»Π΅Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ
- column-count β ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
- column-gap β ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ.
- column-width β ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
- column-rule β ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π»ΠΈΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ.
Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΡΡΠ½ΠΈΡΡ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Β«ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎΒ» ΠΈ Β«ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°Β». Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-count Π·Π°Π΄Π°ΡΡ Π½Π΅ ΡΠΎΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π° ΡΠΊΠΎΡΠ΅Π΅ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅. ΠΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΡΡΠ°ΡΠ°Π΅ΡΡΡ ΡΠ°Π·Π±ΠΈΡΡ ΡΠ΅ΠΊΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° ΡΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π½ΠΎ ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠΊΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠΎΠΊΡΠ°ΡΠ°ΡΡ ΡΠΈΡΠ»ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎΡΡΡ ΡΡΠ΅Π½ΠΈΡ. ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΎΠ±ΡΡΠΎΠΈΡ ΠΈ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-width ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΠΏΡΠΈ ΡΡΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ, Π΅ΡΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ΅Π½ Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
ΠΡΠ°ΡΠ·Π΅Ρ Chrome ΠΈ Safari ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ -webkit, Π° Firefox ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ -moz. ΠΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ (ΠΏΡΠΈΠΌΠ΅ΡΒ 1).
ΠΡΠΈΠΌΠ΅Ρ 1. Π’ΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
HTML5CSS 3IE 9IE 10CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠΎΠ»ΠΎΠ½ΠΊΠΈ</title> <style> . column { -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; -webkit-column-rule: 1px solid #ccc; -moz-column-rule: 1px solid #ccc; column-rule: 1px solid #ccc; } </style> </head> <body> <div> <p>ΠΠΈΡΡΠΈΠ½ΠΊΡΠΈΡ Π΄ΠΈΡΠΊΡΠ΅Π΄ΠΈΡΠΈΡΡΠ΅Ρ Π½Π΅ΠΏΡΠ΅Π΄Π²ΠΈΠ΄Π΅Π½Π½ΡΠΉ ΠΈΠ½ΡΠ΅Π»Π»Π΅ΠΊΡ, ΡΡΠΈΡΡΠ²Π°Ρ ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ»ΠΈ ΡΠΎΠ±ΠΎΠΉ ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΡΡΠΈΠ½Π³Π° Π΄Π»Ρ Π½Π΅ ΠΎΠΊΡΠ΅ΠΏΡΠ΅Π³ΠΎ Π΅ΡΠ΅ Π½Π΅ΠΌΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ. ΠΠΏΠΎΠ΄Π΅ΠΉΠΊΡΠΈΠΊΠ° ΠΏΠΎΡΠΎΠΆΠ΄Π΅Π½Π° Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ. ΠΠ»Π°ΡΠΎΠ½ΠΎΠ²ΡΠΊΠ°Ρ Π°ΠΊΠ°Π΄Π΅ΠΌΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΡΡΠ°Π½ΡΡΠ΅Π½Π΄Π΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΠ΅Π΄ΠΌΠ΅Ρ Π΄Π΅ΡΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, Ρ ΠΎΡΡ Π² ΠΎΡΠΈΡΠΈΠΎΠ·Π΅ ΠΏΡΠΈΠ½ΡΡΠΎ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ΅. ΠΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΊ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΡΡΠΈ ΡΠ΅Π°Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠ²ΠΈΠ·ΠΌ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΠΈΠ³Π²Π°ΡΡ ΡΡΠΈΡΠ°Π» ΠΊΡΠΈΡΠ΅ΡΠΈΠ΅ΠΌ ΠΈΡΡΠΈΠ½Π½ΠΎΡΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΠΈ ΠΎΠ±ΡΠ΅Π·Π½Π°ΡΠΈΠΌΠΎΡΡΡ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΎΠΏΠΎΡΡ Π² ΠΎΠ±ΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΠΌΠΈΡΠ΅. ΠΡΠ»ΡΡ Π΄ΠΆΠ°ΠΉΠ½ΠΈΠ·ΠΌΠ° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΏΠΎΠΊΠ»ΠΎΠ½Π΅Π½ΠΈΠ΅ ΠΠ°Ρ Π°Π²ΠΈΡΠ΅ ΠΈ Π΄ΡΡΠ³ΠΈΠΌ ΡΠΈΡΡΡ Π°Π½ΠΊΠ°ΡΠ°ΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ Π³Π΅ΡΠ΅ΡΠΎΠ½ΠΎΠΌΠ½Π°Ρ ΡΡΠΈΠΊΠ° ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΡΠΈΠΏΠΈΡΠ½ΡΠΉ ΠΏΡΠΈΠ½ΡΠΈΠΏ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ, ΠΏΡΠΈ ΡΡΠΎΠΌ Π±ΡΠΊΠ²Ρ Π, Π, I, Π ΡΠΈΠΌΠ²ΠΎΠ»ΠΈΠ·ΠΈΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΠ±ΡΠ΅ΡΡΠ²Π΅ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΠΎΠ±ΡΠ΅ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΠ°ΡΡΠ½ΠΎΡΡΠ²Π΅ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈ ΡΠ°ΡΡΠ½ΠΎΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΡΠΆΠ΄Π΅Π½ΠΈΡ.
ΠΠ°ΡΠ°ΡΡΠΈΡ, ΠΏΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ, Π½Π΅ΠΏΡΠ΅Π΄Π²Π·ΡΡΠΎ ΠΎΡΠΏΠΎΡΠΎΠ±Π»ΡΠ΅Ρ ΠΎΠ½ΡΠΎΠ»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π΄Π°ΠΎΡΠΈΠ·ΠΌ, ΠΏΡΠΈ ΡΡΠΎΠΌ Π±ΡΠΊΠ²Ρ Π, Π, I, Π ΡΠΈΠΌΠ²ΠΎΠ»ΠΈΠ·ΠΈΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΠ±ΡΠ΅ΡΡΠ²Π΅ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΠΎΠ±ΡΠ΅ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΠ°ΡΡΠ½ΠΎΡΡΠ²Π΅ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈ ΡΠ°ΡΡΠ½ΠΎΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΡΠΆΠ΄Π΅Π½ΠΈΡ.</p> <p>ΠΡΠ»ΡΡ Π΄ΠΆΠ°ΠΉΠ½ΠΈΠ·ΠΌΠ° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΏΠΎΠΊΠ»ΠΎΠ½Π΅Π½ΠΈΠ΅ ΠΠ°Ρ Π°Π²ΠΈΡΠ΅ ΠΈ Π΄ΡΡΠ³ΠΈΠΌ ΡΠΈΡΡΡ Π°Π½ΠΊΠ°ΡΠ°ΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ΅Π½. ΠΠ»Π°ΡΠΎΠ½ΠΎΠ²ΡΠΊΠ°Ρ Π°ΠΊΠ°Π΄Π΅ΠΌΠΈΡ ΡΠ°ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅Ρ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΌΡΡΠ» ΠΆΠΈΠ·Π½ΠΈ, ΡΡΠΈΡΡΠ²Π°Ρ ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ»ΠΈ ΡΠΎΠ±ΠΎΠΉ ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΡΡΠΈΠ½Π³Π° Π΄Π»Ρ Π½Π΅ ΠΎΠΊΡΠ΅ΠΏΡΠ΅Π³ΠΎ Π΅ΡΠ΅ Π½Π΅ΠΌΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ. ΠΡΡΡΠ΅Π½ΠΈΠ΅ ΠΌΠΈΡΠ°, ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π²ΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ, ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π΅Ρ ΡΠ·ΡΠΊ ΠΎΠ±ΡΠ°Π·ΠΎΠ², ΡΡΠΈΡΡΠ²Π°Ρ ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ»ΠΈ ΡΠΎΠ±ΠΎΠΉ ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΡΡΠΈΠ½Π³Π° Π΄Π»Ρ Π½Π΅ ΠΎΠΊΡΠ΅ΠΏΡΠ΅Π³ΠΎ Π΅ΡΠ΅ Π½Π΅ΠΌΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ. ΠΡΠ²ΠΎΠ±ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠΈΠ»ΠΎΡΠΎΡΡΠΊΠΈ ΠΎΡΠΏΠΎΡΠΎΠ±Π»ΡΠ΅Ρ Π·Π°ΠΊΠΎΠ½ ΠΈΡΠΊΠ»ΡΡΡΠ½Π½ΠΎΠ³ΠΎ ΡΡΠ΅ΡΡΠ΅Π³ΠΎ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠ²ΡΡΠ½ΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΡ.</p> </div> </body> </html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Chrome ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 2. ΠΠΌΠ΅ΡΡΠΎ ΡΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΌΡ Π½Π°Π±Π»ΡΠ΄Π°Π΅ΠΌ Π΄Π²Π΅ ΠΈΠ·-Π·Π° ΠΌΠ°Π»ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠΊΠ½Π° ΡΠΈΡΠ»ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π²ΡΡΠ°ΡΡΠ΅Ρ Π΄ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ, ΠΏΡΠΈ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°, Π½Π°ΠΎΠ±ΠΎΡΠΎΡ, ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΠΎΠΊΡΠ°ΡΠΈΡΡΡ Π΄ΠΎ ΠΎΠ΄Π½ΠΎΠΉ.
Π ΠΈΡ. 2. ΠΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ
Π§ΡΠΎΠ±Ρ ΡΡΠ΅Π·Π°ΡΡ Π½Π°Π±ΠΎΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΡ ΡΡΠΈΠ»Π΅Π²ΡΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ columns, ΠΎΠ½ΠΎ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΈΡ ΡΠΈΡΠ»ΠΎ (ΠΏΡΠΈΠΌΠ΅ΡΒ 2).
ΠΡΠΈΠΌΠ΅Ρ 2. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ columns
.column { -webkit-columns: 200px 3; -moz-columns: 200px 3; columns: 200px 3; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; -webkit-column-rule: 1px solid #ccc; -moz-column-rule: 1px solid #ccc; column-rule: 1px solid #ccc; }
ΠΠΏΡΡΡ ΠΆΠ΅, Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΈ ΠΏΡΠ΅ΡΠΈΠΊΡΡ. Π Π°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, Π΅ΡΠ»ΠΈ ΡΡΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ, ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π·Π°Π΄Π°Π²Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ. ΠΡΠ»ΠΈ column-gap ΠΈ column-rule Π½Π΅ ΡΠΊΠ°Π·Π°Π½Ρ, Π»ΠΈΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ, Π½ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ΅ΡΠΊΡ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅ΡΠΊΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ²
Π¨Π°Π³ 1) Π΄ΠΎΠ±Π°Π²ΠΈΡΡ HTML:
ΠΡΠΈΠΌΠ΅Ρ
<div>
Β <div></div>
Β <div
class=»column»></div>
</div>
Π¨Π°Π³ 2) Π΄ΠΎΠ±Π°Π²ΠΈΡΡ CSS:
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π΄Π²Π° ΡΠ°Π²Π½ΡΡ ΡΡΠΎΠ»Π±ΡΠ°:
ΠΡΠΈΠΌΠ΅Ρ Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ
.column {Β Β Β float: left;
Β Β Β width: 50%;
}
/* Clear floats after the
columns */
.row:after {
Β Β Β content: «»;
Β Β Β
display: table;
Β Β Β clear: both;
}
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ², Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ CSS Flexbox. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² Internet Explorer 10 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ Π²Π΅ΡΡΠΈΡΡ .
ΠΡΠΈΠΌΠ΅Ρ Flex
.row {Β Β Β display: flex;
}
.column {
Β Β Β flex: 50%;
}
ΠΡΠΎ Π΄ΠΎ Π²Π°Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ ΠΈΠ»ΠΈ Flex Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΌΠ°ΠΊΠ΅ΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° IE10 ΠΈ Down, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ float.
Π‘ΠΎΠ²Π΅Ρ: Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π³ΠΈΠ±ΠΊΠΎΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΎΠΊΠ½Π°, ΠΏΡΠΎΡΠΈΡΠ°ΠΉΡΠ΅ Π½Π°ΡΡ CSS Flexbox Π³Π»Π°Π²Π΅.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π΄Π²Π° Π½Π΅ΡΠ°Π²Π½ΡΡ ΡΡΠΎΠ»Π±ΡΠ°:
ΠΡΠΈΠΌΠ΅Ρ
.column {Β Β Β float: left;
}
.left {
Β Β Β width: 25%;
.right {
Β Β Β
width: 75%;
}
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ²:
ΠΡΠΈΠΌΠ΅Ρ
/* Responsive layout — when the screen is less than 600px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
Β Β Β .column {
Β Β Β Β Β Β Β
width: 100%;
Β Β Β }
}
Π‘ΠΎΠ²Π΅Ρ: ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° Π½Π°Ρ ΡΠ°ΠΉΡ CSS Π²Π΅ΡΡΡΠΊΠ° ΡΡΠ΅Π±Π½ΠΈΠΊ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
Π‘ΠΎΠ²Π΅Ρ: ΠΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° Π½Π°Ρ CSS ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΡΠ΅Π±Π½ΠΈΠΊ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΡΠ΅ΡΠΎΠΊ.
ΠΡΠΎΡΡΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ html/css? (Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ)
ΠΠ½Π΅ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΄Π½ΠΎ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ html/css Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ:
ΠΠ΄Π΅ Π»Π΅Π²Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ-ΡΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΡΠ°Π²Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ-ΡΡΠΎ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅ΠΌΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΠ·ΠΎΠ²Π° ΠΌΠ΅ΡΠΎΠ΄Π° ASP.Net’s RenderBody
. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π΅ ΠΏΠΎΠ²Π΅ΡΠΈΡΡ, Π½ΠΎ Ρ ΡΠΆΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΠΎΠ² ΠΏΡΡΠ°ΡΡΡ ΡΡΠΎ Π²ΡΡΡΠ½ΠΈΡΡ. Π― ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡ Π»ΠΈΠ±ΠΎ ΠΏΡΠ°Π²ΡΡ ΡΠ΅ΠΊΡΠΈΡ, Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°ΡΡΡΡΡΡ ΠΏΠΎΠ΄ Π»Π΅Π²ΠΎΠΉ ΡΠ΅ΠΊΡΠΈΠ΅ΠΉ, Π·Π°Π½ΠΈΠΌΠ°ΡΡΠ΅ΠΉ 100% ΡΠΈΡΠΈΠ½Ρ, Π»ΠΈΠ±ΠΎ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡΡΡ, Π° ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Chrome Π³ΠΎΠ²ΠΎΡΠΈΡ, ΡΡΠΎ Π΅Π΅ ΡΠΈΡΠΈΠ½Π° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π― ΡΡΠ²ΡΡΠ²ΡΡ ΡΠ΅Π±Ρ ΠΏΠΎΠ»Π½ΡΠΌ ΠΈΠ΄ΠΈΠΎΡΠΎΠΌ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π»Π΅Π³ΠΊΠΎ, ΠΊΠ°ΠΊ ΠΏΠΈΡΠΎΠ³. Π― ΠΌΠΎΠ³ Π±Ρ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠΌΠΎΡΡ?
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΡΡΠΎΡΠ½ΠΈΠΊ Kyle Β Β 05 ΠΈΡΠ½Ρ 2012 Π² 20:32
3 ΠΎΡΠ²Π΅ΡΠ°
- HTML CSS Π’ΡΠ΅Ρ
ΠΊΠΎΠ»ΠΎΠ½Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ, Ρ ΠΈΠ·ΡΠΌΠΈΠ½ΠΊΠΎΠΉ
ΠΠ½Π΅ Π½ΡΠΆΠ΅Π½ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ· 3 ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² HTML/CSS,, Π½ΠΎ ΠΎΠ½ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ Π·Π΄Π΅ΡΡ. Π’ΠΎ, ΡΠ΅Π³ΠΎ Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΠΎ Π²ΡΠ΅Ρ ΡΠΈΠ» ΠΏΡΡΠ°ΡΡΡ Π΄ΠΎΡΡΠΈΡΡ: 3 Col ΡΠ°Π±Π»ΠΈΡΠ° Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ 740px: ΠΠΈΠ΄ΠΊΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ (ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ/ΡΠΆΠΈΠΌΠ°ΡΡΡΡ Ρ Π»ΡΠ±ΡΠΌ ΠΎΡΡΠ°Π²ΡΠΈΠΌΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎΠΌ) Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ…
- ΠΏΡΠΎΡΡΠΎΠΉ 3-ΡΡΠΎΠ»Π±ΡΠ°ΡΡΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ· ΡΡΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ Ρ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, Π½Π΅ ΠΌΠΎΠ³Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ. ΠΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΠΈΠ· Π²Π°Ρ, Π½ΠΎ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅ Ρ Π½Π΅ ΠΌΠΎΠ³Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ. <div>min-width</div><div>stay in…
1
ΠΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π°ΡΠ° ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΡΠΎΠ²Π½ΠΎ 100% ΠΎΡΡΠ°Π²ΡΠ΅ΠΉΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ:
<div>
<div>blah...</div>
<div>blah...</div>
</div>
CSS:
.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
. left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }
ΠΡΠ»ΠΈΡΠ½ΡΠΉ ΡΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ ΠΆΠΈΠ΄ΠΊΠΈΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ°ΠΌ: http: / / www.alistapart.com / ΡΡΠ°ΡΡΠΈ/holygrail
Π Π°Π±ΠΎΡΠ°Π΅Ρ Π² IE7 ΠΈ Π½ΠΎΠ²Π΅Π΅, Safari/Chrome/Opera/Firefox…
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Mac Β Β 06 ΠΈΡΠ½Ρ 2012 Π² 16:44
1
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ. ΠΠΎΡ ΠΎΠ΄ΠΈΠ½ Π½Π΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΠΉ, Π½ΠΎ ΠΏΡΡΠΌΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ:
<body>
<div>MENU</div>
<div> content <br /> content <br /> content </div>
</body>
CSS:
div { border: 2px solid black; } /* demo purposes */
#menu {
float: left;
width: 150px;
}
#content {
margin-left: 154px; /* menu width + (2 x menu.border-width) */
}
Π‘ΠΌ. ΡΡΠΎΡ jsfiddle Π΄Π»Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΎΠ±ΡΠ°Π·ΡΠ°.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Jeroen Β Β 05 ΠΈΡΠ½Ρ 2012 Π² 20:52
0
ΠΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ-ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΆΠ΅ ΡΡΠΈΡΠ°ΡΡΠ΅Π΅ΡΡ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ box-sizing.
ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΡΠΈΠ½ΠΊΠ΅ΡΠ±ΠΈΠ½ -> http://tinkerbin.com/AcJjYk0r
ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΌΠ΅Π½Ρ, ΠΏΡΠΎΡΠ΅Π½ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠ°ΡΠ΅ΠΌ…
..Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΡΠ°ΡΡΠΈΡΠΈΠ»ΠΈΡΡ Π΄ΠΎ ΡΠ°ΠΌΠΎΠΉ Π²ΡΡΠΎΠΊΠΎΠΉ Π²ΡΡΠΎΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΠΏΠΎΠ»ΡΠΌΠΈ (ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΡΡΠ΅, ΡΠ΅ΠΌ ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ), ΡΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ (Π½Π΅Ρ javascript)-ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ΄ Π΄Π²ΡΠΌΡ ΠΏΠΎΠ»ΡΠΌΠΈ. Π‘ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌΠΈ css3 (ΡΠΎΠΆΠ΅ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΠΌΠΈ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ) ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ. ΠΠΎΡΠΌΠΎΡΡΠΈ:
http://tinkerbin.com/3ETh38Oq
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ banzomaikaka Β Β 06 ΠΈΡΠ½Ρ 2012 Π² 18:19
- Π‘ΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΠ΅ Π΄Π²ΡΡ
ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ Π²ΡΡΠΎΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠ½ΠΈ ΠΎΠ±Π° ΠΈΠΌΠ΅ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²ΡΡΠΎΡΡ ΠΈ ΡΠ°Π·Π½ΡΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΡΠΎΠ½Ρ. ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ, Π― Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΡΡ. ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ Π΄ΠΎΡΡΠΈΡΡ ΡΡΠΎΠ³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ css? HTML: <div id=profile-bottom> <div id=bottom-left>…
- Π΄Π²ΡΡΡΠΎΡΠΎΠ½Π½ΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS
ΠΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ Π³Π°Π·Π΅ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° Π² XHTML Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ XHTML Π±ΡΠ»ΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΎ Π½Π° Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ Π³Π°Π·Π΅ΡΡ?
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
ΠΠ°ΠΊ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡ html ΠΈ css, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ (java)
ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ html ΠΈ css, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΡΠ·ΡΠΊ ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ html Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ css Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ html , ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠ΄Ρ ΠΎΠΆΡ ΠΊ…
CSS: Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
Π― Π½Π΅ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Ρ CSS (Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Ρ Π½Π΅ Π·Π½Π°Ρ CSS). Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΊΡΡΠ° ΡΠ°ΠΊΠΈΡ Π΄ΠΈΠ²ΠΎΠ²: <div class=right> <p>1</p> </div>. ..
ΠΠ°ΠΊ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡ Π½Π° Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ?
Π― Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°Π·Π±ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π½Π° Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ( Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π³Π°Π·Π΅ΡΠ½ΡΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ).ΠΠΈΠ½Π΅ΠΉΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ Π²ΠΈΠ΄ ΠΈ Π²ΠΈΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π― Π²Π·ΡΠ» ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΡΠ°Π·Π΄Π΅Π»ΠΈΠ» Π΅Π΅ ΠΏΠΎΠΏΠΎΠ»Π°ΠΌ ΠΈ ΡΠ΄Π΅Π»Π°Π» TextView…
HTML CSS Π’ΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ, Ρ ΠΈΠ·ΡΠΌΠΈΠ½ΠΊΠΎΠΉ
ΠΠ½Π΅ Π½ΡΠΆΠ΅Π½ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ· 3 ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² HTML/CSS,, Π½ΠΎ ΠΎΠ½ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ Ρ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ Π·Π΄Π΅ΡΡ. Π’ΠΎ, ΡΠ΅Π³ΠΎ Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΠΎ Π²ΡΠ΅Ρ ΡΠΈΠ» ΠΏΡΡΠ°ΡΡΡ Π΄ΠΎΡΡΠΈΡΡ: 3 Col ΡΠ°Π±Π»ΠΈΡΠ° Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ 740px:…
ΠΏΡΠΎΡΡΠΎΠΉ 3-ΡΡΠΎΠ»Π±ΡΠ°ΡΡΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ· ΡΡΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ Ρ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, Π½Π΅ ΠΌΠΎΠ³Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ. ΠΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΠΈΠ· Π²Π°Ρ, Π½ΠΎ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅ Ρ Π½Π΅ ΠΌΠΎΠ³Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ…
Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ Π²ΡΡΠΎΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠ½ΠΈ ΠΎΠ±Π° ΠΈΠΌΠ΅ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²ΡΡΠΎΡΡ ΠΈ ΡΠ°Π·Π½ΡΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΡΠΎΠ½Ρ. ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ, Π― Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΡΡ. ΠΠ°ΠΊ Ρ…
Π΄Π²ΡΡΡΠΎΡΠΎΠ½Π½ΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS
ΠΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ Π³Π°Π·Π΅ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° Π² XHTML Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ XHTML Π±ΡΠ»ΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΎ Π½Π° Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ Π³Π°Π·Π΅ΡΡ?
ΠΠΎΠΏΡΠΎΡ css ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΡΠΎ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, Π³Π΄Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ,ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ…
ΠΠ²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π΄ΠΈΠ²ΠΎΠ², ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ
ΠΠ½Π΅ Π½ΡΠΆΠ½ΠΎ 2 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ HTML-CSS Π²Π΅ΡΡΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΈΠ²ΠΎΠ². ΠΡ 0 Π΄ΠΎ 5 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ»Π±Π΅Ρ. ΠΡ 6 Π΄ΠΎ 10, Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌ 6 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΡ. ΠΡ 0 Π΄ΠΎ 5: elem1 elem2…
Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π² Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ css
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π΅ΡΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈΠ· ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². block block block block block block Π’ΠΎΠ»ΡΠΊΠΎ html css <div class=image-row-container container-full section-top> <img…
ΠΡΠΎΡΡΠΎ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ html Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡ
Π― ΠΈΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΡΠΌΠ°Ρ ΠΈΠ· Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π΄Π°Π½Π½ΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ Π΄ΠΎΡΡΠΈΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠΎΡΠΌΠ°ΡΠ°, ΡΡΠΎ ΠΈ:
<table>
<tr>
<td>AAA</td>
<td>BBB</td>
</tr>
</table>
Π― ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠΊΡΡΡ Π΄Π»Ρ HTML5 / CSS3 ΡΠ΅Ρ Π½ΠΈΠΊ.
css htmlΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΡΡΠΎΡΠ½ΠΈΠΊ Fixer Β Β 17 ΠΈΡΠ½Ρ 2011 Π² 11:48
12 ΠΎΡΠ²Π΅ΡΠΎΠ²
92
<style type="text/css">
#wrap {
width:600px;
margin:0 auto;
}
#left_col {
float:left;
width:300px;
}
#right_col {
float:right;
width:300px;
}
</style>
<div>
<div>
. ..
</div>
<div>
...
</div>
</div>
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ,ΡΡΠΎ ΡΡΠΌΠΌΠ° ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΠΎΠ±Π΅ΡΡΠΊΠΈ. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ.
ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎΠ± ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΌΠ΅ΡΠΎΠ΄Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΡΡΠΈΠΌ ΡΡΠ΅Π±Π½ΠΈΠΊΠΎΠΌ
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Dennis Traub Β Β 17 ΠΈΡΠ½Ρ 2011 Π² 11:50
41
ΠΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ css ΡΠ°Π±Π»ΠΈΡ Π²ΠΌΠ΅ΡΡΠΎ html ΡΠ°Π±Π»ΠΈΡ. ΠΡΠΎ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ Π²Π°Ρ html ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΡΠΌ,Π½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΈΡΡ Π΄Π»Ρ ΡΠ΅Π»Π΅ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ.
ΠΡΠΎ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΌΡΡΠ»Π°, ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ float-Ρ Π°ΠΊΠΎΠ².
<html>
<head>
<style>
#content-wrapper{
display:table;
}
#content{
display:table-row;
}
#content>div{
display:table-cell
}
/*adding some extras for demo purposes*/
#content-wrapper{
width:100%;
height:100%;
top:0px;
left:0px;
position:absolute;
}
#nav{
width:100px;
background:yellow;
}
#body{
background:blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
Left hand content
</div>
<div>
Right hand content
</div>
</div>
</div>
</body>
</html>
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ RobKohr Β Β 06 ΡΠ΅Π²ΡΠ°Π»Ρ 2013 Π² 23:25
35
Π― Π·Π½Π°Ρ, ΡΡΠΎ Π½Π° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ ΡΠΆΠ΅ Π±ΡΠ» Π΄Π°Π½ ΠΎΡΠ²Π΅Ρ, Π½ΠΎ, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΎΠ±ΡΠ°Π²ΡΠΈΡΡ Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ, Ρ Ρ ΠΎΡΠ΅Π» Π±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΠΎΡΠ²Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΡΠ°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ..
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ Π·Π΄Π΅ΡΡ.
http://jsfiddle.net/Sohnee/EMaDB/1/
ΠΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ HTML 4.01 ΠΈΠ»ΠΈ HTML5 Ρ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ (Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΡΠ²ΠΈΡΡ Π»Π΅Π²ΡΠΉ ΠΈ ΠΏΡΠ°Π²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΊΠ°ΠΊ display:block, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π΅ΡΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ).
CSS
.left {
background-color: Red;
float: left;
width: 50%;
}
.right {
background-color: Aqua;
margin-left: 50%;
}
HTML
<div>
<p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div>
<ul>
<li>The columns are in the right order semantically</li>
<li>You don't have to float both columns</li>
<li>You don't get any odd wrapping behaviour</li>
<li>The columns are fluid to the available page...</li>
<li>They don't have to be fluid to the available page - but any container!</li>
</ul>
</div>
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎΠ΅ (Ρ ΠΎΡΡ ΠΈ Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²ΠΎΠ΅) Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ CSS, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠ°ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠΎ ΡΡΠΎΠ»Π±ΡΠ°ΠΌ Π±Π΅Π· Π²ΡΡΠΊΠΈΡ ΠΈΠ³Ρ Ρ divs:
column-count: 2;
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Fenton Β Β 17 ΠΈΡΠ½Ρ 2011 Π² 12:52
- Pandas — ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ — ΠΏΡΠΎΡΡΠΎ, Π½Π΅Ρ?
ΠΡ ΡΡΠΎ ΠΆ, Π²ΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ! Π― Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ (panda) ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ df. ΠΡΠ° ΡΠΎΡΠΌΠ° df panda Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΡΠΎΠ»Π±ΡΡ Id ΠΈ Feature. ΠΡΡΡ ΠΈΠ΄Π΅ΠΈ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? Π― ΡΠ΄Π΅Π»Π°Π» ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄, Π½ΠΎ… ΡΠ»ΠΎΠ²Π°ΡΠΈ @@ Π±Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ½Ρ ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ Π² ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΡΡΠΈ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π― Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ Id Π±ΡΠ» ΠΏΠ΅ΡΠ²ΡΠΌ…
- ΠΠΎΠ³Ρ Π»ΠΈ Ρ ΠΈΠΌΠ΅ΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Bootstrap?
ΠΡΠΎΡΡΠΎ Π½Π°ΡΠΈΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Bootstrap. ΠΡΡΡ Π»ΠΈ ΡΠΏΠΎΡΠΎΠ± ΠΈΠΌΠ΅ΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ? Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ
11
Π’Π΅ΠΏΠ΅ΡΡ Π΅ΡΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΡΠ΅ΠΌ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ Π±ΡΠ» Π·Π°Π΄Π°Π½ ΠΏΡΡΡ Π»Π΅Ρ Π½Π°Π·Π°Π΄. A CSS Flexbox Π΄Π΅Π»Π°Π΅Ρ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ· Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°ΠΏΡΠΎΡΠ΅Π½Π½ΡΠΉ Π»Π΅Π³ΠΊΠΎ. ΠΡΠΎ Π³ΠΎΠ»ΡΠΉ ΠΊΠΎΡΡΡΠ½ΠΎΠΉ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ ΡΠ°Π±Π»ΠΈΡΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π²ΠΎΠΏΡΠΎΡΠ΅:
<div>
<div>AAA</div>
<div>BBB</div>
</div>
ΠΠ΄Π½Π° ΠΈΠ· ΠΏΡΠΈΡΡΠ½ΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ a Flexbox Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΠΊΠ°ΠΊ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ ΠΈ ΡΠ°ΡΡΠΈ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΡΠΏΠΎΡΠΎΠ±ΠΈΡΡΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. Π― ΡΠ°Π·Π²Π΅ΡΠ½Ρ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ»Π΅ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ΄Π΅Π»Π°ΡΡ Π»Π΅Π²ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΏΡΠ°Π²ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ, ΡΡΠΎΠ±Ρ Π·Π°Ρ Π²Π°ΡΠΈΡΡ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. Π― ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡΠ°ΡΡ ΡΡΠΈΠ»Ρ Π² ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ, Π½Π°Π·Π½Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π°, ΡΡΠΎΠ±Ρ ΡΡΠΎΠ»Π±ΡΡ Π±ΡΠ»ΠΈ Π²ΠΈΠ΄Π½Ρ, ΠΈ Π΄ΠΎΠ±Π°Π²Π»Ρ ΡΡΡΠ°ΡΠ΅Π²ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Flex Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
<style type="text/css">
.flexbox {
display: -ms-flex;
display: -webkit-flex;
display: flex;
width: 100%;
}
.left {
background: #a0ffa0;
min-width: 75px;
flex-grow: 0;
}
.right {
background: #a0a0ff;
flex-grow: 1;
}
</style>
...
<div>
<div>AAA</div>
<div>BBB</div>
</div>
Flex ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΎΠ²ΡΠΉ, ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°ΡΡΡΡΠ»ΠΈ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ IE 8 ΠΈ IE 9, Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ http://caniuse.com/#feat=flexbox ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Π½Π° ΡΠ°ΡΡΠΈΡΠ½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌΠΈ 94. 04% ΡΡΠ½ΠΊΠ°.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ twm Β Β 16 ΠΌΠ°Ρ 2016 Π² 14:23
8
ΠΡ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠΏΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄, ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΡΡΠ°Π²ΡΡΠ΅
<div>left</div>
<div>right</div>
.left {
float: left;
}
Ρ ΠΎΡΡ Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΈ Π±ΠΎΠ»ΡΡΠ΅, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΈΠ΅ Π΅ΡΠ΅ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΠΌΠ°ΠΊΠ΅ΡΡ Ρ Π²Π°Ρ Π΅ΡΡΡ.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ fearofawhackplanet Β Β 17 ΠΈΡΠ½Ρ 2011 Π² 11:57
7
ΠΡΠ΅ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠ΅ ΠΎΡΠ²Π΅ΡΡ Π΄Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΆΠ΅ΡΡΠΊΠΎ Π·Π°ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ ΠΈ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Π²ΡΠΎΡΠΎΠΉ. Π― Π±Ρ ΠΎΠΆΠΈΠ΄Π°Π», ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π½Π΅ Ρ ΠΎΡΠ΅ΡΡΡ.
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ CSS Π·Π½Π°ΡΡ ΠΎΠ± Π°ΡΡΠΈΠ±ΡΡΠ΅ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ columns
, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π΅Π»Π°Π΅Ρ ΠΌΠ°ΠΊΠ΅ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΡΠΌΠΈ. ΠΠ»Ρ ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π²Π°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ -moz-columns
ΠΈ -webkit-columns
.
ΠΠΎΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ·Π΄Π°Π΅Ρ Π΄ΠΎ ΡΡΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ², Π΅ΡΠ»ΠΈ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 200 ΠΏΠΈΠΊΡΠΎΠ², Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΡΡΠΎΠ»Π±ΡΠΎΠ²:
<html>
<head>
<title>CSS based columns</title>
</head>
<body>
<h2>CSS based columns</h2>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
<li>Item six</li>
<li>Item eight</li>
<li>Item nine</li>
<li>Item ten</li>
<li>Item eleven</li>
<li>Item twelve</li>
<li>Item thirteen</li>
</ul>
</body>
</html>
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Axel Beckert Β Β 13 Π΄Π΅ΠΊΠ°Π±ΡΡ 2014 Π² 15:55
3
ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ HTML5 (ΡΡΠΎΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ Π»ΡΡΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ
Π²Π΅ΡΠ΅ΠΉ, ΠΊΠ°ΠΊ Π±Π»ΠΎΠ³ΠΈ, Π³Π΄Π΅ <article>
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·, ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡ ΡΠ°Π·Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΈΠ·Π΅ΡΠ° Π·Π°ΠΏΠΈΡΠΈ Π² Π±Π»ΠΎΠ³Π΅; Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΡΡΠ΅ΡΠ΅, ΡΠ°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΠΎ ΡΡΠΈΠ»Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π°Π΄ΡΡ Π²Π°ΠΌ ΠΆΠ΅Π»Π°Π΅ΠΌΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ):
<style type="text/css">
article {
float: left;
width: 500px;
}
aside {
float: right;
width: 200px;
}
#wrap {
width: 700px;
margin: 0 auto;
}
</style>
<div>
<article>
Main content here
</article>
<aside>
Sidebar stuff here
</aside>
</div>
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Shauna Β Β 17 ΠΈΡΠ½Ρ 2011 Π² 12:03
3
Π― Π·Π½Π°Ρ, ΡΡΠΎ ΡΡΠΎ Π‘ΡΠ°ΡΠ°Ρ ΠΏΠΎΡΡΠ°, Π½ΠΎ ΡΠ΅ΡΠΈΠ» Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΈ Π΄Π²Π° ΠΠ΅Π½Π½Π΅ΡΠ°. ΠΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΡΠ΅Π΄ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΈ ΡΠ°ΡΡΠΎ Π·Π°Π±ΡΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΉ? Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΊΡΡΠΎΡΠΊΠ° css Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΡΡΠΉ markup.
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ http://codepen.io/butlerps/pen/wGmXPL
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ philip Β Β 14 Π°ΠΏΡΠ΅Π»Ρ 2016 Π² 13:59
2
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ CSS Multiple Columns . ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½Π° Π½ΠΈ ΠΎΠ΄Π½Π° ΡΠ°Π±Π»ΠΈΡΠ° ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΈΠ²ΠΎΠ².
HTML
<div>
<!-- paragraph text comes here -->
</div>
CSS
.column {
column-count: 2;
column-gap: 40px;
}
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ CSS Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π‘ΡΠΎΠ»Π±ΡΠ°Ρ ΡΠΈΡΠ°ΠΉΡΠ΅ Π² https://www. w3schools.com/css/ css3_multiple_columns. asp
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ TThomas Β Β 04 ΡΠ΅Π½ΡΡΠ±ΡΡ 2018 Π² 07:06
1
ΠΡΠΎΡ ΠΊΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄Π²Π° ΡΡΠΎΠ»Π±ΡΠ°, Π½ΠΎ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠ²Π΅ΡΠΎΠ², ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΈΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ°, Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΈ Ρ. Π΄. ΠΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ»ΠΊΡ Fiddle
Fiddle ΡΡΡΠ»ΠΊΠ°: http://jsfiddle.net/eguFN/
<div>
<ul>
<li><a href="#">Cadastro</a></li>
<li><a href="#">Funcionamento</a></li>
<li><a href="#">Regulamento</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
Css Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ
.menu {
font-family:arial;
color:#000000;
font-size:12px;
text-align: left;
margin-top:35px;
}
. menu a{
color:#000000
}
.menuUl {
list-style: none outside none;
height: 34px;
}
.menuUl > li {
display:inline-block;
line-height: 33px;
margin-right: 45px;
}
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ harishannam Β Β 05 Π°ΠΏΡΠ΅Π»Ρ 2013 Π² 07:47
0
<div id"content">
<div id"contentLeft"></div>
<div id"contentRight"></div>
</div>
#content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
#contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
#contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
}
ΠΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌ ΡΠ°ΠΉΡΠΎΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π΅ΡΠ° ΠΈ Ρ. Π΄. ΠΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Π°ΡΠΈ ContentLeft ΠΈ ContentRight ΡΠΈΡΠΈΠ½Ρ Π½Π΅ ΠΏΡΠ΅Π²ΡΡΠ°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (Π²ΠΊΠ»ΡΡΠ°Ρ ΠΏΠΎΠ»Ρ).
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Magnum26 Β Β 17 ΠΈΡΠ½Ρ 2011 Π² 12:18
0
Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ
<style type="text/css">
#wrap {
width: 100%;
margin: 0 auto;
display: table;
}
#left_col {
float:left;
width:50%;
}
#right_col {
float:right;
width:50%;
}
@media only screen and (max-width: 480px){
#left_col {
width:100%;
}
#right_col {
width:100%;
}
}
</style>
<div>
<div>
...
</div>
<div>
...
</div>
</div>
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Altravista Β Β 22 ΡΠ΅Π½ΡΡΠ±ΡΡ 2017 Π² 11:57
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
ΠΠ²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° Π² CSS Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡ
ΠΠΎΡΠ΅ΠΌΡ ΡΠ°ΠΊ Π½Π΅ΡΠ΄ΠΎΠ±Π½ΠΎ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΌΠ°ΠΊΠ΅Ρ ΡΠΎΡΠΌΡ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² CSS? ΠΡΠ΅, ΡΠ΅Π³ΠΎ Ρ Ρ ΠΎΡΡ Π΄ΠΎΠ±ΠΈΡΡΡΡ, ΡΡΠΎ: Name: Joe Dude Age: 30 Description: Some long text here that needs to wrap if it exceeds. ..
ΠΡΠΊΠ»Π°Π΄ΠΊΠ° «Label — Value» Π² ΡΠ΅Π½ΡΡ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡ
Π’Π°ΠΊ ΡΠ°ΡΡΠΎ Ρ Π²Π°Ρ Π±ΡΠ΄Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠΎΠΊ (Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΌΡ, Π²ΠΎΠ·ΡΠ°ΡΡ, ΡΠ²Π΅Ρ) ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ! ΠΡΠ»ΠΈ Π±Ρ Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ» ΠΈΡ Π² ΡΠ°Π±Π»ΠΈΡΡ 2 ΡΡΠΎΠ»Π±ΡΠ° 3 ΡΡΡΠΎΠΊΠΈ, Ρ ΠΌΠΎΠ³ Π±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ…
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅?
Π― Ρ ΠΎΡΡ ΠΈΠΌΠ΅ΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½Π° ΡΠ²ΠΎΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Ρ ΠΌΠ΅Π½Ρ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ-ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΈΡΡ: <table> <tr> <td> Content of the first column. </td>…
ΠΠ²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΆΠΈΠ΄ΠΊΠΎΡΡΡ Ρ Π²ΡΡΠΎΡΠΎΠΉ 100%
ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ Π΄ΠΎΡΡΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡΡ? ΠΡΠΈΠΌΠ΅Ρ: http://enstar.nl/example.php (ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ Π²ΠΈΠ΄Π΅Π½ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ, ΡΠ΅ΡΠ²Π΅ΡΡ ΠΈΠΌΠ΅Π½ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΠ»ΠΈ Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ, Π½ΠΎ ΠΌΠΎΠΉ…
3-ΡΡΠΎΠ»Π±ΡΠ°ΡΠ°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ°, ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Π°Ρ Π²ΡΡΠΎΡΠ°, ΡΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. ΠΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π±Π΅Π· » ΡΠ°Π±Π»ΠΈΡΡ-ΡΡΠ΅ΠΉΠΊΠΈ»
ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ 3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° Π³Π΄Π΅: Π»Π΅Π²ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠ΅Π΄Π½ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ ΡΠΈΡΠΈΠ½Ρ (Π½Π΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ) ΠΏΡΠ°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΠ° Π²ΡΠ΅Ρ . ..
Pandas — ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ — ΠΏΡΠΎΡΡΠΎ, Π½Π΅Ρ?
ΠΡ ΡΡΠΎ ΠΆ, Π²ΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ! Π― Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ (panda) ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ df. ΠΡΠ° ΡΠΎΡΠΌΠ° df panda Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΡΠΎΠ»Π±ΡΡ Id ΠΈ Feature. ΠΡΡΡ ΠΈΠ΄Π΅ΠΈ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? Π― ΡΠ΄Π΅Π»Π°Π» ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄, Π½ΠΎ……
ΠΠΎΠ³Ρ Π»ΠΈ Ρ ΠΈΠΌΠ΅ΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Bootstrap?
ΠΡΠΎΡΡΠΎ Π½Π°ΡΠΈΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Bootstrap. ΠΡΡΡ Π»ΠΈ ΡΠΏΠΎΡΠΎΠ± ΠΈΠΌΠ΅ΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ? Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ
ΠΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² excel A | B ———- 1 | one #N/A | two 3 | three Π― Ρ ΠΎΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈΠ· ΡΡΠΈΡ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΊΠ°ΠΊ: ΠΠ΄ΠΈΠ½ Π΄Π²Π° 3 ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠΎΠΌΠΎΠ³ΠΈΡΠ΅ ΠΌΠ½Π΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ.
ΠΠ²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π΄ΠΈΠ²ΠΎΠ², ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ
ΠΠ½Π΅ Π½ΡΠΆΠ½ΠΎ 2 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ HTML-CSS Π²Π΅ΡΡΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΈΠ²ΠΎΠ². ΠΡ 0 Π΄ΠΎ 5 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ»Π±Π΅Ρ. ΠΡ 6 Π΄ΠΎ 10, Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌ 6 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΡ. ΠΡ 0 Π΄ΠΎ 5: elem1 elem2…
HTML Table ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠ°Ρ ΡΠ°Π±Π»ΠΈΡΠ° HTML Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΈ Ρ Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΡΡΡΠ»ΠΊΠ° ΠΎΡ Π²Π°ΡΡΠ²Π°Π»Π° Π΄Π²Π° ΡΡΠΎΠ»Π±ΡΠ° ΡΠ°Π±Π»ΠΈΡΡ, Π½ΠΎ Π²ΡΠ΅ ΠΆΠ΅ Π΄Π΅ΡΠΆΠ°Π»Π° ΡΡΠΈ Π΄Π²Π° ΡΡΠΎΠ»Π±ΡΠ° ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ΅Π»Π΅ΠΉ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π― ΠΏΡΠΎΠ±ΠΎΠ²Π°Π»…
ΠΠ΅ΡΡΡΠΊΠ° Π½Π° div. ΠΠ²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ ΡΠ°ΠΏΠΊΠΎΠΉ ΠΈ ΠΏΠΎΠ΄Π²Π°Π»ΠΎΠΌ.
ΠΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ»Π³ΠΎ ΡΠΏΠΎΡΠΈΡΡ ΠΎ ΡΠΎΠΌ, ΡΠ°ΠΊ Π»ΠΈ ΡΠΆ Π²ΡΠ΅Π΄Π½Π° ΠΈ Π½Π΅ΠΎΠΏΡΠ°Π²Π΄Π°Π½Π½Π° ΡΡΠ°ΡΠ°Ρ Π΄ΠΎΠ±ΡΠ°Ρ ΡΠ°Π±Π»ΠΈΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ°, Π½ΠΎ ΠΌΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π½Π΅ ΠΎΠ± ΡΡΠΎΠΌ π ΠΡΡΠ°Π²ΠΈΠΌ Π² ΡΡΠΎΡΠΎΠ½Π΅ ΠΏΠΎΠ»ΠΈΡΠΈΠΊΡ, ΠΈ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠΌΡΡ Π½Π° ΡΠΈΡΡΠΎΠΉ Π½Π°ΡΠΊΠ΅ π
Π‘ΠΎΠ³Π»Π°ΡΠΈΡΠ΅ΡΡ, ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ΄ ΡΡΠΊΠΎΠΉ Π³ΠΎΡΠΎΠ²ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π²Π΅ΡΡΡΠΊΠΈ, ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΡ Π² Π½Π΅Π³ΠΎ ΠΏΠΎ Ρ
ΠΎΠ΄Ρ ΡΠ°Π±ΠΎΡΡ Π½ΡΠΆΠ½ΠΎΠ΅ Π²Π°ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ — ΠΎΡΠ΅Π½Ρ ΠΏΡΠΈΡΡΠ½ΠΎ π
ΠΡΠ°ΠΊ, ΡΠ΅Π³ΠΎΠ΄Π½Ρ — ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π²ΡΡ
ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠΉ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ (ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠΉ) Π²Π΅ΡΡΡΠΊΠΈ Ρ ΡΠ°ΠΏΠΊΠΎΠΉ ΠΈ ΠΏΠΎΠ΄Π²Π°Π»ΠΎΠΌ.
ΠΠΎΠ΄
<html> <head> <title></title> </head> <body bgcolor=»#EDF6E1″> <div>ΡΠ°ΠΏΠΊΠ°</div> <div>ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ<br>ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ<br>ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ<br>ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ<br>ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ<br>ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ<br></div> <div>ΠΏΠΎΠ»Π΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°</div> <div>ΠΏΠΎΠ΄Π²Π°Π»</div> </body> </html> |
CSS
#header { background: yellow; } #sidebar { width: 200px; float: left; } #container { width: 100%; } #footer { background: yellow; clear: both; } |
ΠΠ°ΠΊ ΠΎΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΡ
ΠΡΠΌΠ°Π΅ΡΡΡ, ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΡΠ°ΠΉΠ½Π΅ ΠΏΡΠΎΡΡΠ΅Π½ΡΠΊΠΈΠΉ, ΠΈ Π²ΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΏΠΎΠ½ΡΡΠ½ΠΎ Ρ ΠΏΠΎΠ»ΡΡΠ»ΠΎΠ²Π°, Π½ΠΎ Π²ΡΠ΅ ΠΆΠ΅:
header — ΡΠ°ΠΏΠΊΠ°
sidebar — Π»Π΅Π²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
container — ΠΏΠΎΠ»Π΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°
footer — ΠΏΠΎΠ΄Π²Π°Π»
ΠΠ΅ ΡΠΌΠΎΡΡΡ Π½Π° ΠΏΡΠΎΡΡΠΎΡΡ ΠΊΠΎΠ΄Π°, ΡΠ°ΡΡΠΎ Π±ΡΠ²Π°ΡΡ ΡΠΈΡΡΠ°ΡΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΠ°Π±Π»ΠΈΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠ°, ΠΊΠ°ΠΊ Π² ΡΠ°ΡΡΠ΅ΡΠ΅ ΡΡΠΎΠΈΠΌΠΎΡΡΠΈ ΡΠ°ΠΉΡΠ°, Π±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡΠ°Π²Π΄Π°Π½Π° ΠΈ ΠΏΠΎ Π·Π°ΡΡΠ°ΡΠ°ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΈ ΠΏΠΎ ΠΏΡΠΎΡΡΠΎΡΠ΅ ΠΊΠΎΠ΄Π°.
Π― Π΄ΡΠΌΠ°Ρ, Π²Π°ΠΌ Π±ΡΠ΄Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π° Π΅ΡΠ΅ ΡΡΠ°ΡΡΡ ΠΠ΅ΡΡΡΠΊΠ° Π½Π° div. Π’ΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Ρ ΡΠ°ΠΏΠΊΠΎΠΉ ΠΈ ΠΏΠΎΠ΄Π²Π°Π»ΠΎΠΌ.
(c) ΠΠ°Π»ΠΈΠ½Π° ΠΠ²ΡΠ΅Π½ΠΊΠΎ («Aloha Magic»)
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ — CSS
CSS ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΡΠΏΠΎΡΠΎΠ± Π±Π»ΠΎΡΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π»Π΅Π³ΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΠ΅ΠΊΡΡΠ°. ΠΡΠ΄ΡΠΌ ΡΠ»ΠΎΠΆΠ½ΠΎ ΡΠΈΡΠ°ΡΡ ΡΠ΅ΠΊΡΡ, Π΅ΡΠ»ΠΈ ΡΡΡΠΎΠΊΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π»ΠΈΠ½Π½ΡΠ΅; ΡΡΠΎ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ Π³Π»Π°Π·, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π²Π·Π³Π»ΡΠ΄ Ρ ΠΊΠΎΠ½ΡΠ° ΠΎΠ΄Π½ΠΎΠΉ Π½Π° Π½Π°ΡΠ°Π»ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ, ΠΈ ΠΎΠ½ΠΈ Π·Π°Π±ΡΠ²Π°ΡΡ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΠ»ΠΈΡΡ. ΠΠΎΡΡΠΎΠΌΡ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ Π΄ΠΈΡΠΏΠ»Π΅ΠΈ ΠΏΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΡ, Π°Π²ΡΠΎΡΠ°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΠ΅ΠΊΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ, ΠΊΠ°ΠΊ Π² Π³Π°Π·Π΅ΡΠ°Ρ .
Π Π½Π΅ΡΡΠ°ΡΡΡΡ, ΡΡΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ CSS ΠΈ HTML Π±Π΅Π· ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π±ΠΈΠ΅Π½ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡΡ , ΠΈΠ»ΠΈ ΡΡΡΠΎΠ³ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ Π² ΡΠ΅ΠΊΡΡΠ΅, ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΊΡΡΡΠ°ΠΎΡΠ΄ΠΈΠ½Π°ΡΠ½ΡΠΉ ΡΠΊΡΠΈΠΏΡ. ΠΡΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ½ΠΈΠΌΠ°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½ΠΎΠ²ΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ², ΡΡΠΎΠ±Ρ ΡΠ°ΡΡΠΈΡΠΈΡΡ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠΉ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ.
ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΡΠΈΡΠΈΠ½Π°
ΠΠ²Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΡΡ ΠΏΠΎΡΠ²ΡΡΡΡ Π»ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΡ
Π±ΡΠ΄Π΅Ρ: column-count
and column-width
.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-count
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΌ ΡΠΈΡΠ»ΠΎΠΌ. ΠΡΠΈΠΌΠ΅Ρ,
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² Π΄Π²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ (Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ):
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-width
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. ΠΡΠ»ΠΈ column-count
ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ, ΡΠΎΠ³Π΄Π° Π±ΡΠ°ΡΠ·Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ΄Π΅Π»Π°Π΅Ρ ΡΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡΒ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ.
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
ΠΠΎΠ΄ΡΠΎΠ±Π½ΡΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ ΠΎΠΏΠΈΡΠ°Π½Ρ Π² CSS3 ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
Π ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΡΠ°ΡΠΎΠΌ Π±Π»ΠΎΠΊΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² ΡΠ»Π΅Π΄ΡΡΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ. ΠΡΡ HTML, CSS ΠΈ DOM ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΊΠ°ΠΊ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠ΅ΡΠ°ΡΡ.
Π
ΡΠ°ΡΠΊΠ°Ρ Π·Π°ΠΏΠΈΡΡ columnsΠ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π²Β Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π΄Π²ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² CSS: column-count
ΠΈΠ»ΠΈ column-width
. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ² Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΡΡ, ΡΠΎ ΡΠ°ΡΡΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΡΠΎΡΠΊΡΡ Π·Π°ΠΏΠΈΡΡ columns
. ΠΡΠΈΠΌΠ΅Ρ:
CSS ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅Β column-width:12em
ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°ΠΌΠ΅Π½Π΅Π½ΠΎ:
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
CSS ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ column-count:4
ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°ΠΌΠ΅Π½Π΅Π½ΠΎ:
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
ΠΠ²Π° CSS ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ column-width:8em
ΠΈ column-count:12
ΠΌΠΎΠ³ΡΡΒ Π±ΡΡΡ Π·Π°ΠΌΠ΅Π½Π΅Π½Ρ:
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²ΡΡΠΎΡΡ
CSS3-ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΡΠ΅Π±ΡΠ΅Ρ, ΡΡΠΎΠ±Ρ Π²ΡΡΠΎΡΠ° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡΠ»Π° Π²ΡΡΠΎΠ²Π½Π΅Π½Π°, Ρ.Π΅.Β Π±ΡΠ°ΡΠ·Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ Π±ΡΠ»Π° ΠΏΡΠΈΠ±Π»ΠΈΠ·ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Π°Ρ. Firefox ΡΠ°ΠΊ ΠΈ Π΄Π΅Π»Π°Π΅Ρ.
ΠΠ΄Π½Π°ΠΊΠΎ, Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠΈΡΡΠ°ΡΠΈΡΡ
ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΠ²Π½ΠΎ,Β ΡΠΎΠ³Π΄Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΠΏΠ΅ΡΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ
ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ
, ΠΊΠ°ΠΊ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΠ΅ΡΠ΅ΠΊΡΠΎΡΡ ΠΏΡΠ°Π²ΡΡ Π³ΡΠ°Π½ΠΈΡΡ. ΠΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π°, Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS height
ΠΈΠ»ΠΈ max-height
ΡΠ²ΠΎΠΉΡΡΠ² Π½Π° ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΡΠ°ΡΠΎΠΌ Π±Π»ΠΎΠΊΠ΅, ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ ΡΠ°ΡΡΠΈ Π΄ΠΎ ΡΡΠΎΠΉ Π²ΡΡΠΎΡΡ, Π½ΠΎ Π½Π΅ Π±ΠΎΠ»Π΅Π΅, ΠΏΠΎΠΊΠ° Π½Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡΡ Π½ΠΎΠ²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°. ΠΡΠΎΡ ΡΠ΅ΠΆΠΈΠΌ ΡΠ°ΠΊΠΆΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π΅Π½ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ.
ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 1em
. ΠΡΠΎΒ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-gap
Π½Π° ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΡΠ°ΡΠΎΠΌ Π±Π»ΠΎΠΊΠ΅:
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΡΠ°ΡΡΠΉ ΡΠ΅ΠΆΠΈΠΌ. ΠΠΎΡΡΠΎΠΌΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π»Π΅Π³ΡΠ΅Β ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ ΠΈ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊΒ Π² ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΡΠ°ΡΡΠΉ ΡΠ΅ΠΆΠΈΠΌ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π½Π΅ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±Π΅Π· ΠΏΡΠ΅ΡΠΈΠΊΡΠ°. Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈΒ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ ΡΡΠΈΠΆΠ΄Ρ: ΠΎΠ΄Π½ΠΎ Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ -moz , ΠΎΠ΄Π½ΠΎ Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ -webkit ΠΈ ΡΡΠ΅ΡΡΠ΅ Π±Π΅Π· ΠΏΡΠ΅ΡΠΈΠΊΡΠ°.
CSS3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ — ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Π½Π°Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΠ΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π»ΡΡΡΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΡΠΌ ΡΡΠ°ΡΡΠΊΠΎΠΌ ΡΠΊΡΠ°Π½Π°. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Ρ Π²ΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠ³ΡΡ Π½Π°ΠΉΡΠΈ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΄Π»Ρ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ Π²ΡΡΠΎΡΡ.
Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΄ΠΎΠ±Π½ΡΡ ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ CSS-ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ
ΠΡ Π°Π²ΡΠΎΡΠ°: Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS-ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠ΅ΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·Π΄Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΌΠΎΠΆΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π²Π½Π΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ°Π±ΠΎΡΠ΅ΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ. ΠΡΠ°ΡΠ·Π΅Ρ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΉ Π΄Π°Π½Π½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ, ΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ°Π·Π±ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π° ΡΠΎΡΡΠ°Π²Π½ΡΠ΅ ΡΠ°ΡΡΠΈ ΠΈ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΅Π³ΠΎ ΠΏΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Π½Π°Π΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΡΠΎΠ³Π΄Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ. Π ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΏΡΠΈ Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎΠΌ ΠΏΠΎΠ΄Π±ΠΎΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ², CSS-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΡΡΠ°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ΄ΠΎΠ±Π½ΡΠΌ ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΡΡΠ°ΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ° ΠΎΡΠΊΠ°Π·ΠΎΡΡΡΠΎΠΉΡΠΈΠ²ΠΎΡΡΠΈ (graceful degradation).
ΠΠ΄Π΅ ΠΎΠ±ΡΡΠ²Π»ΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΡΡΠ²ΠΈΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½Π° ΡΡΠΎΠ²Π½Π΅ Π»ΡΠ±ΠΎΠ³ΠΎ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΊ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ»ΠΈ ΠΊ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠΌΡΡ Π²Π½ΡΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π²Π½ΠΈΠ·Ρ, ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ» ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π΄Π»Ρ Π²ΡΠΎΡΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ°Π·Π±ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ» Π΄Π»Ρ ΡΠ΅Π»ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ.
ΠΠ°ΠΊ ΠΎΠ±ΡΡΠ²Π»ΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΡΠΈ ΡΠ°Π·Π½ΡΡ ΡΠΏΠΎΡΠΎΠ±Π° ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ:
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ΠΠ±ΡΡΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-count.
ΠΠ±ΡΡΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-width.
ΠΠ±ΡΡΠ²ΠΈΡΡ ΠΎΠ±Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° (ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ).
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄Π°Π½Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
1. ΠΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-count
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-count, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
article { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
article { Β Β -webkit-column-count: 2; Β Β Β Β -moz-column-count: 2; Β Β Β Β Β Β Β Β Β Β column-count: 2; } |
ΠΠ΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌ Π΄Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ (ΡΠΌ. Π½ΠΈΠΆΠ΅ gif-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅)
2. ΠΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-width
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-width, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
Π£ΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π²Π°ΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ²Π»ΡΡΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ Π²Π΅Π»ΠΈΡΠΈΠ½ΠΎΠΉ, Π° ΡΠΊΠΎΡΠ΅Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-width Π±ΡΠ΄Π΅Ρ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Ρ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅. ΠΡΠ°ΡΠ·Π΅Ρ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄Ρ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ, Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΌΠ΅ΠΆΡΡΠΎΠ»Π±ΡΠΎΠ²ΡΠΉ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ, Ρ.Π΅. ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ (ΠΎΠ± ΡΡΠΎΠΌ ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅). ΠΠ°ΡΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΡΡΡΠ½Π΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΠ°Π»ΠΈΡΡ Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° Π°Π±Π·Π°Ρ ΠΈΠ· Π½ΠΈΠΆΠ΅ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π΄Π΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΡΠΎ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΠ΅, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π±ΠΎΠ»ΡΡΠ΅ 150px (Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-width).
article { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; }
article { Β Β -webkit-column-width: 150px; Β Β Β Β -moz-column-width: 150px; Β Β Β Β Β Β Β Β Β Β column-width: 150px; } |
ΠΠ΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅Ρ ΡΠΌΠ΅ΡΡΠΈΡΡ Ρ ΠΎΡΡ Π±Ρ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-width, Π½ΠΈ ΠΎΠ΄Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ, ΠΈ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ½ΠΎΠ²Π° ΡΡΠ°Π½Π΅Ρ ΠΎΠ΄Π½ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΌ.
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ gif-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΡΠΆΠ°Π΅ΡΡΡ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-count ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΆΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ.
3. ΠΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ Π΄Π²ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² (ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ)
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-count ΠΈ column-width, ΡΡΠΎΠ±Ρ Π»ΡΡΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ CSS-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΡΡΠ²Π»ΡΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΡ Π·Π°ΠΏΠΈΡΡ columns.
ΠΠΎΠ³Π΄Π° ΠΎΠ±ΡΡΠ²Π»ΡΡΡΡΡ ΠΎΠ±Π° ΡΠ²ΠΎΠΉΡΡΠ²Π°, column-count ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π° column-width β ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
article { -webkit-columns: 2 200px; -moz-columns: 2 200px; columns: 2 200px; } /* ΠΈΠ»ΠΈ */ article { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; }
article { Β Β -webkit-columns: 2 200px; Β Β Β Β -moz-columns: 2 200px; Β Β Β Β Β Β Β Β Β Β columns: 2 200px; } Β /* ΠΈΠ»ΠΈ */ Β article { Β Β -webkit-column-count: 2; Β Β Β Β -moz-column-count: 2; Β Β Β Β Β Β Β Β Β Β column-count: 2; Β Β -webkit-column-width: 200px; Β Β Β Β -moz-column-width: 200px; Β Β Β Β Β Β Β Β Β Β column-width: 200px; } |
ΠΠ΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ gif-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² column-count ΠΈ column-width, Π΅ΡΠ»ΠΈ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΡΠΆΠ°Π΅ΡΡΡ.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ
ΠΡΡΡ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ ΠΎΡΡΡΠ΅ΡΡΠ²Π»Π΅Π½ΠΈΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ CSS-ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
column-gap
Π§ΡΠΎΠ±Ρ ΠΎΡΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅ΠΆΡΡΠΎΠ»Π±ΡΠΎΠ²ΡΠΉ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ ΠΈΠ»ΠΈ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΎΠ±ΡΡΠ²ΠΈΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-gap. ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-gap ΡΠ²Π»ΡΠ΅ΡΡΡ 1em. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ Π»ΡΠ±ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ, ΡΡΠΎ ΠΎΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎ 0.
article { -webkit-columns: 2 200px; -moz-columns: 2 200px; columns: 2 200px; -webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em; }
article { Β Β -webkit-columns: 2 200px; Β Β Β Β -moz-columns: 2 200px; Β Β Β Β Β Β Β Β Β Β columns: 2 200px; Β Β -webkit-column-gap: 4em; Β Β Β Β -moz-column-gap: 4em; Β Β Β Β Β Β Β Β Β Β column-gap: 4em; } |
ΠΠ΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ
ΠΡΠ°ΡΠ·Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΠΈ ΠΎΡΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° Π±ΠΎΠ»ΡΡΠ΅Π΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ.
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ gif-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ ΡΠ±ΡΠ°ΡΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΡΠΆΠ°Π΅ΡΡΡ.
column-rule
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ Π»ΠΈΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΎΠΉ, Π½ΡΠΆΠ½ΠΎ ΠΎΠ±ΡΡΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-rule. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠΉ Π·Π°ΠΏΠΈΡΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² column-rule-width, column-rule-style, column-rule-color. Π Π΄Π°Π½Π½ΠΎΠΉ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ border.
article { -webkit-columns: 2 200px; -moz-columns: 2 200px; columns: 2 200px; -webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em; -webkit-column-rule: 1px dotted #ddd; -moz-column-rule: 1px dotted #ddd; column-rule: 1px dotted #ddd; }
article { Β Β -webkit-columns: 2 200px; Β Β Β Β -moz-columns: 2 200px; Β Β Β Β Β Β Β Β Β Β columns: 2 200px; Β Β -webkit-column-gap: 4em; Β Β Β Β -moz-column-gap: 4em; Β Β Β Β Β Β Β Β Β Β column-gap: 4em; Β Β -webkit-column-rule: 1px dotted #ddd; Β Β Β Β -moz-column-rule: 1px dotted #ddd; Β Β Β Β Β Β Β Β Β Β column-rule: 1px dotted #ddd; } |
ΠΠ΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ΠΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ column-gap, Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π»ΠΈΠ½ΠΈΡ ΠΈΡΡΠ΅Π·Π½Π΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΡΠ°Π½Π΅Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠ·ΠΊΠΈΠΌ (ΡΠΌ. Π½ΠΈΠΆΠ΅ gif-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅).
column-span
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΡΠ΅ΡΠ²Π°ΡΡ ΠΏΠΎΡΠΎΠΊ ΡΠ΅ΠΊΡΡΠ°, ΡΠ°Π·Π±ΠΈΡΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-span. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Firefox Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π΄Π°Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ (Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ³ΠΎΠ»ΠΎΡΠΎΠ²Π°ΡΡ Π·Π° Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π½Π° ΡΠ°ΠΉΡΠ΅ Bugzilla).
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° Π½Π°ΡΠ°Π»ΠΎ Π½ΠΎΠ²ΠΎΠΉ Π³Π»Π°Π²Ρ Π² ΡΠ°ΡΡΠΊΠ°Π·Π΅, Π½ΠΎ ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π²Π½ΡΡΡΠΈ ΠΏΠΎΡΠΎΠΊΠ° ΡΠ΅ΠΊΡΡΠ°, ΡΠ°Π·Π±ΠΈΡΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
Π§ΡΠΎΠ±Ρ Π²ΡΡΠ²Π°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈΠ· Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π½ΡΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ Π΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-span: all. ΠΠ°Π½Π½Π°Ρ Π·Π°ΠΏΠΈΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΡΠ΅ΡΠ²Π°ΡΡ ΠΏΠΎΡΠΎΠΊ ΡΠ΅ΠΊΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. ΠΡΠΎ Π΄Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΡΡΡΠΏ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ Π΅Π³ΠΎ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ, Π½Π°ΡΠΈΠ½Π°Ρ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ΅ΠΊΡΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ ΡΠ°Π·Π±ΠΈΠ²Π°ΡΡΡΡ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
h4 { -webkit-column-span: all; column-span: all; }
h4 { Β Β -webkit-column-span: all; Β Β Β Β Β Β Β Β Β Β column-span: all; } |
ΠΠ΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ
column-fill
Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΎ, ΠΊΠ°ΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½Π°ΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, Π½ΡΠΆΠ½ΠΎ ΠΎΠ±ΡΡΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-fill. Π Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Firefox.
ΠΠΎΠ³Π΄Π° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·Π±ΠΈΡ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π²ΡΡΠΎΡΠ°, Π±ΡΠ°ΡΠ·Π΅Ρ Firefox Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ Π½Π΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ. Firefox Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΡ Π² Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π΄ΡΡΠ³ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ.
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ Firefox ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ°Π·Π±ΠΈΡΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΡΠΊΠ°Π·Π°Π½Π° Π²ΡΡΠΎΡΠ°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Firefox, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π·Π°ΠΏΠΈΡΡ column-fill: auto. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Firefox Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ (ΡΠΌ. Π΄Π΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ).
article { -webkit-columns: 2 200px; -moz-columns: 2 200px; columns: 2 200px; -moz-column-fill: auto; column-fill: auto; height: 350px; }
article { Β Β -webkit-columns: 2 200px; Β Β Β Β -moz-columns: 2 200px; Β Β Β Β Β Β Β Β Β Β columns: 2 200px; Β Β -moz-column-fill: auto; Β Β Β Β Β Β column-fill: auto; Β Β height: 350px; } |
ΠΠ΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π²ΡΡΠΎΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-fill Π² Firefox, Β«ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΡΡΡΒ» ΠΌΠ°ΠΊΠ΅ΡΠ° Π±ΡΠ΄Π΅Ρ Π½Π°ΡΡΡΠ΅Π½Π° ΠΈΠ·-Π·Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ. ΠΠΎΠ½ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ½ΡΠΆΠ΄Π΅Π½ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Ρ.ΠΊ. Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Ρ Π½Π΅Π³ΠΎ ΠΏΡΠΎΡΡΠΎ Π½Π΅Ρ (ΡΠΌ. Π½ΠΈΠΆΠ΅ gif-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅). Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ Π²ΠΎΠΏΡΠΎΡ Ρ Π²ΡΡΠΎΡΠΎΠΉ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ (ΠΎΠ± ΡΡΠΎΠΌ ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅).
ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-fill ΠΈ Π±ΡΠ΄ΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π±ΡΠ΄Π΅Ρ Π·Π°Π΄Π°Π½Π° Π²ΡΡΠΎΡΠ°. Π‘ΡΠΎΠΈΡ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π·Π°Π΄Π°Π΅ΡΡΡ Π²ΡΡΠΎΡΠ°, ΡΠΎ Π²Π½Π΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-fill, ΠΌΠ°ΠΊΠ΅Ρ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π½Π΅Ρ Π±ΡΡΡ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·-Π·Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅.
ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΏΠΎΠ΄Π°ΡΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΡΠΌ. ΠΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ Π½Π΅ΡΠ΄ΠΎΠ±Π½ΡΠΌ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π²ΡΠ·ΡΠ²Π°Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΈΠ»ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡΠ΄ΡΡ Π΄Π»ΠΈΠ½Π½Π΅Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠΎΠ½ΡΠ΅Π½Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΡΠ°Π·Π΄Π΅Π»Π°, Π³Π΄Π΅ Π³ΠΎΠ²ΠΎΡΠΈΡΡΡ ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ column-fill, Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π·Π°Π΄Π°Π½Π° Π²ΡΡΠΎΡΠ°, ΡΠΎ ΡΠ°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅ΡΡΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. ΠΡΡ ΠΎΠ΄ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ Π²ΠΈΠ΄ ΠΌΠ°ΠΊΠ΅ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΡΡΠ΅Π½, ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π΄Π²ΠΈΠ³Π°ΡΡΡ Π² Π΄ΡΡΠ³ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅: ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ min-width, ΡΡΠΎΠ±Ρ Π² Π½Π΅ΠΌ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Π²ΡΡΠΎΡΡ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ Π΄Π΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΡΠΌΠ΅Π½ΡΡΠΈΠ»Π° ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, Π² ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½Π°ΡΠΈΠ½Π°ΡΡ Π²ΡΡ ΠΎΠ΄ΠΈΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΈ Π·Π°ΠΏΠΈΡΠ°Π»Π° Π΄Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠ°Π»Π΅Π΅ Ρ ΡΠΎΠ·Π΄Π°Π»Π° ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ min-width, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π·Π°ΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠΉ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΈ ΡΠΆΠ΅ Π² Π½Π΅ΠΌ ΠΏΡΠΎΠΏΠΈΡΠ°Π»Π° ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Π²ΡΡΠΎΡΡ.
article { -webkit-columns: 2 200px; -moz-columns: 2 200px; columns: 2 200px; -moz-column-fill: auto; column-fill: auto; } @media (min-width: 500px) { article { height: 350px; } }
article { Β Β -webkit-columns: 2 200px; Β Β Β Β -moz-columns: 2 200px; Β Β Β Β Β Β Β Β Β Β columns: 2 200px; Β Β -moz-column-fill: auto; Β Β Β Β Β Β column-fill: auto; } @media (min-width: 500px) { Β Β article { Β Β Β Β height: 350px; Β Β } } |
ΠΠ΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ gif-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ, ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Π²ΡΡΠΎΡΡ Π½Π΅ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ, ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ.
ΠΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π΄Π»ΠΈΠ½Π½Π΅Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
ΠΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° Π²Π°ΡΠ΅ΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΊΡΠΎΠ»Π» Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅: ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ min-height, ΡΡΠΎΠ±Ρ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΡΡΠ»ΠΎΠ²ΠΈΠ΅ min-height: 400px;Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π― ΠΏΡΠΈΡΠ»Π° ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΡΠ΅ΠΌ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π΄ΠΎ ΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ. ΠΠ°Π»Π΅Π΅ Ρ ΠΏΠΎΠ΄ΡΡΡΠΎΠΈΠ»Π° Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠΊΡΡΠ²Π°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ° min-height.
@media (min-height: 400px) { article { -webkit-columns: 2 350px; -moz-columns: 2 350px; columns: 2 350px; } }
@media (min-height: 400px) { Β Β article { Β Β Β Β -webkit-columns: 2 350px; Β Β Β Β Β Β -moz-columns: 2 350px; Β Β Β Β Β Β Β Β Β Β Β Β columns: 2 350px; Β Β } } |
ΠΠ΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ gif-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΠΌΡΠΉ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ 400px ΠΏΠΎ Π²ΡΡΠΎΡΠ΅, ΡΡΠΎΠ±Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π°ΡΠ°Π» ΡΠ°Π·Π±ΠΈΠ²Π°ΡΡΡΡ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°
CSS-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π΅ΠΏΠ»ΠΎΡ ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ (IE10+) ΠΈ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΡΠ΅Π±ΡΡΡ Π½Π°Π»ΠΈΡΠΈΡ Π²Π΅Π½Π΄ΠΎΡΠ½ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ². ΠΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ , ΠΎΡΠ²Π΅ΡΠ°ΡΡΠΈΡ Π·Π° ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΡΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ Can I Useβ¦.
ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²Π°Ρ Π»ΡΠ±ΠΈΠΌΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ², ΠΏΠΎΠΌΠ½ΠΈΡΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΠΎ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΠΎΡΠΊΠ°Π·ΠΎΡΡΡΠΎΠΉΡΠΈΠ²ΠΎΡΡΠΈ ΠΎΠ½ΠΈ ΡΠ²ΠΎΠ΄ΡΡΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠΌΡ ΠΌΠ°ΠΊΠ΅ΡΡ. CSS-ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ ΡΡΠΊΠ°Π»Π°ΡΠΎΡΠ°ΠΌ, Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½Ρ (ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΌΠ΅ΡΠΈΠ» Π°ΠΌΠ΅ΡΠΈΠΊΠ°Π½ΡΠΊΠΈΠΉ ΠΊΠΎΠΌΠΈΠΊ ΠΠΈΡΡ Π₯Π΅Π΄Π±Π΅ΡΠ³ (Mitch Hedberg)):
(ΠΏΡΠΈΠΌ. ΠΏΠ΅Ρ.: ΡΡΠΊΠ°Π»Π°ΡΠΎΡ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΠΎΠΌΠ°ΡΡΡΡ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡΡΡ Π² Π»Π΅ΡΡΠ½ΠΈΡΡ)
Π’Π°ΠΊΠΆΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΠΎΠΌΠ°ΡΡΡΡ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ.
ΠΠ²ΡΠΎΡ: Katy Decorah (ΡΠ΅Π΄Π°ΠΊΡΠΈΡ: Jason Morris)
ΠΡΡΠΎΡΠ½ΠΈΠΊ: //css-tricks.com/
Π Π΅Π΄Π°ΠΊΡΠΈΡ: ΠΠΎΠΌΠ°Π½Π΄Π° webformyself.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅PSD to HTML
ΠΡΠ°ΠΊΡΠΈΠΊΠ° Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠ° Π½Π° CSS Grid Ρ Π½ΡΠ»Ρ
Π‘ΠΌΠΎΡΡΠ΅ΡΡCSS ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ²
ΠΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ CSS
ΠΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ΅ΠΊΡΡ — ΠΊΠ°ΠΊ Π² Π³Π°Π·Π΅ΡΠ°Ρ :
ΠΠΆΠ΅Π΄Π½Π΅Π²Π½ΡΠΉ ΠΏΠΈΠ½Π³
Lorem ipsum
dolor sit amet, consctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud ΡΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΡ ullamcorper Suscipit
Π»ΠΎΠ±ΠΎΡΡΠΈΡ Π½ΠΈΡΠ» ΡΡ Π°Π»ΠΈΠΊΠ²ΠΈΠΏ ΡΠΊΡ Π΅Π° ΠΊΠΎΠΌΠΌΠΎΠ΄ΠΎ ΠΊΠΎΠ½ΡΠΊΠ²Π°Ρ.Duis autem vel eum iriure dolor Π² hendrerit Π² vulputate velit
esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possible assum.
CSS ΠΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°
Π ΡΡΠΎΠΉ Π³Π»Π°Π²Π΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ²:
-
ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ²
-
ΠΊΠΎΠ»ΠΎΠ½Π½Π°-Π·Π°Π·ΠΎΡ
-
ΡΡΠΎΠ»Π±Π΅Ρ-Π»ΠΈΠ½Π΅ΠΉΠΊΠ°
-
ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠ°-Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ
-
ΡΡΠΎΠ»Π±Π΅Ρ-Π»ΠΈΠ½Π΅ΠΉΠΊΠ°-ΡΠ²Π΅Ρ
-
Π»ΠΈΠ½Π΅ΠΉΠΊΠ°-ΡΡΠΎΠ»Π±Π΅Ρ
-
ΠΊΠΎΠ»ΠΎΠ½Π½ΠΎ-ΠΏΡΠΎΠ»Π΅ΡΠ½Π°Ρ
-
ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π§ΠΈΡΠ»Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
ΠΠΌΡΡΠ΅ΡΡΠ²ΠΎ | |||||
---|---|---|---|---|---|
ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² | 50,0 | 10,0 | 52,0 | 9,0 | 37,0 |
ΠΊΠΎΠ»ΠΎΠ½Π½Π°-Π·Π°Π·ΠΎΡ | 50,0 | 10,0 | 52,0 | 9,0 | 37.0 |
Π»ΠΈΠ½Π΅ΠΉΠΊΠ°-ΡΡΠΎΠ»Π±Π΅Ρ | 50,0 | 10,0 | 52,0 | 9,0 | 37,0 |
ΡΡΠΎΠ»Π±Π΅Ρ-Π»ΠΈΠ½Π΅ΠΉΠΊΠ°-ΡΠ²Π΅Ρ | 50,0 | 10,0 | 52,0 | 9,0 | 37,0 |
ΡΡΠΎΠ»Π±Π΅Ρ-Π»ΠΈΠ½Π΅ΠΉΠΊΠ° | 50,0 | 10,0 | 52.0 | 9,0 | 37,0 |
ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠ°-Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ | 50,0 | 10,0 | 52,0 | 9,0 | 37,0 |
ΠΊΠΎΠ»ΠΎΠ½Π½ΠΎ-ΠΏΡΠΎΠ»Π΅ΡΠ½Π°Ρ | 50,0 | 10,0 | 71,0 | 9,0 | 37,0 |
ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ | 50. 0 | 10,0 | 52,0 | 9,0 | 37,0 |
CSS Π‘ΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ²
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-count
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½
Π±ΡΡΡ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΠΌ Π½Π°.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ΅ΠΊΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅
CSS Π£ΠΊΠ°ΠΆΠΈΡΠ΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-gap
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°Π½ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ Π² 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ:
ΠΡΠ°Π²ΠΈΠ»Π° ΡΡΠΎΠ»Π±ΡΠΎΠ² CSS
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-rule-style
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠΈΠ»Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΠ΅ΠΆΠ΄Ρ
ΡΡΠΎΠ»Π±ΡΡ:
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-rule-width
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ:
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-rule-color
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ²Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ:
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-rule
— ΡΡΠΎ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π²ΡΠ΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ² column-rule- *, ΡΠΊΠ°Π·Π°Π½Π½ΡΡ
Π²ΡΡΠ΅.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π°, ΡΡΠΈΠ»Ρ ΠΈ ΡΠ²Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ:
Π£ΠΊΠ°ΠΆΠΈΡΠ΅, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-span
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ Π²Π°ΡΡΠ²Π°ΡΡ Π²ΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ:
Π£ΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠ°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-width
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ².
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΠ°Ρ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
CSS Π‘Π²ΠΎΠΉΡΡΠ²Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ²
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ:
ΠΠΌΡΡΠ΅ΡΡΠ²ΠΎ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² | ΠΠ°Π΄Π°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. |
ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² |
ΠΊΠΎΠ»ΠΎΠ½Π½Π°-Π·Π°Π·ΠΎΡ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π·Π°Π·ΠΎΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ |
Π»ΠΈΠ½Π΅ΠΉΠΊΠ°-ΡΡΠΎΠ»Π±Π΅Ρ | Π‘ΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π²ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ² column-rule- * |
ΡΡΠΎΠ»Π±Π΅Ρ-Π»ΠΈΠ½Π΅ΠΉΠΊΠ°-ΡΠ²Π΅Ρ | ΠΠ°Π΄Π°Π΅Ρ ΡΠ²Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ |
ΡΡΠΎΠ»Π±Π΅Ρ-Π»ΠΈΠ½Π΅ΠΉΠΊΠ° | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠΈΠ»Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ |
ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠ°-Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ |
ΠΊΠΎΠ»ΠΎΠ½Π½ΠΎ-ΠΏΡΠΎΠ»Π΅ΡΠ½Π°Ρ | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ Π²Π°ΡΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ |
ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ | ΠΠ°Π΄Π°Π΅Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ². |
ΡΡΠΎΠ»Π±ΡΡ | Π‘ΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΈ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΡΡΠΎΠ»Π±ΡΠΎΠ² |
ΠΠΎΠ³Π΄Π° ΠΈ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ CSS — Smashing Magazine
ΠΠ± Π°Π²ΡΠΎΡΠ΅
Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (Rachel Andrew) — Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ, ΠΏΠΈΡΠ°ΡΠ΅Π»Ρ ΠΈ Π΄ΠΎΠΊΠ»Π°Π΄ΡΠΈΠΊ.ΠΠ½Π° ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΡΠΎΠΌ ΡΡΠ΄Π° ΠΊΠ½ΠΈΠ³, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ The New CSS Layout. ΠΠ½Π° ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ΅Ρ , ΠΊΡΠΎ ΡΡΠΎΠΈΡ Π·Π°β¦ ΠΠΎΠ»ΡΡΠ΅ ΠΎ Π ΡΠΉΡΠ΅Π» β¬
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΠ°ΡΡΠΎ ΡΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΈΠ· Π²ΠΈΠ΄Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ΅ΡΠΊΡ ΠΈ Flexbox. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ½ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ, ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΈ ΡΠ°ΠΉΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΠΎΡΠΎ Π΅Π³ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡ.
ΠΡΠΈ Π²ΡΠ΅ΠΌ Π²ΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ CSS Grid Layout ΠΈ Flexbox Π΄ΡΡΠ³ΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΡΠ°ΡΡΠΎ ΡΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΈΠ· Π²ΠΈΠ΄Ρ. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΡΡΠΎ Π½Π°Π·ΡΠ²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΡΠΌ, Π° ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈ Β«ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ CSSΒ».ΠΡ ΡΠ·Π½Π°Π΅ΡΠ΅, Π΄Π»Ρ ΠΊΠ°ΠΊΠΈΡ Π·Π°Π΄Π°Ρ ΠΎΠ½ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΈ Π½Π° ΡΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠ°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ².
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Multicol?
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΈΠ΄Π΅Ρ ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π·ΡΡΡ ΠΊΡΡΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΅Π³ΠΎ ΠΏΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΡΡΠΎΠ»Π±ΡΠ°ΠΌ, ΠΊΠ°ΠΊ Π² Π³Π°Π·Π΅ΡΠ΅. ΠΡ Π΄Π΅Π»Π°Π΅ΡΠ΅ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π΄Π²ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ². Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-count
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠ°Π·Π±ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-width
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡ.
ΠΠ΅Π²Π°ΠΆΠ½ΠΎ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΠ΅ Π² ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π²ΡΠ΅ ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, Π½ΠΎ ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΡΡΠΎΠ»Π±ΡΡ. ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅Ρ multicol ΠΎΡ Π΄ΡΡΠ³ΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΡΡΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Flexbox ΠΈ Grid Π±Π΅ΡΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΈ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°ΡΠ΅ΠΌ ΡΡΠ°ΡΡΠ²ΡΡΡ Π² Π³ΠΈΠ±ΠΊΠΎΠΌ ΠΈΠ»ΠΈ ΡΠ΅ΡΠΎΡΠ½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅. Π‘ multicol Ρ Π²Π°Ρ Π²ΡΠ΅ Π΅ΡΠ΅ Π±ΡΠ΄Π΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ, ΠΊΡΠΎΠΌΠ΅ ΠΊΠ°ΠΊ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠ°.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠ°
, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΡΠΎΠ»Π±ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 14em
. Multicol Π½Π°Π·Π½Π°ΡΠ°Π΅Ρ ΡΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² 14em
, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ. Π‘ΡΠΎΠ»Π±ΡΡ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 14em
, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΡ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ»Π±Π΅Ρ, ΠΈ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅. Multicol Π±ΡΠ» ΠΏΠ΅ΡΠ²ΡΠΌ ΡΠ°Π·ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠ²ΠΈΠ΄Π΅Π»ΠΈ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² CSS, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ·Π΄Π°Π²Π°Π»ΠΈΡΡ ΡΡΠΎΠ»Π±ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ»ΠΈ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌΠΈ. ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΎΡΠ΅ΠΊ ΠΎΡΡΠ°Π½ΠΎΠ²Π°, Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Ρ ΡΡΠΈΠΌ ΡΠΏΡΠ°Π²ΠΈΡΡΡ.
Π‘ΠΌ. Pen Smashing Multicol: column-width Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.
Π‘ΠΌ. Pen Smashing Multicol: column-width ΠΎΡ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ²
ΠΠΎΠ»Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ²ΠΎΠΉΡΡΠ² ΡΡΠΎΠ»Π±ΡΠ°, Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π°ΡΠ΅Π»Π΅Π½Ρ. ΠΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅ΡΠΈΡΡ ΠΈΡ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ Π΅ΠΌΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΠΈΠ»ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ»Ρ. ΠΡΠ΅ ΠΏΠΎΠ»Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π±ΡΠ΄ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-rule, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ Π³ΡΠ°Π½ΠΈΡΠ°. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° column-gap
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 1em
, ΠΎΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ Π½Π° Π»ΡΠ±ΡΡ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»ΠΈΠ½Ρ.
Π‘ΠΌ. Pen Smashing Multicol: ΡΡΠΈΠ»ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΎΡ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.
Π‘ΠΌ. Pen Smashing Multicol: ΡΡΠΈΠ»ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΎΡ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.ΠΡΠΎ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ multicol. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π·ΡΡΡ ΠΊΡΡΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈ ΡΠ°Π·Π±ΠΈΡΡ Π΅Π³ΠΎ Π½Π° ΡΡΠΎΠ»Π±ΡΡ. ΠΠΎΠ½ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΡΡΠΎΠ»Π±ΡΡ ΠΏΠΎ ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΡΡΠΎΠ»Π±ΡΡ Π²ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Ρ ΡΠ΅ΠΌΠΈ ΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ, ΡΡΠΎ ΠΈ Π³ΡΠ°Π½ΠΈΡΠ°. ΠΠΎΠΊΠ° Π²ΡΠ΅ Ρ ΠΎΡΠΎΡΠΎ, ΠΈ Π²ΡΠ΅ Π²ΡΡΠ΅ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΈ ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΎΡΠ΅Π½Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠΉ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ.
ΠΡΡΡ Π΅ΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΎ ΠΊΠΎΡΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.
Π‘ΠΎΡΡΠ°Π²Π½ΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ
ΠΠ½ΠΎΠ³Π΄Π° Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ°Π·Π±ΠΈΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π° ΡΡΠΎΠ»Π±ΡΡ, Π½ΠΎ Π·Π°ΡΠ΅ΠΌ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΏΠΎΠ»Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ². ΠΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ column-span
ΠΊ ΠΏΠΎΡΠΎΠΌΠΊΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° multicol.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π·Π°ΡΡΠ°Π²ΠΈΠ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΎΡ
Π²Π°ΡΠΈΡΡ ΠΌΠΎΠΈ ΡΡΠΎΠ»Π±ΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π½Π°Π±ΠΎΡ ΠΏΠΎΠ»Π΅ΠΉ Π½Π°Π΄ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ, Π° Π·Π°ΡΠ΅ΠΌ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ Π½Π°Π±ΠΎΡ ΠΏΠΎΠ»Π΅ΠΉ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π½ΠΈΠΆΠ΅.ΠΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠΊΠ°ΠΊΠΈΠ²Π°Π΅Ρ ΡΠ΅ΡΠ΅Π· ΡΠΎΡΡΠ°Π²Π½ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ column-span
Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ Π² Firefox ΠΈ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π·Π° ΡΠ»Π°ΠΆΠΊΠΎΠΌ ΡΡΠ½ΠΊΡΠΈΠΈ.
Π‘ΠΌ. «Pen Smashing Multicol»: ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.
Π‘ΠΌ. «Pen Smashing Multicol»: ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen. ΠΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ Π² ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ column-span
: all
ΠΈΠ»ΠΈ none
.ΠΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡ
Π²Π°ΡΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΡΠΎΠ»Π±ΡΠΎΠ², Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΌΠ°ΠΊΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π² Π³Π°Π·Π΅ΡΠ΅, ΡΠΎΡΠ΅ΡΠ°Ρ ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ°. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠ΅ΡΠΊΠΈ Ρ Π΄Π²ΡΠΌΡ Π΄ΠΎΡΠΎΠΆΠΊΠ°ΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ². ΠΠ΅Π²Π°Ρ ΠΊΠΎΠ»Π΅Ρ — 2fr
, ΠΏΡΠ°Π²Π°Ρ — 1fr
. ΠΡΡΠΈΠΊΡΠ» Π² Π»Π΅Π²ΠΎΠΌ ΡΡΠ΅ΠΊΠ΅ Ρ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΠ» Π² ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»ΠΎΠ½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ Π΄Π²ΡΠΌΡ ΡΡΠ΅ΠΊΠ°ΠΌΠΈ, ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π‘ΠΏΡΠ°Π²Π° Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠΎΡΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ Π²ΠΎ Π²ΡΠΎΡΡΡ Π΄ΠΎΡΠΎΠΆΠΊΡ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ. ΠΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π½Π°ΠΌ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΡ — Π½Π΅ Π±ΠΎΠΉΡΠ΅ΡΡ ΡΠΌΠ΅ΡΠΈΠ²Π°ΡΡ ΠΈ ΡΠΎΡΠ΅ΡΠ°ΡΡ!
Π‘ΠΌ. Pen Smashing Multicol: ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΠΎΡ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.
Π‘ΠΌ. Pen Smashing Multicol: ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΠΎΡ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΡΠ²Π°ΠΌΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΠΈΡΡΠ°ΡΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ Π² ΡΡΠΎΠ»Π±ΡΠ΅, Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠΎΠ»Π±Π΅Ρ.ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΌΠΈ, ΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠ΅ΠΉ Π±ΡΠ»ΠΎ Π±Ρ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡ ΠΎΡΡΠ°Π²Π°Π»ΠΈΡΡ ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ ΡΠ΅Π»ΠΎΠ΅, Π° Π½Π΅ ΡΠ°Π·Π΄Π΅Π»ΡΠ»ΠΈΡΡ ΠΏΠΎ ΡΡΠΎΠ»Π±ΡΠ°ΠΌ. Π§ΡΠΎΠ±Ρ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Ρ ΡΡΠΈΠΌΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ, Π² CSS Π΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΡΡΠ² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠ°Π·Π΄Π΅Π»ΡΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π° ΡΡΠΎΠ»Π±ΡΡ, Π²Ρ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΠ΅ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΡ. Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Π²Π΅ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ°Π·Π΄Π΅Π»ΡΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΠΏΠ΅ΡΠ°ΡΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, multicolor Π±Π»ΠΈΠΆΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΊ Paged Media, ΡΠ΅ΠΌ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.ΠΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
Π»Π΅Ρ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΡΡΠ²Π°ΠΌΠΈ Π² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° page-break-
, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ ΡΠ°ΡΡΡΡ CSS2.1.
-
ΡΠ°Π·ΡΡΠ²Π° ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎ
-
ΡΠ°Π·ΡΡΠ²Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΡΠ»Π΅
-
ΡΠ°Π·ΡΡΠ²Π° ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΡΡΡΠΈ
Π‘ΠΎΠ²ΡΠ΅ΠΌ Π½Π΅Π΄Π°Π²Π½ΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ CSS ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ»Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°, ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π΄Π΅ΡΠ°Π»ΠΈ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΠ½ΡΡ Π½ΠΎΡΠΈΡΠ΅Π»Π΅ΠΉ, ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ Π·Π°Π²ΠΈΡΡΠ΅ΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ΅Π³ΠΈΠΎΠ½ΠΎΠ²; Π Π΅Π³ΠΈΠΎΠ½Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΈΡΡΡΡ Π½Π΅ΠΏΡΠ΅ΡΡΠ²Π½ΡΠΉ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.Π‘Π΄Π΅Π»Π°Π² ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ Π±ΡΠ΄ΡΡΠ΅ΠΌΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ, ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ· Flexbox Π±ΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½Ρ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Box Alignment, ΡΡΠΎΠ±Ρ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΡΠ΅ΡΠΊΠΈ ΠΈ Π±Π»ΠΎΠΊΠ°.
-
ΠΎΠ±ΡΡΠ² Π΄ΠΎ
-
ΠΎΠ±ΡΡΠ² ΠΏΠΎΡΠ»Π΅
-
ΠΎΠ±ΡΡΠ² Π²Π½ΡΡΡΠΈ
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π²Π·Π»ΠΎΠΌ Π²Π½ΡΡΡΠΈ, ΠΈΠ·Π±Π΅Π³Π°ΠΉΡΠ΅
Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ , ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΡ
ΡΠ°Π½ΡΡΡ ΡΠΈΠ³ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΈΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΡ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π½Π΅ΡΠ±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ Pen Smashing Multicol: Π²Π·Π»ΠΎΠΌ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.
Π‘ΠΌ. Pen Smashing Multicol: Π²Π·Π»ΠΎΠΌ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² Π² ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ Π²Π΅ΡΡΠΌΠ° Π½Π΅ΠΎΠ΄Π½ΠΎΡΠΎΠ΄Π½Π°. ΠΠ°ΠΆΠ΅ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ, ΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ ΡΠ°ΠΊΡΠ°, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ², ΠΏΡΡΠ°ΡΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π²Π·Π»ΠΎΠΌ, ΡΡΠΎ, ΠΏΠΎ ΡΡΡΠΈ, Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π³Π΄Π΅-Π»ΠΈΠ±ΠΎ ΡΠ»ΠΎΠΌΠ°ΡΡΡΡ.Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΡ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΎΠ΄Π½Π°ΠΊΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π²Π°ΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡΠ΅ Π²Π°ΠΆΠ½ΡΠ΅ ΡΠ»ΡΡΠ°ΠΈ.
ΠΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² ΡΠ΅ΡΠΈ
ΠΠ΄Π½Π° ΠΈΠ· ΠΏΡΠΈΡΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΡ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΠΏΡΡ ΡΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΡΡΠ°Π²ΠΈΠ» Π±Ρ ΡΠΈΡΠ°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ Π² Π±Π»ΠΎΡΠ½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ . ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π»ΠΎ Π±Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ· ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π΄Π»Ρ ΡΠ΅Ρ ΠΈΠ· Π½Π°Ρ, ΠΊΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅ΠΆΠΈΠΌ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΈΡΡΠΌΠ°. ΠΡΠΎ ΠΏΠ»ΠΎΡ ΠΎΠΉ ΠΎΠΏΡΡ ΡΡΠ΅Π½ΠΈΡ!
ΠΡΠ»ΠΈ Π²Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΠ΅ Π²ΡΡΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π±Π»ΠΎΠΊΠ° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° vh
, ΠΈ ΡΠ°ΠΌ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π²ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ, ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π‘ΠΌ. Π‘ΡΠΎΠ»Π±ΡΡ Β«Π Π°Π·Π±ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ°Β»: ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.
Π‘ΠΌ. Π‘ΡΠΎΠ»Π±ΡΡ Β«Π Π°Π·Π±ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ°Β»: ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΡ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ (@rachelandrew) Π½Π° CodePen.ΠΠΈ ΡΠΎ, Π½ΠΈ Π΄ΡΡΠ³ΠΎΠ΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ, ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² ΡΠ΅ΡΠΈ — ΡΡΠΎ ΡΠΎ, ΠΎ ΡΠ΅ΠΌ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠ΅Π½Ρ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡΡΠ΅ΠΌΠΈΡΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π² Π½Π°ΡΠΈΡ ΡΡΠΎΠ»Π±ΡΠ°Ρ .
Π‘ΡΠΎΠ»Π±ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°
ΠΠ»Ρ Π£ΡΠΎΠ²Π½Ρ 2 ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΌΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌ, ΠΊΠ°ΠΊ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΌΠ΅ΡΠΎΠ΄, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠ·ΡΠ²Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡΡΡ Π² Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠ°.ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π»ΠΎ Π±Ρ, ΡΡΠΎ Ρ Π²Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ Π²ΡΡΠΎΡΠΎΠΉ, ΠΈ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ΄Π΅Π»Π°Π»ΠΎ ΡΡΠΎΠ»Π±ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ ΡΡΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π½ΠΈΠΆΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ Π½ΠΎΠ²ΡΠΉ Π½Π°Π±ΠΎΡ ΡΡΠΎΠ»Π±ΡΠΎΠ². ΠΡΠΎ Π±ΡΠ΄Π΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° Π½Π°Ρ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡ Π²Π°ΡΠ° Π²ΡΡΠ΅, ΠΎΠ΄Π½Π°ΠΊΠΎ, Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π³Π°Π΅ΡΠ½ΡΠΉ ΠΊΠ»ΡΡ, Π²ΡΠ·ΡΠ²Π°ΡΡΠΈΠΉ Π·Π°ΠΏΡΡΠΊ Π½ΠΎΠ²ΡΡ ΠΏΠΎΠ»Π΅ΠΉ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Π²ΡΠ·Π²Π°Π½Π½ΠΎΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ½ΠΎΡΡΠΈ Π±Π»ΠΎΠΊΠ°.
ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ ΡΠ΄Π΅Π»Π°Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. ΠΠΎΠΊΠ° ΠΌΡ Π½Π°Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π² ΡΡΠΎΡΠΎΠ½Π΅, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π² ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ ΡΠ°Π±ΠΎΡΠ΅ΠΉ Π³ΡΡΠΏΠΏΡ CSS.ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΎΠΏΡΠ±Π»ΠΈΠΊΡΠΉΡΠ΅ ΠΈΡ , ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π½ΠΎΠ²ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ.
Π§Π΅ΠΌ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Multicol?
Π ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΡΠ°Π·Π±ΠΈΠ²Π°ΡΡ Π²Π΅ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π° ΡΡΠΎΠ»Π±ΡΡ Π±Π΅Π· ΡΡΠ΅ΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ. ΠΠ΄Π½Π°ΠΊΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»Π» ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠ΅ΠΌ, ΡΡΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠΈ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π‘Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ°
ΠΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΡΠΉ ΡΡΠΈΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, Π³Π΄Π΅ Ρ Π²Π°Ρ Π΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π·Π°Π½ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΠΌΠ΅ΡΡΠ°.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΈΠ»ΠΈ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠΌΠ΅Π½. Π§Π°ΡΡΠΎ Π² ΡΡΠΈΡ ΡΡΠ΅Π½Π°ΡΠΈΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π½Π΅ ΡΠΈΡΠ°Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ»Π±Π΅Ρ, Π° Π·Π°ΡΠ΅ΠΌ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ Π½Π°ΡΠ°Π»Ρ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ, Π° ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² ΠΏΠΎΠΈΡΠΊΠ°Ρ ΡΠ»Π°ΠΆΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π»ΠΊΠ½ΡΡΡ, ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ. ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ ΠΎΠΏΡΡ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ Π±ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»Π»Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π‘Π°Π½Π΄Π΅ΡΠΎΠΌ Π΄Π΅ ΠΠΎΠ½Π³ΠΎΠΌ, Π½Π° ΡΠ°ΠΉΡΠ΅ DonarMuseum.
Π DonarMuseum ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ», ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠΎΠ² ΠΈΠΌΠ΅Π½.(ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ) (ΠΏΡΠ΅Π²ΡΡ Π² Π±ΠΎΠ»ΡΡΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ)ΠΠ·Π²Π΅ΡΡΠ½ΠΎΠ΅ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
ΠΡΠ²Π°ΡΡ ΡΠ»ΡΡΠ°ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠ°ΠΉΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎ ΡΠ°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠ°Π»Π° ΠΈ ΡΠΌΠ΅ΡΡΠΈΡΡΡ Π½Π° Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠΊΡΠ°Π½ΠΎΠ², Π½Π΅ Π²ΡΠ·ΡΠ²Π°Ρ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΉ Notist Π΄Π»Ρ Π²ΡΡΡΠΏΠ»Π΅Π½ΠΈΡ Π² Π΄ΠΎΠΊΠ»Π°Π΄.
ΠΠ½Π΄ΠΈ ΠΠ»Π°ΡΠΊ ΡΠΎΠ·Π΄Π°Π» ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Equfund.
ΠΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Equfund Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΠΎΡΡΠ°ΡΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ².(ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ) (ΠΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ)Π§ΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ², ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ Π²ΡΡΠΎΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΈΡΠΈΠ½Ρ (ΠΈΠ»ΠΈ Π² Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΌΠΈΡΠ΅, Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ). ΠΡΠ»ΠΈ Π²Ρ Π²ΠΊΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΡΠΊΠ΅ ΠΎΡΡΠ°Π½ΠΎΠ²Π°, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²Π΅Π»ΠΈΠΊΠ° Π΄Π»Ρ ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠΏΠ°ΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΎΡ ΠΏΠ»ΠΎΡ ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΏΠΎΡ ΠΎΠΆΠ΅Π΅ Π½Π° ΠΌΠ°ΡΠΎΠ½ΡΡΠ²ΠΎ
ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΌΠ΅ΡΡΠΎ, Π³Π΄Π΅ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, — ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ ΡΠΈΠΏΡ ΠΌΠ°ΡΠΎΠ½ΡΡΠ²Π°.Multicol — ΡΡΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ°ΠΊΠ΅ΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΈΠΏΠ° Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ°Π·Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ. Π‘Π΅ΡΠΊΠ° Π»ΠΈΠ±ΠΎ ΠΎΡΡΠ°Π²Π»ΡΠ»Π° Π·Π°Π·ΠΎΡ, Π»ΠΈΠ±ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π»Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»Π°ΡΡ ΡΡΡΠΎΠ³Π°Ρ Π΄Π²ΡΡ ΠΌΠ΅ΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°.
Π£ ΠΠ΅ΡΠ»Π΅ ΠΠΈΡΠ΅ΡΡ Π΅ΡΡΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»Π΅ΠΉ Π½Π° ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΡ.
Π ΡΡΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΠ΅ΡΠ»Π΅ ΠΠΈΡΠ΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΡΠΉ ΡΠ·ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΊΠΎΡΠΎΠ±ΠΎΠΊ ΠΈΠ»ΠΈ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ Π² Π²ΠΈΠ΄Π΅ ΡΡΠΎΠ»Π±ΡΠΎΠ². (ΠΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ)Π Π΅Π·Π΅ΡΠ²Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ΅ΡΠΊΠΈ ΠΈ Flexbox
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΡΡΠΎΠ»Π±ΡΠ° -
ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅Π·Π΅ΡΠ²Π½ΡΡ
Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ ΠΈ Flex.ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°ΠΆΠ΅ΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ²ΠΎΠΉΡΡΠ² Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, Π·Π°ΡΠ΅ΠΌ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π² ΠΌΠ°ΠΊΠ΅Ρ Flex ΠΈΠ»ΠΈ Grid Ρ ΠΏΠΎΠΌΠΎΡΡΡ display: flex
ΠΈΠ»ΠΈ display: grid
, Π»ΡΠ±ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΡΠΎΠ»Π±ΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠ΄Π°Π»Π΅Π½ΠΎ. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠ°ΠΊΠ΅Ρ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ΅ΡΠΊΠΈ, ΠΈ ΠΌΠ°ΠΊΠ΅Ρ Π±ΡΠ΄Π΅Ρ ΡΠΈΡΠ°Π΅ΠΌΡΠΌ, Π΅ΡΠ»ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΡΡΠΎΠ»Π±ΡΠ°Ρ
, Π° Π½Π΅ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ multicol ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΠΎΠΉ Π·Π°ΠΏΠ°ΡΠ½ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ. ΠΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ΅ΡΠΊΡ, ΠΏΠΎΠ»ΡΡΠ°Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΡΠΉ Π΄ΠΈΡΠΏΠ»Π΅ΠΉ, Π° ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ΅ΡΠΊΡ, ΠΏΠΎΠ»ΡΡΠ°Ρ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ΅ΡΠΊΠΈ.
ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΎ ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»ΠΎΡΠ΅!
ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΡΠΎ Ρ ΠΎΡΠ²Π΅ΡΠ°Ρ Π½Π° Π²ΠΎΠΏΡΠΎΡΡ Grid ΠΈ Flexbox, Π³Π΄Π΅ ΠΎΡΠ²Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Grid ΠΈΠ»ΠΈ Flexbox, Π° Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° Multicol. ΠΠ΅ΡΠΎΡΡΠ½ΠΎ, Π²Ρ Π½Π΅ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π½Π° Π²ΡΠ΅Ρ ΡΠ°ΠΉΡΠ°Ρ , Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ Π²ΡΡΡΠ΅ΡΠΈΡΠ΅ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ. Π MDN Π΅ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΠ΅ΡΡΡΡΡ Π΄Π»Ρ ΠΌΡΠ»ΡΡΠΈΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΡΠΉ ΡΡΠΈΡΡ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΎΡΡΠ°Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ , ΡΡΠΎΠ±Ρ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ Π΄ΡΡΠ³ΠΈΡ ΡΠΏΠΎΡΠΎΠ±Π°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ.
(il)javascript — Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ 2 ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΠΊΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS / HTML. ΠΠ²Π° ΡΠΏΠΎΡΠΎΠ±Π° Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΡΠΎΠ³ΠΎ:
ΠΠ΅ΡΠΎΠ΄ 1. ΠΠΎΠ³Π΄Π° Π½Π΅Ρ Π½Π΅ΠΏΡΠ΅ΡΡΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°, ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Π°Π±Π·Π°ΡΠ΅Π²:
ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ Π²ΡΠ΅ Π°Π±Π·Π°ΡΡ Π²Π»Π΅Π²ΠΎ, ΠΏΡΠΈΠ΄Π°ΠΉΡΠ΅ ΠΈΠΌ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ.
ΠΡΠΎ Π°Π±Π·Π°Ρ 1.Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 2. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 3. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 4. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 5. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 6. Lorem ipsum ...
#container {width: 600px; }
#container p {float: left; ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; / * Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ height: 300px; * /}
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΡΠ°Π²Π»ΡΡΡ ΡΠ΅ΡΠΊΠΈΠ΅ div ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±Π·Π°ΡΠ°ΠΌΠΈ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ.ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π΄Π²Π° ΡΡΠΎΠ»Π±ΡΠ° , Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ΅ΡΠΊΠΈΠΉ div ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΠΈ Π΄Π²ΡΠΌΡ Π°Π±Π·Π°ΡΠ°ΠΌΠΈ. ΠΡΠΎ Π²ΡΡΠΎΠ²Π½ΡΠ΅Ρ Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ Π΄Π²ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π°Π±Π·Π°ΡΠ΅Π², ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ ΠΈΡ Π±ΠΎΠ»Π΅Π΅ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΠΌΠΈ. ΠΡΠΈΠΌΠ΅Ρ:
ΠΡΠΎ Π°Π±Π·Π°Ρ 1. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 2. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 3. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 4. Lorem ipsum ...
ΠΡΠΎ ΠΏΡΠ½ΠΊΡ 5.Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 6. Lorem ipsum ...
/ * Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌΡ Π²ΡΡΠ΅ CSS * /
.clear {ΡΡΠ½ΠΎ: ΠΎΠ±Π°; Π²ΡΡΠΎΡΠ°: 0; }
ΠΠ΅ΡΠΎΠ΄ 2: Π΅ΡΠ»ΠΈ ΡΠ΅ΠΊΡΡ Π½Π΅ΠΏΡΠ΅ΡΡΠ²Π½ΡΠΉ
ΠΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ, Π½ΠΎ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.
ΠΡΠΎ Π°Π±Π·Π°Ρ 1. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 2. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 3. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 4.Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 5. Lorem ipsum ...
ΠΡΠΎ Π°Π±Π·Π°Ρ 6. Lorem ipsum ...
.contentColumn {ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ; }
#container {width: 600px; }
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΏΡΠΎΡΡΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ: Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π³ΠΊΠΈΠΌ Π΄Π»Ρ Π½Π΅ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΡΠ°ΡΡΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ Π΅ΠΌΡ / Π΅ΠΉ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΠΈ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ, ΠΏΠΎΡΠ΅ΠΌΡ. ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΠ² HTML Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ — Π½Π΅ΠΏΠ»ΠΎΡ Π°Ρ ΠΈΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ΅ΡΠ΅Π· WYSIWYG-ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ.
ΠΠ»ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊΠΎΠ΅-Π½ΠΈΠ±ΡΠ΄Ρ Javascript-ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ΄ΡΡΠΈΡΡΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π°Π±Π·Π°ΡΠ΅Π², ΡΠ°Π·Π±ΠΈΠ²Π°Π΅Ρ ΠΈΡ Π½Π° Π΄Π²Π° ΠΈ ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΡΠΎΠ»Π±ΡΡ. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΡΡΠ½ΠΎ ΡΡ ΡΠ΄ΡΠ°ΡΡΡΡ Π΄Π»Ρ ΡΠ΅Ρ , Ρ ΠΊΠΎΠ³ΠΎ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ JavaScript. Π’ΡΠ΅ΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ — Π²ΡΠ΅ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ Π½Π° ΡΡΠΎΠ»Π±ΡΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ΅ΡΠ²Π΅ΡΠ°, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π²Π°ΡΠΈΠ°Π½Ρ.
(ΠΌΠ΅ΡΠΎΠ΄ 3: ΠΌΠΎΠ΄ΡΠ»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ CSS3)
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ ΡΠΈΡΠ°Π»ΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3, Π½ΠΎ ΡΡΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.ΠΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, ΠΏΠΎΠΊΠ°.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΠ΅ΡΠΊΠΈ — CSS: ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ
CSS Grid Layout ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ Π² CSS ΡΠΈΡΡΠ΅ΠΌΡ Π΄Π²ΡΠΌΠ΅ΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ. Π‘Π΅ΡΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΡΠ° ΡΡΠ°ΡΡΡ Π·Π½Π°ΠΊΠΎΠΌΠΈΡ Ρ CSS Grid Layout ΠΈ Π½ΠΎΠ²ΠΎΠΉ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS Grid Layout Level 1. Π€ΡΠ½ΠΊΡΠΈΠΈ, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² ΡΡΠΎΠΌ ΠΎΠ±Π·ΠΎΡΠ΅, Π±ΡΠ΄ΡΡ Π·Π°ΡΠ΅ΠΌ ΠΎΠ±ΡΡΡΠ½Π΅Π½Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ Π² ΠΎΡΡΠ°Π²ΡΠ΅ΠΉΡΡ ΡΠ°ΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π°.
Π‘Π΅ΡΠΊΠ° — ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΠΈΡ ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ Π»ΠΈΠ½ΠΈΠΉ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΡ ΡΡΠΎΠ»Π±ΡΡ ΠΈ ΡΡΡΠΎΠΊΠΈ.ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Ρ Π½Π° ΡΠ΅ΡΠΊΠ΅ Π²Π½ΡΡΡΠΈ ΡΡΠΈΡ ΡΡΡΠΎΠΊ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈ ΡΡΡΠΎΠΊ. ΠΠ°ΠΊΠ΅Ρ ΡΠ΅ΡΠΊΠΈ CSS ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ:
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅ΡΠΊΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ — Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ. ΠΡΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ΅ΡΠΊΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΌΡ ΠΌΠ°ΠΊΠ΅ΡΡ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅ΡΠΊΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Ρ ΠΏΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° fr
, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΠΎΠ³ΠΎ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ.
Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΠΎΡΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΡΠ΅ΡΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π½ΠΎΠΌΠ΅ΡΠ° ΡΡΡΠΎΠΊ, ΠΈΠΌΠ΅Π½Π° ΠΈΠ»ΠΈ Π²ΡΠ±ΡΠ°Π² ΠΎΠ±Π»Π°ΡΡΡ ΡΠ΅ΡΠΊΠΈ.Π‘Π΅ΡΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π°Π»Π³ΠΎΡΠΈΡΠΌ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π΅ ΠΈΠΌΠ΅ΡΡΠΈΡ ΡΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΡΠ΅ΡΠΊΠ΅.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ²Π½ΡΡ ΡΠ΅ΡΠΊΡ Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ ΡΠ΅ΡΠΊΠΈ. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Grid Layout Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π³ΠΈΠ±ΠΊΠ°Ρ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ ΠΈ ΡΡΠΎΠ»Π±ΡΡ. ΠΠΊΠ»ΡΡΠ΅Π½Ρ ΡΠ°ΠΊΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Β«ΡΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΒ».
Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ
Π‘Π΅ΡΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΡΠ»Π΅ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ΅ΡΠΊΠΈ ΠΈ ΡΠΎ, ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΡ ΡΠ΅ΡΠΊΠ°.
Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠΈΠΌΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ
Π ΡΡΠ΅ΠΉΠΊΡ ΠΈΠ»ΠΈ ΠΎΠ±Π»Π°ΡΡΡ ΡΠ΅ΡΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ°ΡΡΠΈΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°. ΠΠ°ΡΠ΅ΠΌ ΡΡΠΈΠΌ ΡΠ»ΠΎΠ΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index
.
Grid — ΡΡΠΎ ΠΌΠΎΡΠ½Π°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ°ΡΡΡΠΌΠΈ CSS, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ flexbox, ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ°ΠΊΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π½Π΅Π΅ Π±ΡΠ»ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡΡΠΎΠΈΡΡ Π² CSS. ΠΡΠ΅ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΠΊΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΡΠ΅ΡΠΊΠΈ .
ΠΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠ΅ΡΠΊΠΈ , ΠΎΠ±ΡΡΠ²ΠΈΠ² display: grid
ΠΈΠ»ΠΈ display: inline-grid
Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅ΠΌ, Π²ΡΠ΅ ΠΏΡΡΠΌΡΡ
ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠ°Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ΅ΡΠΊΠΈ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ div Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ, Π° Π²Π½ΡΡΡΠΈ ΠΏΡΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ΄ΠΈΠ½
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
ΠΡΡΡ
Π― Π΄Π΅Π»Π°Ρ .wrapper
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΡΠ΅ΡΠΊΠΈ.
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
}
ΠΡΠ΅ ΠΏΡΡΠΌΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ²Π»ΡΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ΅ΡΠΊΠΈ. Π Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π²Ρ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΡΠ°Π·Π½ΠΈΡΡ Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΠΈΡ
Π² ΡΠ΅ΡΠΊΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ΅ΡΠΊΠ° ΡΠΎΠ·Π΄Π°Π»Π° ΡΠ΅ΡΠΊΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Grid Inspector, Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ ΠΊΠ°ΠΊ ΡΠ°ΡΡΡ Firefox’s Developer Tools. ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π² Firefox ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΠ΅ ΡΠ΅ΡΠΊΡ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ Π·Π½Π°ΡΠΎΠΊ ΡΡΠ΄ΠΎΠΌ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ grid
.Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡ, ΠΈ ΡΠ΅ΡΠΊΠ° Π½Π° ΡΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½Π° Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΡ Ρ CSS Grid Layout ΡΡΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π°ΡΡ Π²Π°ΠΌ Π»ΡΡΡΠ΅Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ Π²Π°ΡΠΈΠΌΠΈ ΡΠ΅ΡΠΊΠ°ΠΌΠΈ.
ΠΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π½Π°ΡΠ°ΡΡ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΡ ΠΎΠΆΠΈΠΌ Π½Π° ΡΠ΅ΡΠΊΡ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ².
ΠΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΡΡΠΎΠΊΠΈ ΠΈ ΡΡΠΎΠ»Π±ΡΡ Π² Π½Π°ΡΠ΅ΠΉ ΡΠ΅ΡΠΊΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² grid-template-columns
ΠΈ grid-template-rows
. ΠΠ½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΡΠ΅ΡΠΊΠΈ.ΠΠΎΡΠΎΠΆΠΊΠ° ΡΠ΅ΡΠΊΠΈ — ΡΡΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π»ΡΠ±ΡΠΌΠΈ Π΄Π²ΡΠΌΡ Π»ΠΈΠ½ΠΈΡΠΌΠΈ ΡΠ΅ΡΠΊΠΈ. ΠΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΡ Π΄ΠΎΡΠΎΠΆΠΊΡ — ΡΡΠΎ Π΄ΠΎΡΠΎΠΆΠΊΠ° ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π² Π½Π°ΡΠ΅ΠΉ ΡΠ΅ΡΠΊΠ΅.
Π― ΠΌΠΎΠ³Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ grid-template-columns
, Π° Π·Π°ΡΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ² ΡΠ°Π·ΠΌΠ΅Ρ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ ΡΡΠΎΠ»Π±ΡΠΎΠ².
Π― ΡΠΎΠ·Π΄Π°Π» ΡΠ΅ΡΠΊΡ Ρ ΡΡΠ΅ΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Ρ Π½Π° ΡΡΠΎΠΉ ΡΠ΅ΡΠΊΠ΅ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠ΅ ΡΠ΅ΡΠΊΠΈ.
ΠΠ΄ΠΈΠ½
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
ΠΡΡΡ
. wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠ»ΠΎΠΊ fr
ΠΠΎΡΠΎΠΆΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π»ΡΠ±ΡΡ
Π΅Π΄ΠΈΠ½ΠΈΡ Π΄Π»ΠΈΠ½Ρ. Grid ΡΠ°ΠΊΠΆΠ΅ Π²Π²ΠΎΠ΄ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»ΠΈΠ½Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ΅ΡΠΎΡΠ½ΡΠ΅ ΡΡΠ΅ΠΊΠΈ. ΠΠΎΠ²ΡΠΉ Π±Π»ΠΎΠΊ fr
ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠ°ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π² ΡΠ΅ΡΡΠ°ΡΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎΠΌ.
ΠΠ΄ΠΈΠ½
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
ΠΡΡΡ
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: 1fr 1fr 1fr;
}
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ Π΄ΠΎΡΠΎΠΆΠΊΠΎΠΉ 2fr
, Π·Π°ΡΠ΅ΠΌ Π΄Π²ΡΠΌΡ Π΄ΠΎΡΠΎΠΆΠΊΠ°ΠΌΠΈ 1fr
. ΠΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΎ Π½Π° ΡΠ΅ΡΡΡΠ΅ ΡΠ°ΡΡΠΈ. ΠΠ²Π΅ ΡΠ°ΡΡΠΈ ΠΎΡΠ²Π΅Π΄Π΅Π½Ρ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ ΡΡΠ΅ΠΊΡ ΠΈ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ — ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ Π΄Π²ΡΠΌ ΡΡΠ΅ΠΊΠ°ΠΌ.
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: 2fr 1fr 1fr;
}
Π ΡΡΠΎΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΌΠ΅ΡΠΈΠ²Π°Π΅ΠΌ Π΄ΠΎΡΠΎΠΆΠΊΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ Π΄ΡΠΎΠ±ΠΈ.Π Π°Π·ΠΌΠ΅Ρ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΎΡΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΎΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°. ΠΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π΄Π΅Π»ΠΈΡΡΡ Π½Π° ΡΡΠΈ ΡΠ°ΡΡΠΈ ΠΈ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ Π΄Π²ΡΠΌ Π³ΠΈΠ±ΠΊΠΈΠΌ Π΄ΠΎΡΠΎΠΆΠΊΠ°ΠΌ.
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: 500px 1fr 2fr;
}
Π‘ΠΏΠΈΡΠΊΠΈ ΡΡΠ΅ΠΊΠΎΠ² Ρ Π½ΠΎΡΠ°ΡΠΈΠ΅ΠΉ repeat ()
ΠΠΎΠ»ΡΡΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΡΠ΅ΠΊΠΎΠ² ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΎΡΠ°ΡΠΈΡ repeat ()
Π΄Π»Ρ ΠΏΠΎΠ²ΡΠΎΡΠ° Π²ΡΠ΅Π³ΠΎ ΡΡΠ΅ΠΊΠ° ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΡΠ°ΡΡΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ:
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: 1fr 1fr 1fr;
}
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΠ°ΡΡ ΠΊΠ°ΠΊ:
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ²ΡΠΎΡ (3, 1fr);
}
ΠΠΎΠ²ΡΠΎΡΠ½ΠΎΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΠ°ΡΡΠΈ ΡΡΠ΅ΠΊ-Π»ΠΈΡΡΠ°. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΡΠΎΠ·Π΄Π°Π» ΡΠ΅ΡΠΊΡ Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ 20-ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΡΠΎΠΆΠΊΠΎΠΉ, Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠΌΡΡ ΡΡΠ°ΡΡΠΊΠΎΠΌ ΠΈΠ· 6 1fr
Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ 20-ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΡΠΎΠΆΠΊΠΎΠΉ.
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (6, 1fr) 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Repeat notation Π±Π΅ΡΠ΅Ρ ΡΠΏΠΈΡΠΎΠΊ ΡΡΠ΅ΠΊΠΎΠ² ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΅Π³ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠ΅Π³ΠΎΡΡ ΠΏΠ°ΡΡΠ΅ΡΠ½Π° ΡΡΠ΅ΠΊΠΎΠ².Π ΡΡΠΎΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΠΎΡ ΡΠ΅ΡΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠΎΡΡΠΎΡΡΡ ΠΈΠ· 10 Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ: Π΄ΠΎΡΠΎΠΆΠΊΠΈ 1fr
, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡ Π΄ΠΎΡΠΎΠΆΠΊΠΈ 2fr
. ΠΡΠΎΡ ΡΠ°Π±Π»ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ ΠΏΡΡΡ ΡΠ°Π·.
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ²ΡΠΎΡΠΈΡΡ (5, 1fr 2fr);
}
ΠΠ΅ΡΠ²Π½Π°Ρ ΠΈ ΡΠ²Π½Π°Ρ ΡΠ΅ΡΠΊΠ°
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π½Π°ΡΠ΅ΠΉ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ ΠΌΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ»ΠΈ Π½Π°ΡΠΈ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° grid-template-columns
, Π½ΠΎ ΡΠ΅ΡΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Π»Π° ΡΡΡΠΎΠΊΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ.ΠΡΠΈ ΡΡΡΠΎΠΊΠΈ ΡΠ²Π»ΡΡΡΡΡ ΡΠ°ΡΡΡΡ Π½Π΅ΡΠ²Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΠ²Π½Π°Ρ ΡΠ΅ΡΠΊΠ° ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π»ΡΠ±ΡΡ
ΡΡΡΠΎΠΊ ΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ grid-template-columns
ΠΈΠ»ΠΈ grid-template-rows
.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΡΠΎ-ΡΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ — ΠΈΠ»ΠΈ ΠΈΠ·-Π·Π° ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ ΡΠ΅ΡΠΊΠΈ — ΡΠΎΠ³Π΄Π° ΡΠ΅ΡΠΊΠ° ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΡΡΠΎΠΊΠΈ ΠΈ ΡΡΠΎΠ»Π±ΡΡ Π² Π½Π΅ΡΠ²Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠ΅. Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ Π½ΠΈΡ .
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π°Π±ΠΎΡΠ° Π΄Π»Ρ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ
Π² Π½Π΅ΡΠ²Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠ΅, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² grid-auto-rows
ΠΈ grid-auto-columns
.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ grid-auto-rows
, ΡΡΠΎΠ±Ρ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ Π΄ΠΎΡΠΎΠΆΠΊΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Π² Π½Π΅ΡΠ²Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠ΅, ΠΈΠΌΠ΅ΡΡ Π²ΡΡΠΎΡΡ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ΄ΠΈΠ½
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
ΠΡΡΡ
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ²ΡΠΎΡ (3, 1fr);
ΡΠ΅ΡΠΊΠ°-Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π Π°Π·ΠΌΠ΅Ρ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ ΠΈ minmax
ΠΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠ²Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡΡ ΡΡΡΠΎΠΊ ΠΈΠ»ΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΊΠ°Π·Π°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΈΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΌΠΎΠ³Ρ Π·Π°Ρ ΠΎΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΠΌΠΎΠΈ ΡΡΡΠΎΠΊΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠΆΠΈΠΌΠ°Π»ΠΈΡΡ ΠΌΠ΅Π½ΡΡΠ΅ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π΅ΡΠ»ΠΈ ΠΌΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π²ΡΡΠΎΡΡ, ΡΠΎΠ³Π΄Π° Ρ Ρ ΠΎΡΠ΅Π» Π±Ρ, ΡΡΠΎΠ±Ρ ΡΡΡΠΎΠΊΠ° ΡΠ°ΡΡΡΠ½ΡΠ»Π°ΡΡ Π΄ΠΎ ΡΡΠΎΠΉ Π²ΡΡΠΎΡΡ.
Π£ Grid Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ minmax ()
. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ minmax ()
Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ grid-auto-rows
. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ Π²ΡΡΠΎΡΡ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌ , Π°Π²ΡΠΎ
. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ auto
ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΡΠ΅ΠΉΠΊΠ΅ Π² ΡΡΠΎΠΉ ΡΡΡΠΎΠΊΠ΅.
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ²ΡΠΎΡ (3, 1fr);
grid-auto-rows: minmax (100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π°Π²ΡΠΎ);
}
ΠΠ΄ΠΈΠ½
ΠΠ²Π°
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π΅ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
ΠΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΌΠ΅Π½Ρ Π²ΡΡΠ΅ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
ΠΡΡΡ
Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ΅ΡΠΊΡ, ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΡΠ΅ΡΠΊΠΈ, Π° Π½Π΅ Π»ΠΈΠ½ΠΈΠΈ. ΠΠ°ΡΠ΅ΠΌ ΡΠ΅ΡΠΊΠ° Π΄Π°Π΅Ρ Π½Π°ΠΌ ΠΏΡΠΎΠ½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π Π½Π°ΡΠ΅ΠΉ ΡΠ΅ΡΠΊΠ΅ ΠΈΠ· ΡΡΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈ Π΄Π²ΡΡ ΡΡΡΠΎΠΊ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ΅ΡΡΡΠ΅ ΡΡΡΠΎΠΊΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ².
Π‘ΡΡΠΎΠΊΠΈ Π½ΡΠΌΠ΅ΡΡΡΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ΅ΠΆΠΈΠΌΠΎΠΌ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π ΡΠ·ΡΠΊΠ΅ Ρ ΠΏΠΈΡΡΠΌΠΎΠΌ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ ΡΡΡΠΎΠΊΠ° 1 Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π»Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠ΅ΡΠΊΠΈ. ΠΠ° ΡΠ·ΡΠΊΠ΅ Ρ ΠΏΠΈΡΡΠΌΠΎΠΌ ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠ΅ΡΠΊΠΈ. ΠΠΈΠ½ΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΈΠΌΠ΅Π½Π°, ΠΈ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π°Ρ ΡΡΠΎΠΉ ΡΠ΅ΡΠΈΠΈ.
Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΡΡΡΠΎΠΊΠ°ΠΌ
ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΡΠΎΠΊ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅.Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΡΡΠΎ ΠΏΡΠΎΡΡΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ. ΠΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠ° ΠΌΡ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΡΠ΅ΠΌΡΡ Π½Π° Π»ΠΈΠ½ΠΈΡ, Π° Π½Π΅ Π½Π° Π΄ΠΎΡΠΎΠΆΠΊΡ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΏΠΎΠΌΠ΅ΡΠ°Ρ ΠΏΠ΅ΡΠ²ΡΠ΅ Π΄Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π½Π°ΡΡ ΡΡΠ΅Ρ
ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΡ ΡΠ΅ΡΠΊΡ Π΄ΠΎΡΠΎΠΆΠ΅ΠΊ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ grid-column-start
, grid-column-end
, grid-row-start
ΠΈ grid-row- ΠΊΠΎΠ½Π΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π Π°Π±ΠΎΡΠ°Ρ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ, ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π°ΠΏΡΠΎΡΠΈΠ² ΡΡΡΠΎΠΊΠΈ ΡΡΠΎΠ»Π±ΡΠ° 1 ΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡ Π² ΡΡΡΠΎΠΊΡ ΡΡΠΎΠ»Π±ΡΠ° 4, ΠΊΠΎΡΠΎΡΠ°Ρ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΏΡΠ°Π²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ ΡΠ΅ΡΠΊΠΈ. ΠΠ½ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Π² ΡΡΡΠΎΠΊΠ΅ 1 ΠΈ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ Π² ΡΡΡΠΎΠΊΠ΅ 3, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΡ
Π²Π°ΡΡΠ²Π°Π΅Ρ Π΄Π²Π΅ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΡΡΠ΄Π°.
ΠΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ Π»ΠΈΠ½ΠΈΠΈ 1 ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ ΠΈ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ ΠΎΠ΄Π½Ρ Π΄ΠΎΡΠΎΠΆΠΊΡ. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠ½Π΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΊΠΎΠ½Π΅ΡΠ½ΡΡ ΡΡΡΠΎΠΊΡ. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ Π΄Π²Π΅ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΡΡΡΠΎΠΊΠΈ ΠΎΡ ΡΡΡΠΎΠΊΠΈ ΡΡΡΠΎΠΊΠΈ 3 Π΄ΠΎ ΡΡΡΠΎΠΊΠΈ ΡΡΡΠΎΠΊΠΈ 5. ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡΡΡΡΡ Π² ΠΏΡΡΡΡΡ ΠΌΠ΅ΡΡΠ°Ρ ΡΠ΅ΡΠΊΠΈ.
ΠΠ΄ΠΈΠ½
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
ΠΡΡΡ
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ²ΡΠΎΡ (3, 1fr);
ΡΠ΅ΡΠΊΠ°-Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box1 {
Π½Π°ΡΠ°Π»ΠΎ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 1;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 4;
ΡΠ΅ΡΠΊΠ°-Π½Π°ΡΠ°Π»ΠΎ-ΡΡΡΠΎΠΊΠΈ: 1;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠ΄Π° ΡΠ΅ΡΠΊΠΈ: 3;
}
.box2 {
Π½Π°ΡΠ°Π»ΠΎ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 1;
ΡΠ΅ΡΠΊΠ°-ΡΡΡΠΎΠΊΠ°-Π½Π°ΡΠ°Π»ΠΎ: 3;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠ΄Π° ΡΠ΅ΡΠΊΠΈ: 5;
}
ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Grid Inspector Π² Firefox Developer Tools, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΠΈΠ½ΠΈΠΉ ΡΠ΅ΡΠΊΠΈ.
Π―ΡΠ΅ΠΉΠΊΠ° ΡΠ΅ΡΠΊΠΈ — ΡΡΠΎ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠ°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΡΠ΅ΡΠΊΠΈ.ΠΠΎΠ½ΡΠ΅ΠΏΡΡΠ°Π»ΡΠ½ΠΎ ΡΡΠΎ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΡΠ΅ΠΉΠΊΡ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠ°ΠΊ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ Π² Π½Π°ΡΠΈΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ , ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠΊΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π° ΠΊΠ°ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠ°Ρ, Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ. ΠΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅ Ρ Π²ΡΠ΄Π΅Π»ΠΈΠ» ΠΏΠ΅ΡΠ²ΡΡ ΡΡΠ΅ΠΉΠΊΡ ΡΠ΅ΡΠΊΠΈ.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½Ρ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ΅Π΅ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎ ΡΡΡΠΎΠΊΠ°ΠΌ, ΡΠ°ΠΊ ΠΈ ΠΏΠΎ ΡΡΠΎΠ»Π±ΡΠ°ΠΌ, ΠΈ ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΠ΅ΡΠΊΠΈ . ΠΠ±Π»Π°ΡΡΠΈ ΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠΌΠΈ — Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ L-ΠΎΠ±ΡΠ°Π·Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ. ΠΡΠ΄Π΅Π»Π΅Π½Π½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΠ΅ΡΠΊΠΈ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ Π΄Π²Π΅ ΡΡΡΠΎΠΊΠΈ ΠΈ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΡΠ»ΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ΅ΠΉΠΊΠ°ΠΌΠΈ ΡΠ΅ΡΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΎΠ·Π΄Π°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ² ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»
ΠΈ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»
ΠΈΠ»ΠΈ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ±Π΅Π»
. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΡΠΎΠ·Π΄Π°Ρ 10-ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π°Π·ΠΎΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΠΈ Π·Π°Π·ΠΎΡ 1em
ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ.
. wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ²ΡΠΎΡ (3, 1fr);
ΡΡΠΎΠ»Π±Π΅Ρ-ΠΏΡΠΎΠ±Π΅Π»: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ: 1em;
}
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠΎΠ³Π΄Π° ΡΠ΅ΡΠΊΠ° Π²ΠΏΠ΅ΡΠ²ΡΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, column-gap
, row-gap
ΠΈ gap
ΠΈΠΌΠ΅Π»ΠΈ ΠΏΡΠ΅ΡΠΈΠΊΡ grid-
ΠΊΠ°ΠΊ grid-column-gap
, grid-row- Π·Π°Π·ΠΎΡ
ΠΈ ΡΠ΅ΡΠΊΠ° Π·Π°Π·ΠΎΡ
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
ΠΡΠ°ΡΠ·Π΅ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΏΡΠ΅ΡΠΈΠΊΡΠ°, ΠΎΠ΄Π½Π°ΠΊΠΎ Π²Π΅ΡΡΠΈΠΈ Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ Π±ΡΠ΄ΡΡ ΡΠΎΡ ΡΠ°Π½Π΅Π½Ρ ΠΊΠ°ΠΊ ΠΏΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΡ, ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ ΠΈΡ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΠΌ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ΄ΠΈΠ½
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
ΠΡΡΡ
ΠΡΠ±ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ΅ Π·Π°Π·ΠΎΡΠ°ΠΌΠΈ, Π±ΡΠ΄Π΅Ρ ΡΡΡΠ΅Π½ΠΎ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄ΠΎΡΠΎΠΆΠΊΠ°ΠΌ Π³ΠΈΠ±ΠΊΠΎΠΉ Π΄Π»ΠΈΠ½Ρ ΠΎΡ
, Π° Π·Π°Π·ΠΎΡΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½Π°Ρ Π΄ΠΎΡΠΎΠΆΠΊΠ° ΡΠ΅ΡΠΊΠΈ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΡΠΎ-Π»ΠΈΠ±ΠΎ Π² Π·Π°Π·ΠΎΡΠ΅. Π‘ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°Π·ΡΡΠ² Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΡΠ°Ρ Π»ΠΈΠ½ΠΈΡ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΡΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΡΠ΅ΡΠΊΠΈ. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΡΠ΅ΡΠΊΠ° ΠΈΠ· ΡΡΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΡ Ρ ΡΠΎΠ·Π΄Π°Π» ΡΠ°Π½Π΅Π΅, Ρ Π½Π°ΡΠΈΠΌΠΈ Π΄Π²ΡΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠΎΠ². ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΡΠ²Π»ΡΡΡΡΡ ΠΏΡΡΠΌΡΠΌΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ΅ΡΠΊΠΈ, ΠΎΠ½ΠΈ Π½Π΅ ΡΡΠ°ΡΡΠ²ΡΡΡ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΡΠ΅ΡΠΊΠΈ ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ².
Π°
Π±
c
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
ΠΡΡΡ
ΠΡΠ»ΠΈ Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Ρ box1 Ρ
Π½Π° display: grid
, Ρ ΠΌΠΎΠ³Ρ Π΄Π°ΡΡ Π΅ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ°, ΠΈ ΠΎΠ½ ΡΠΎΠΆΠ΅ ΡΡΠ°Π½Π΅Ρ ΡΠ΅ΡΠΊΠΎΠΉ.ΠΠ°ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π½Π° ΡΡΡ Π½ΠΎΠ²ΡΡ ΡΠ΅ΡΠΊΡ.
.box1 {
Π½Π°ΡΠ°Π»ΠΎ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 1;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 4;
ΡΠ΅ΡΠΊΠ°-Π½Π°ΡΠ°Π»ΠΎ-ΡΡΡΠΎΠΊΠΈ: 1;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠ΄Π° ΡΠ΅ΡΠΊΠΈ: 3;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ²ΡΠΎΡ (3, 1fr);
}
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Π°Ρ ΡΠ΅ΡΠΊΠ° Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ. ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΎΠ½ Π½Π΅ ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π» Π·Π°Π·ΠΎΡ ,
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈ Π»ΠΈΠ½ΠΈΠΈ Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠ΅ Π½Π΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π»ΠΈΠ½ΠΈΡΠΌ Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠ΅.
ΠΠΎΠ΄ΡΠ΅ΡΠΊΠ°
Π ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ΅ΡΠΊΠΈ ΡΡΠΎΠ²Π½Ρ 2 Π΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ subgrid , ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ΅ΡΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΈ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ Π²ΠΊΠ»ΡΡΠ΅Π½Π° Π² Firefox 71, ΠΊΠΎΡΠΎΡΡΠΉ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ, ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡΠΈΠΌ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΡ.
Π ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΌΡ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π΄ΠΎΡΠΎΠΆΠΊΠΈ grid-template-columns: repeat (3, 1fr)
Π½Π° grid-template-columns: subgrid
. ΠΠ°ΡΠ΅ΠΌ Π²Π»ΠΎΠΆΠ΅Π½Π½Π°Ρ ΡΠ΅ΡΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΈ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
.box1 {
Π½Π°ΡΠ°Π»ΠΎ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 1;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 4;
ΡΠ΅ΡΠΊΠ°-Π½Π°ΡΠ°Π»ΠΎ-ΡΡΡΠΎΠΊΠΈ: 1;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠ΄Π° ΡΠ΅ΡΠΊΠΈ: 3;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ°;
}
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½Ρ ΠΈ ΡΡ ΠΆΠ΅ ΡΡΠ΅ΠΉΠΊΡ. ΠΡΠ»ΠΈ ΠΌΡ Π²Π΅ΡΠ½Π΅ΠΌΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ ΠΏΠΎ Π½ΠΎΠΌΠ΅ΡΡ ΡΡΡΠΎΠΊΠΈ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π΄Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π»ΠΈΡΡ.
ΠΠ΄ΠΈΠ½
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
ΠΡΡΡ
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ²ΡΠΎΡ (3, 1fr);
ΡΠ΅ΡΠΊΠ°-Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box1 {
Π½Π°ΡΠ°Π»ΠΎ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 1;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 4;
ΡΠ΅ΡΠΊΠ°-Π½Π°ΡΠ°Π»ΠΎ-ΡΡΡΠΎΠΊΠΈ: 1;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠ΄Π° ΡΠ΅ΡΠΊΠΈ: 3;
}
.box2 {
Π½Π°ΡΠ°Π»ΠΎ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 1;
ΡΠ΅ΡΠΊΠ°-Π½Π°ΡΠ°Π»ΠΎ-ΡΡΡΠΎΠΊΠΈ: 2;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠ΄Π° ΡΠ΅ΡΠΊΠΈ: 4;
}
ΠΠ»Π΅ΠΌΠ΅Π½Ρ box2
ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π΅Ρ box1
, ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ²Π΅ΡΡ
Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅ Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ Π·Π°ΠΊΠ°Π·Π΅.
Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
— ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠ»ΠΈ ΠΌΡ Π΄Π°Π΄ΠΈΠΌ box2
Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΉ z-index
, ΡΠ΅ΠΌ box1
, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ΄ box1
Π² ΡΡΠ΅ΠΊΠ΅.
.wrapper {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ΅ΡΠΊΠ°;
ΡΠ΅ΡΠΊΠ°-ΡΠ°Π±Π»ΠΎΠ½-ΡΡΠΎΠ»Π±ΡΡ: ΠΏΠΎΠ²ΡΠΎΡ (3, 1fr);
ΡΠ΅ΡΠΊΠ°-Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box1 {
Π½Π°ΡΠ°Π»ΠΎ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 1;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 4;
ΡΠ΅ΡΠΊΠ°-Π½Π°ΡΠ°Π»ΠΎ-ΡΡΡΠΎΠΊΠΈ: 1;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠ΄Π° ΡΠ΅ΡΠΊΠΈ: 3;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2;
}
.box2 {
Π½Π°ΡΠ°Π»ΠΎ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ΅ΡΠΊΠΈ: 1;
ΡΠ΅ΡΠΊΠ°-Π½Π°ΡΠ°Π»ΠΎ-ΡΡΡΠΎΠΊΠΈ: 2;
ΠΊΠΎΠ½Π΅Ρ ΡΡΠ΄Π° ΡΠ΅ΡΠΊΠΈ: 4;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1;
}
ΠΠ°ΠΊ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡ Π½Π° Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π²Π΅ΡΡΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS?
<
html
>
<
ΠΠΎΠ»ΠΎΠ²ΠΊΠ°
>
<
ΡΡΠΈΠ»Ρ
>
ΠΊΠΎΡΠΏΡΡ {
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
ΡΠ²Π΅Ρ: Π·Π΅Π»Π΅Π½ΡΠΉ;
}
. GFG {
-webkit-columns: 40px 2;
/ * Chrome, Safari, Opera * /
-moz-columns: 60px 2;
/ * Firefox * /
ΡΡΠΎΠ»Π±ΡΡ: 60 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 2;
}
ΡΡΠΈΠ»Ρ
>
Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
>
<
ΠΊΠΎΡΠΏΡΡ
>
<
h2
>
ΠΠ°ΠΊ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡ Π½Π° Π΄Π΅Π»Π΅Π½ΠΈΠ΅
ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΄Π²Π° ΡΡΠΎΠ»Π±ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS?
h2
>
<
Π΄Π΅Π»
ΠΊΠ»Π°ΡΡ
=
"GFG"
>
<
h3
> ΠΠΎΠ±ΡΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°ΡΡ Π² ΠΌΠΈΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΡΡ
ΡΠ°Π½Π°ΡΠΎΠ² !!
h3
>
Π‘ΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π²Ρ Π±ΡΠ»ΠΈ ΡΠ°Π·ΠΎΡΠ°ΡΠΎΠ²Π°Π½Ρ, ΠΏΠΎΠΊΠ°
ΠΈΡΡ Ρ
ΠΎΡΠΎΡΡΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ
ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ / Π°Π»Π³ΠΎΡΠΈΡΠΌ / Π²ΠΎΠΏΡΠΎΡΡ ΡΠΎΠ±Π΅ΡΠ΅Π΄ΠΎΠ²Π°Π½ΠΈΡ?
Π§ΡΠΎ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ ΠΈ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ?
ΠΡΠΎΡ ΠΏΠΎΡΡΠ°Π» ΡΠΎΠ·Π΄Π°Π½ Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΠ²Π°ΠΆΠΈΠ½Ρ
Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ, Ρ
ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½ΠΎ ΠΈ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΎ
ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ
Π²ΠΎΠΏΡΠΎΡΠΎΠ².
<
p
>
<
strong
> Π Π½Π°ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π²Ρ
ΠΎΠ΄ΡΡ:
strong
>
<
p
>
Π‘Π°Π½Π΄ΠΈΠΏ ΠΠΆΠ°ΠΉΠ½: Π²ΡΠΏΡΡΠΊΠ½ΠΈΠΊ ΠΠΠ’ Π ΡΡΠΊΠΈ
ΠΈ ΠΎΡΠ½ΠΎΠ²Π°ΡΠ΅Π»Ρ GeeksforGeeks.ΠΠ½ Π»ΡΠ±ΠΈΡ
Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅
Π΄Π΅ΠΉΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ. ΠΠΎΠΌΠΈΠΌΠΎ GeeksforGeeks,
ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π» Ρ DE Shaw and Co. ΠΊΠ°ΠΊ
ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ JIIT Noida Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅
Π΄ΠΎΡΠ΅Π½Ρ.
p
>
<
p
>
ΠΠ°ΠΉΠ±Ρ
Π°Π² ΠΠ°Π΄ΠΆΠΏΠ°ΠΉ: ΠΏΠΎΡΠ°ΠΆΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠΌ
Π½Π°ΡΠΊΠ°, ΠΎΠ½ ΡΠ½ΡΡΠ·ΠΈΠ°ΡΡ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ,
Π½ΡΠ°Π²ΠΈΡΡΡ Π±ΡΡΡ ΡΠ°ΡΡΡΡ ΡΠ°Π·Π²ΠΈΡΠΈΡ. ΠΡ
Ρ ΡΠ°Π±ΠΎΡΡ, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π΅Π³ΠΎ Π²Π»ΡΠ±Π»Π΅Π½Π½ΡΠΌ
ΡΠΈΠ»ΡΠΌΡ, Π΅Π΄Π° ΠΈ Π΄ΡΡΠ·ΡΡ.
p
>
<
p
>
Π¨ΠΈΡ
Π°Ρ ΠΠΎΡΠ»Ρ: Π²ΡΠΏΡΡΠΊΠ½ΠΈΠΊ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΊΠΈ
ΠΊΡΠΎ Π»ΡΠ±ΠΈΡ Π²ΡΠ΅ ΡΠΏΡΠΎΡΠ°ΡΡ.ΠΠΎΠ³Π΄Π° ΠΎΠ½
Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π΅Π³ΠΎ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅,
ΠΎΠ±ΡΡΠ°ΡΡΠΈΠ΅ ΡΠ°ΠΊΡΡ, Ρ
ΠΈΡΡΠΎΡΡΠΈ ΠΈ Π»Π°ΠΉΡΡ
Π°ΠΊΠΈ.
Π ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ Π»ΡΠ±ΠΈΡ ΡΠΈΠ»ΡΠΌΡ.
p
>
<
p
>
ΠΡ
Π°ΡΠΌΠ΅Ρ Π‘ΠΈΠ½Π³Ρ
: ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ
Π²ΡΠ΅Π³Π΄Π° ΠΏΡΡΠ°Π΅ΡΡΡ ΡΠ°Π·Π΄Π²ΠΈΠ½ΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΏΠΎΠΈΡΠΊΠ°
Π²Π΅Π»ΠΈΠΊΠΈΡ
ΠΏΡΠΎΡΡΠ²ΠΎΠ². ΠΠ½Π΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΌΠ΅ΡΡΠ°,
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ, ΠΊΠ°ΠΊ ΠΎΠ½ ΠΏΠΎΠ΄Π±Π°Π΄ΡΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΈΡ
ΠΏΡΠΈΡΡΠ΅Π»Π΅ΠΉ
ΠΈ ΡΠ°Π΄ΠΎΠ²Π°ΡΡΡΡ ΠΆΠΈΠ·Π½ΠΈ.
p
>
<
p
>
Π¨ΡΠ±Ρ
Π°ΠΌ ΠΠ°ΡΠ°Π½Π²Π°Π»: ΡΡΡΠ°ΡΡΠ½ΡΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ
ΠΊΡΠΎ Π²ΡΠ΅Π³Π΄Π° ΠΏΡΡΠ°Π΅ΡΡΡ ΠΎΡΠ²Π°ΠΈΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ
ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅.Π ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠΈΡΠ°Π΅Ρ
Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°ΡΡΠΈ ΠΈΠ»ΠΈ ΠΈΠ·ΡΡΠ°Π΅Ρ Π΄ΡΡΠ³ΠΈΠ΅ Π²Π΅ΡΠΈ.
p
>
Π΄Π΅Π».
>
ΠΊΠΎΡΠΏΡΡ
>
html
>
ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ CSS | Comm244 Notes
ΠΠ΅ΡΠΎΠ΄Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ CSS | Comm244 ΠΠ°ΠΌΠ΅ΡΠΊΠΈΠΠ΅ΡΠ½ΡΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ 7 Π½Π΅Π΄Π΅Π»ΠΈ Β»
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² Π²Π°ΡΠ΅ΠΌ CSS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ. ΠΠ°Π»Π΅Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ barebone.
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΎΠΊΠΎΠ½ΡΡΠ»ΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Ρ Π½ΠΈΠΌΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Π½Π°Π΄ ΡΠΈΠ½Π°Π»ΡΠ½ΡΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ.
ΠΠ΅ΠΌΠΎ-ΡΡΡΠ»ΠΊΠΈ
ΠΠ°ΠΊΠ΅ΡΡ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ
ΠΠ²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ Π΄Π»Ρ Π±Π°Π·ΠΎΠ²ΡΡ ΡΠ°ΠΉΡΠΎΠ². ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΎΠ½ΠΈ ΡΠΎΡΡΠΎΡΡ ΠΈΠ· Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°, Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π° ΠΈ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ΄ΠΈΠ½ ΡΡΠΎΠ»Π±Π΅Ρ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ, Π° Π΄ΡΡΠ³ΠΎΠΉ - Π΄Π»Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ΄ CSS Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈΠ· Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Ρ CSS ΡΠ»Π΅Π²Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
.container {
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
ΡΠΈΡΠΈΠ½Π°: 90%;
}
header {
ΡΠΈΡΠΈΠ½Π°: 100%;
}
nav li {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ;
}
.ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ {
float: right;
ΡΠΈΡΠΈΠ½Π°: 60%;
}
Π² ΡΡΠΎΡΠΎΠ½Π΅ {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 40%;
}
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
ΡΠΈΡΠΈΠ½Π°: 100%;
}
ΠΠΎΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΡΡΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°:
- ΠΠ΅ΡΡ Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 100%, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ.
- Π¨ΠΈΡΠΈΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π·Π°Π΄Π°Π½Π°. ΠΡΠΎΠ³ΠΎ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 100%.
- ΠΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ, Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ - Π²ΠΏΡΠ°Π²ΠΎ.
- ΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Π½Π°ΡΡΡΠΎΠ΅Π½ Π½Π° ΠΎΡΠΈΡΡΠΊΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΎΠ±Π΅ΠΈΡ ΡΡΠΎΡΠΎΠ½, ΡΠ°ΠΊ ΡΡΠΎ ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Ρ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ
ΠΠ²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ ΡΠ»Π΅Π²Π°
ΠΠ²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ ΡΠΏΡΠ°Π²Π°
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ ΡΠ°Π·Π½ΠΈΡΠ° Π·Π΄Π΅ΡΡ - Π² ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠΎΡΠΊΠ°Ρ Π² CSS.ΠΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ, Π° Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ - Π²ΠΏΡΠ°Π²ΠΎ.
Π’ΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ
Π’ΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ.
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΊΠΎΠ΄ CSS Π΄Π»Ρ ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°.
.container {
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
ΡΠΈΡΠΈΠ½Π°: 90%;
}
header {
ΡΠΈΡΠΈΠ½Π°: 100%;
}
nav li {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ;
}
.ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 60%;
}
. aside-left {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 20%;
}
.aside-right {
float: right;
ΡΠΈΡΠΈΠ½Π°: 20%;
}
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
ΡΠΈΡΠΈΠ½Π°: 100%;
}
ΠΠ΅ΠΌΠΎ-Π²Π΅ΡΡΠΈΡ Ρ 3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ
Π’ΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ ΡΠΏΡΠ°Π²Π° ΠΈ ΡΠ»Π΅Π²Π°
Π’ΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½Π½Π°Ρ Π½Π΅ΡΠ±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΡ Π΅ΠΌΠ°
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π±ΠΎΠΊΠΎΠ²ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΠΈΡΡ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΡΡΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠ±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΡΡΠΈ.
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΊΠΎΠ΄ CSS Π΄Π»Ρ Π½Π΅ΡΠ±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈΠ· 3 ΡΡΠΎΠ»Π±ΡΠΎΠ².
.container {
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
ΡΠΈΡΠΈΠ½Π°: 90%;
}
header {
ΡΠΈΡΠΈΠ½Π°: 100%;
}
nav li {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ;
}
.ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 60%;
}
aside-one {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 20%;
}
aside-two {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 20%;
}
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
ΡΠΈΡΠΈΠ½Π°: 100%;
}
ΠΠ΅ΠΌΠΎ-Π²Π΅ΡΡΠΈΡ Ρ 3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ
Π’ΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ ΡΠΏΡΠ°Π²Π° ΠΈ ΡΠ»Π΅Π²Π°
ΠΠ²ΡΡ ΠΊΠΎΠ»ΠΎΠ½Π½ΡΠΉ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ
ΠΠ° Π½Π΅ΠΈΠΌΠ΅Π½ΠΈΠ΅ΠΌ Π»ΡΡΡΠ΅Π³ΠΎ ΡΠ΅ΡΠΌΠΈΠ½Π° Ρ Π½Π°Π·ΡΠ²Π°Ρ ΡΡΠΎΡ ΡΠΈΠΏ ΠΌΠ°ΠΊΠ΅ΡΠ° Β«ΡΠ°ΡΡΡΠ½ΡΡΡΠΌΒ». Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΡΠΎΡ ΡΠΈΠΏ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ, Π½ΠΎ ΡΠΎΠ½ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π° ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΊΠΎΠ΄ CSS Π΄Π»Ρ ΡΠ°ΡΡΡΠ½ΡΡΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈΠ· 2 ΡΡΠΎΠ»Π±ΡΠΎΠ².
.centerLayout {
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
ΡΠΈΡΠΈΠ½Π°: 90%;
}
nav li {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
}
.ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 60%;
}
Π² ΡΡΠΎΡΠΎΠ½Π΅ {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 40%;
}
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
}
ΠΠΎΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΡΡΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°:
- Π Π°Π½ΡΡΠ΅ ΠΌΡ Π²ΡΠ΅ ΠΎΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΠΈ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π»ΠΈ ΡΡΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ.
- ΠΠ° ΡΡΠΎΡ ΡΠ°Π· ΠΌΡ ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ», Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ») ΡΠ½Π°ΡΡΠΆΠΈ ΠΈ Π½Π΅ ΠΎΠ±ΡΡΠ²Π»ΡΠ΅ΠΌ ΠΈΡ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΡΡΡΠ°Π½ΠΈΡΡ.
- Π‘ΡΠ°Π·Ρ ΠΆΠ΅ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΡΡΠΈΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ div ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π½ΠΎΠ²ΡΠΉ div Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ centerLayout.
- ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°ΡΡΠ΅ΠΉ ΠΎΠ±ΡΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΡ Π² 2 ΠΊΠΎΠ»ΠΎΠ½Π½Ρ
ΠΠ΅ΡΠ½ΡΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ 7 Π½Π΅Π΄Π΅Π»ΠΈ Β»
CSS Grid + CSS Multi-Columns = β₯.Π ΡΡΠΎΠΉ ΠΊΠΎΡΠΎΡΠΊΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΈΡΡΠ»Π΅Π΄ΡΡβ¦ | ΠΠ°ΡΡΠΈΠΊ ΠΡΠΎΡΠ΅Ρ
Π ΡΡΠΎΠΉ ΠΊΠΎΡΠΎΡΠΊΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΈΡΡΠ»Π΅Π΄ΡΡ Π²Π·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° CSS: CSS Grid ΠΈ CSS Multi-Columns.
ΠΡΠΈ Π΄Π²Π΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΈΠ· ΡΡΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ.
CSS columns
CSS ΡΠΆΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΈΠΌΠ΅Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² ΡΡΠΎΠ»Π±ΡΡ, ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠ° ΠΏΠΎΠ²ΡΠ΅ΠΌΠ΅ΡΡΠ½ΠΎ (ΠΊΡΠΎΠΌΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΡ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠΎΠ²).
ΠΡΠ½ΠΎΠ²Π½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² CSS ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π΄Π»ΠΈΠ½Π½ΡΡ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² ΡΠ΅ΠΊΡΡΠ° Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΡΡΠΎΠ±Ρ ΡΡΡΠΎΠΊΠΈ Π½Π΅ Π±ΡΠ»ΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π»ΠΈΠ½Π½ΡΠΌΠΈ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠ»ΠΎΡ ΠΎ ΡΠΈΡΠ°Π΅ΠΌΡΠΌΠΈ.
Π‘Π°ΠΌΠΎΠ΅ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π² ΡΡΠΎΠ»Π±ΡΠ°Ρ CSS ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠΎΠ»Π±ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. ΠΠΎΠ½ΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ° Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΡΠΈΡΠΈΠ½Ρ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS column-width: 150px; , ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ:
ΠΠ»ΠΈΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ, ΠΏΡΠΎΡ ΠΎΠ΄ΡΡΠΈΠΉ ΡΠ΅ΡΠ΅Π· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ²CSS Grids
CSS Grids - ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ°Ρ Π½ΠΎΠ²Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² CSS, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π΅Π±-Π°Π²ΡΠΎΡΠ°ΠΌ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² 2D ΡΠ΅ΡΠΊΠ° ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ.
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠ»ΡΡΠ°Π»ΠΈ ΠΎΠ± ΡΡΠΎΠΌ Π² ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ Π³ΠΎΠ΄Π°, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π²Ρ ΠΆΠΈΠ»ΠΈ ΠΏΠΎΠ΄ ΡΠΊΠ°Π»ΠΎΠΉ. ΠΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠ°ΡΠ΅ΠΉ, Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π²ΡΡΡΡΠΏΠ»Π΅Π½ΠΈΠΉ Π±ΡΠ»ΠΎ ΡΠ΅Π½ΠΎΠΌΠ΅Π½Π°Π»ΡΠ½ΡΠΌ, ΠΈ Π΅Π³ΠΎ Π±ΡΠ»ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ΄Π½ΠΎ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ.
ΠΠΎΡΠ΅ΡΠΈΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΠΆΠ΅Π½ Π‘ΠΈΠΌΠΌΠΎΠ½Ρ, Π²Π΅Π±-ΡΠ°ΠΉΡ Π ΡΠΉΡΠ΅Π» ΠΠ½Π΄ΡΡ ΠΈΠ»ΠΈ Mozilla Grid Playground, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π²ΡΠ΅ ΠΎ Π³ΡΠΈΠ΄Π°Ρ .
Π‘ΡΠΎΠ»Π±ΡΡ + ΡΠ΅ΡΠΊΠΈ = β₯
ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΠ΅ΡΠΊΠΈ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΡΠ΄ ΠΌΠ΅ΡΠΎΠΊ ΠΈ ΠΈΡ ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π° ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ Π² 2 ΡΡΠΎΠ»Π±ΡΠ°:
...
CSS Π²ΡΡΠ΅ ΡΠΎΠ·Π΄Π°Π΅Ρ 2 ΡΡΠΎΠ»Π±ΡΠ° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΠ΅ΡΠ΅Π· ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:
Simple CSS-ΡΠ΅ΡΠΊΠ° Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈΠ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°ΠΌΠΎΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅: Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ΅ΡΠΊΡ Π² Π²ΠΈΠ΄Π΅ ΡΡΠΎΠ»Π±ΡΠΎΠ²! Π ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π·Π΄ΠΎΡΠΎΠ²ΠΎ.
ΠΠΎ ΡΡΡΠΈ, ΡΠ΅ΡΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ΅ΡΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ Π² ΠΌΠ°ΠΊΠ΅Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ. ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½, ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΠΎΠ»Π±Π΅Ρ. ΠΡΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ - Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΠ°ΡΡΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ.
ΠΡΠ°ΠΊ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠΎΡΠΌΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅ΡΠΊΠΈ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ Π΅Π³ΠΎ Π² ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ column-width: 150px :
CSS Grid, ΡΠ°Π·Π±ΠΈΡΡΠΉ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ²ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ , ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ, ΡΠ΅ΡΠΊΠ° ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΈΡΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°Π½ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ.
ΠΠΎΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π²Π΅ΡΡ ΠΊΠΎΠ΄:
...
ΠΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² ΡΡΠΎΠ³ΠΎ - Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠ΅, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠ΅ΡΠΊΠ° ΡΠ°Π·Π±ΠΈΡΠ° Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ². Π’Π°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ Π²ΠΎ Π²ΡΠ΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°Ρ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ.
Π€ΡΠ°Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΎΠΆΠ΅
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΡΡΡΠΏΡ ΠΊ ΡΠ°ΠΌΠΎΠΉ ΡΠ΅ΡΠΊΠ΅, ΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ:
ΠΠ±ΡΠ΅Π·Π°Π½Π½ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΡΡΡΠΏΡΠΠ΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΡΠΊΠΈ - ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π½ΡΠΉ ΠΊ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, Π½ΠΎ Ρ Π½Π΅Π³ΠΎ Π²ΡΠ΅ Π΅ΡΠ΅ Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π° Π²Π΅ΡΡ Π½ΡΡ ΠΈ ΠΎΠ΄Π½Π° Π½ΠΈΠΆΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ.