Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π‘Π΅Ρ‚ΠΊΠΈ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° / Π₯Π°Π±Ρ€

ΠœΡ‹ собрали Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ частыС Ρ‚Π΅ΠΌΡ‹, связанныС с сСткой Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Β«ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ Ρ€Π΅Π·ΠΊΠΎΡΡ‚ΡŒΒ» Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° ΠΊΠ°ΠΊ Ρ‚Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΈ ΡΠΈΡΡ‚Π΅ΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ практичСскиС знания: ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ сСтку Π² Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, ΠΏΠΎ ΠΊΠ°ΠΊΠΈΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ расчСт, ΠΊΠ°ΠΊΠΈΠ΅ особСнности Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ срСды ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ Π½Π° ΠΊΠ°ΠΊΠΈΠ΅ Π΄Π΅Ρ‚Π°Π»ΠΈ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

Π—Π°Π΄Π°Ρ‡Π° сСтки Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ эстСтику, Π½ΠΎ ΠΈ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ процСссом Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Π΄Π΅Π»Π°Ρ‚ΡŒ сам процСсс Π³ΠΈΠ±ΠΊΠΈΠΌ ΠΊΠ°ΠΊ для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° ΠΈ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. Π‘Π΅Ρ‚ΠΊΠ° β€” это ΠΊΠ°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ€ΡŽΠΊΠ·Π°ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ смог ΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ с удобством ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ΠΌ вашСго видСния ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ сСтку, Π½ΡƒΠΆΠ½ΠΎ Β«ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡Π΅ ΠΏΠΎΠ»Π΅Β» β€” ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ страницы, Π½Π°ΠΉΡ‚ΠΈ ограничСния ΠΈ критичСскиС области, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ проявят сСбя Π½Π° этапС Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ проСктирования. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ свСсти абстрактноС ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ цСлям.

ПослС этого ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊ настройкС Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ сСтки Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅. Для этого Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ структуру ΠΈΠ· Ρ‚Ρ€Π΅Ρ… Ρ‚ΠΈΠΏΠΎΠ² сСток β€” Π±Π°Π·ΠΎΠ²ΠΎΠΉ, ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ ΠΈ дизайнСрской.

Базовая сСтка

Базовая сСтка Π±Π»ΠΈΠ·ΠΊΠ° ΠΏΠΎ свойствам ΠΈ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ ΠΊ ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅Ρ‚Ρ€ΠΎΠ²ΠΎΠΉ Π±ΡƒΠΌΠ°Π³Π΅. Она Π½ΡƒΠΆΠ½Π° для создания ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ срСды, которая ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒ ΠΌΠ΅Π»ΠΊΠΈΠ΅ Π΄Π΅Ρ‚Π°Π»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π΅ Π·Π°Π΄ΡƒΠΌΡ‹Π²Π°ΡΡΡŒ ΠΈ Π½Π΅ бСспокоясь ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС расстояния ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами Π±Ρ‹Π»ΠΈ Ρ€Π°Π²Π½Ρ‹, Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹.

Π¨Π°Π³ сСтки зависит ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΡ… Π°Ρ‚ΠΎΠΌΠ°Ρ€Π½Ρ‹Ρ… Π½Π΅Π΄Π΅Π»ΠΈΠΌΡ‹Ρ… частиц, ΠΊΠ°ΠΊ Ρ€Π°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠ°, чСкбокс, Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ высота строки, минимальноС расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠ΅ΠΆΠ΄Ρƒ фотографиями Π² Π³Π°Π»Π΅Ρ€Π΅Π΅ ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ².

Базовая сСтка Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒΡΡ с ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ. Π”Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹Π΅ настройки Photoshop ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ сСтку с шагом Π² 10 px, Ρ‡Ρ‚ΠΎ соотвСтствуСт ΡΠΌΠ΅Ρ‰Π΅Π½ΠΈΡŽ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΏΠΎ горячСй клавишС shift, Π½ΠΎ Π½Π΅ соотвСтствуСт Π½ΠΈ кСглю ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π½ΠΈ Π»ΠΎΠ³ΠΈΠΊΠ΅ построСния ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ отступов. 10 px β€” Ρ†Π΅Π»ΠΎΠ΅ число, Π½ΠΎ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ.

Π’ настройках сСток для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ шагом ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ 4 ΠΈΠ»ΠΈ 8 px. Π—Π΄Π΅ΡΡŒ ΠΆΠ΅ шаг сСтки Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€ΠΎΠ²Π½ΠΎ ΡƒΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π² высоту строки основного тСкста ΠΈ Π½Π΅ Π±Ρ‹Ρ‚ΡŒ слишком ΠΌΠ΅Π»ΠΊΠΈΠΌ.

ΠšΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Π°Ρ сСтка

Для Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΎΠ², сайтов с ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π½ΠΎΠΉ структурой, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΈ Π³Π°Π»Π΅Ρ€Π΅ΠΉ рСзиновая адаптация Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ. Для ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… Π°Π³Ρ€Π΅Π³Π°Ρ‚ΠΎΡ€ΠΎΠ² ΠΈ классифайдов с большим количСством Ρ„ΠΎΡ€ΠΌ, ΠΏΠΎΠ»Π΅ΠΉ Π²Π²ΠΎΠ΄Π° ΠΈ ΠΌΠ΅Π»ΠΊΠΈΡ… ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΎΠ² Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ создаСт трудности. Оно тяТСло поддаСтся ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŽ ΠΈ часто Π΄Π΅Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ элСмСнты, Ρ€Π°Π·Ρ€ΡƒΡˆΠ°Π΅Ρ‚ структуру: Ρ‚Π΅Ρ€ΡΡŽΡ‚ΡΡ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ°), элСмСнты ΡΠΏΠΎΠ»Π·Π°ΡŽΡ‚ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку, Ρ†Π΅Π»ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ тСкстовых Π±Π»ΠΎΠΊΠΎΠ² Ρ€Π°Π·Ρ€ΡƒΡˆΠ°Π΅Ρ‚ΡΡ, Ρ„ΠΎΡ€ΠΌΡ‹ становятся Ρ‡Ρ€Π΅Π·ΠΌΠ΅Ρ€Π½ΠΎ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌΠΈ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Ρ‹Π½ΡƒΠΆΠ΄Π΅Π½ слишком Π΄ΠΎΠ»Π³ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ страницу.

Π’ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ структуру ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ΄Π°Ρ‡ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ для всСх Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ, поэтому ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ слСдуСт Π΄Π΅Π»Π°Ρ‚ΡŒ для всСх ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ. ΠŸΡ€ΠΈ этом ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ сСтки ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ статичными ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ увСличСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана, Π° элСмСнты ΠΌΠ΅Π½ΡΡŽΡ‚ своС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ΄Ρ‡ΠΈΠ½ΡΡΡΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΌΡƒ Ρ€ΠΈΡ‚ΠΌΡƒ ΠΈ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°,

breakpoints. Π—Π° Ρ‚Π°ΠΊΠΎΠ²Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ 640, 768, 960, 1024, 1280 ΠΈ 1440. И для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ экрана соотвСтствСнно Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π½ΠΎΠ΅ количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

Бколько ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ для сСтки?
ΠšΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Π°Ρ сСтка ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ, ΠΈ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π°ΠΊΠΎΠ²ΠΎΠΉ Π²ΠΎΠ·Π½ΠΈΠΊ, Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ отступа, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π»Π΅Π³ΠΊΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ². Π­Ρ‚ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π² ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ помСщаСтся нСсколько ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 3-4. ΠžΡ‚ΡΡ‚ΡƒΠΏ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС, это Π²ΠΎΠ·Π΄ΡƒΡˆΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π½Π΅ слСдуСт Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ элСмСнты. Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ Π² Ρ‚ΠΎΠΌ смыслС, Ρ‡Ρ‚ΠΎ

отступ β€” это Π½Π΅ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π°Ρ, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ элСмСнты.

БоотвСтствСнно, ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ количСства ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π² ΡƒΠΌΠ΅, сколько ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° страницС. НапримСр, Π±ΡƒΠ΄Π΅Ρ‚ галСрСя ΠΈΠ· ΡˆΠ΅ΡΡ‚ΠΈ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ с тСкстовыми описаниями, Π΄Π²Π° ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ Ρ‚Ρ€ΠΈ Π°Π±Π·Π°Ρ†Π° тСкста. Π’ΠΎΠ³Π΄Π° число ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΊΡ€Π°Ρ‚Π½ΠΎ 2, 3 ΠΈ 6. ΠŸΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ число 12. Π”Π΅Π»Π΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области Π² 960 px Π½Π° 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ отступов Π² 10, 12, 16, 15 ΠΈ 20 px даст ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² 60, 64, 65, 68, 70 px.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ получится нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² сСтки, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ сСтка Π² 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² 64 px ΠΈ отступом Π² 16 px.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ число Π² 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΠΎ? ВсС соврСмСнныС ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… начиная, ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ, с 1024Γ—768. Π Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ области 960 px Π½Π° 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Π±ΠΎΠ»Π΅Π΅ всСго, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ дСлится Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ отступы, ΠΊΡ€Π°Ρ‚Π½Ρ‹Π΅ 2. Π˜ΡΡ…ΠΎΠ΄Ρ ΠΈΠ· этого ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ число ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ для Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ β€” 10 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для 768 px, 16 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для 1280 px ΠΈ 20 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для 1440 px ΠΈ Π±ΠΎΠ»Π΅Π΅. По сути ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΏΡ€ΠΈΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π»ΠΈΠ±ΠΎ ΡƒΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

Если ΠΆΠ΅ ΠΎΡ‚Ρ‚Π°Π»ΠΊΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтку ΠΏΠΎΠ΄ Π±Π°Π½Π½Π΅Ρ€Π½ΡƒΡŽ Ρ€Π΅ΠΊΠ»Π°ΠΌΡƒ, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ отступа ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, исходя ΠΈΠ· дСлСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π±Π°Π½Π½Π΅Ρ€Π° Π² 300 ΠΈ 240 px. Из всСх Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² дСлСния подходящими (ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌΠΈ) Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ Π±ΡƒΠ΄ΡƒΡ‚ 10, 12, 15, 20. БаннСрная Ρ€Π΅ΠΊΠ»Π°ΠΌΠ°, ΠΊΠ°ΠΊ таковая, ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Ρ‡Π΅Ρ€Π΅Π· Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ сайтов, ΠΏΠΎΡ‡Ρ‚ΠΈ ΠΊΠ°ΠΊ полоса общСствСнного транспорта, ΠΈ ΠΌΡ‹ ΠΌΠ°Π»ΠΎ ΠΌΠΎΠΆΠ΅ΠΌ Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° Π½Π΅Π΅. Но ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΈ Π΄ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Ρ…ΠΎΠ΄ Π±Π°Π½Π½Π΅Ρ€Π° Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Π½ΠΎ Ρ‚ΠΎΠ³Π΄Π° сама сСтка Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒΡΡ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… модулях (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°Ρ… Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ-Ρ€ΠΎΠ»ΠΈΠΊΠΎΠ²).

Π’ этом случаС слСдуСт Π½Π° этапС Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π»Π΅ΠΉΠ°ΡƒΡ‚Π° ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ Π³Π΄Π΅ Π½Π° страницС Π±ΡƒΠ΄Π΅Ρ‚ фиксированноС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π°Π½Π½Π΅Ρ€ΠΎΠ², ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°Ρ‚ΡŒ эти Π±Π°Π½Π½Π΅Ρ€Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вмСстС ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ, ΠΏΠΎΠ΄Ρ‡ΠΈΠ½ΡΡŽΡ‰ΠΈΠΉΡΡ сСткС.

ДизайнСрская сСтка

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π»Π΅ΠΉΠ°ΡƒΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π°Π½Π½Π΅Ρ€Π½ΡƒΡŽ Ρ€Π΅ΠΊΠ»Π°ΠΌΡƒ, Π½ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π·Π½Π°Ρ‡ΠΈΠΌΡ‹Π΅ элСмСнты ΠΈ Ρ‚ΠΈΠΏΡ‹ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°: Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ постСры Ρ„ΠΈΠ»ΡŒΠΌΠΎΠ², ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Π΅ ΠΌΡƒΠ·Ρ‹ΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ, ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Π²ΠΈΠ΄Π΅ΠΎ, ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΏΠΎ Π΄Π΅ΡΡΡ‚ΡŒ ΡˆΡ‚ΡƒΠΊ Π² ΠΎΠ΄Π½ΠΎΠΌ ряду ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π›Π΅ΠΉΠ°ΡƒΡ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΈΠ· Π΄Π²ΡƒΡ… ΡƒΠ·ΠΊΠΈΡ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ ΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΎΠΊΠΎΠΉ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. ΠœΠΎΠΆΠ΅Ρ‚ ΠΈΠ· ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌΠΈ отступами, Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π΄Π°ΠΆΠ΅ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Β«ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ…Β» ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ (ΠΊΠΎΠ³Π΄Π° Π΄Π²Π΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡΡ‚ΡŒ), Π½ΠΎ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это ΡΡ‚Π°Π½ΠΎΠ²ΠΈΠ»ΠΎΡΡŒ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ Π·Π° счСт повторСния ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΈ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ «мСньшСго Π² большСС».

НСбольшая Ρ†ΠΈΡ‚Π°Ρ‚Π° ΠΈΠ· совСт ΠΎ якорных ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°Ρ… АртСма Π“ΠΎΡ€Π±ΡƒΠ½ΠΎΠ²Π°

ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ β€” базовая Ρ„ΠΈΠ³ΡƒΡ€Π° ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ вёрстки
Π₯ΠΎΡ€ΠΎΡˆΠ°Ρ крСпкая сСтка строится Π½Π° ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Ρ… модулях. ΠšΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡ ΡƒΠ΄Π°Π»Π°ΡΡŒ, Ссли всё, Ρ‡Ρ‚ΠΎ Π²Ρ‹ нарисовали, ΠΌΠΎΠΆΠ½ΠΎ обвСсти ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°ΠΌΠΈ, ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π½Π° страницС, Π½Π΅ налСзая Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π° ΠΈ ΠΏΠΎΠ΄Ρ‡ΠΈΠ½ΡΡΡΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ€ΠΈΡ‚ΠΌΡƒ.

Π§Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ это Π·Π½Π°Ρ‡ΠΈΡ‚ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅? ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΠ· физичСского ΠΌΠΈΡ€Π° β€” ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка Π² стСнС с отвСрстиями Kerf Wall, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ящики ΠΈ ΠΏΠΎΠ»ΠΊΠΈ Π² любом порядкС. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π°ΠΆΠ΅ Π²Π΅Π»ΠΈΠΊ ΠΏΠΎΠ²Π΅ΡΠΈΡ‚ΡŒ Π½Π° Ρ‚Π°ΠΊΡƒΡŽ стСну β€” Π³Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π½Π΅ мСшали Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ, ΠΈΠ½Π°Ρ‡Π΅ ΠΎΠ½ΠΈ свалятся. Π’ΠΎΠΆΠ΅ самоС ΠΈ с ΠΊΡ€Π΅ΠΏΠΊΠΎΠΉ сСткой.

ΠžΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎ Π‘Π΅Ρ‚ΠΊΠ΅ Π±Π°Π·ΠΎΠ²Ρ‹Ρ… Π»ΠΈΠ½ΠΈΠΉ (baselinegrid)

Π˜ΡΡ‚ΠΎΡ€ΠΈΡ‡Π΅ΡΠΊΠΈ с понятиСм Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€ΠΈΡ‚ΠΌΠ° Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π·Π½Π°ΠΊΠΎΠΌΡ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ InDesign. Π’ настройках ΠΎΠ½ΠΈ ΠΌΠΎΠ³Π»ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ высоту строки для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ сСтки ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΠΎ Π½Π΅ΠΉ. Но для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ β€” это «оптичСскоС понятиС», для расчСта ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅Ρ‚ Ρ‚ΠΎΡ‡Π½Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ создаСтся ΠΎΠ½ ΠΊΡ€ΠΎΠΏΠΎΡ‚Π»ΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ тСкстового Π±Π»ΠΎΠΊΠ°, строк ΠΈ отступов. Π’ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ всС эти тонкости Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ тяТСло.
НС достаточно просто ΠΏΠΎΠ΄Ρ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ всСх ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΏΠΎΠ΄ ΠΎΠ΄Π½Ρƒ высоту строки β€” это ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π² ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… Π°Π±Π·Π°Ρ†Π°Ρ… строки слипнутся, Π° Π² ΠΌΠ΅Π»ΠΊΠΈΡ… β€” Ρ€Π°Π·ΡŠΠ΅Π΄ΡƒΡ‚ΡΡ.

Для создания Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€ΠΈΡ‚ΠΌΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ оптичСски ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΡƒΡŽ высоту строки Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ всСх тСкстов, ΠΊΡ€Π°Ρ‚Π½Ρ‹ΠΉ этой высотС. ВСкст, ΠΏΠΎΠ΄Ρ‡ΠΈΠ½Π΅Π½Π½Ρ‹ΠΉ Ρ‚Π°ΠΊΠΎΠΌΡƒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ€ΠΈΡ‚ΠΌΡƒ, Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядит Π½Π° страницС с ΠΎΠ΄Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ΠΉ, Π³Π΄Π΅ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΎΠ·Π΄ΡƒΡ…Π° ΠΈ Π½Π΅ Ρ‚Π°ΠΊ сильно Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ слипшиСся тСкстовыС строки большСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€ΠΈΡ‚ΠΌΠ° Π½Π° WebTuts+:

Наоборот, Π½Π΅ Π»ΡƒΡ‡ΡˆΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ получится ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ ΠΊΠΎ всСм тСкстам Π½Π° страницС, ΠΊΠΎΠ³Π΄Π° тСкстов Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΌΠ½ΠΎΠ³ΠΎ. Π₯Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ β€” инструмСнт ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€ΠΈΡ‚ΠΌΠ°.

Π’ совСтС ΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с мСТстрочным расстояниСм Π² Π±Π»ΠΎΠΊΠ°Ρ… с Ρ€Π°Π·Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ тСкста АртСм Π“ΠΎΡ€Π±ΡƒΠ½ΠΎΠ² Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ сСтка Π±Π°Π·ΠΎΠ²Ρ‹Ρ… Π»ΠΈΠ½ΠΈΠΉ скорСС Π²Ρ€Π΅Π΄Π½Π°, ΠΈ Ρ‡Ρ‚ΠΎ высоту строки тСкста ΠΈ отступов Π»ΡƒΡ‡ΡˆΠ΅ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. Π˜Π½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ тСкста слСдуСт ΠΏΠΎΠ΄Π±ΠΈΡ€Π°Ρ‚ΡŒ Π² зависимости ΠΎΡ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° (модуля, плашки, тСкстового Π±Π»ΠΎΠΊΠ°). Если строки Π² тСкстовом Π±Π»ΠΎΠΊΠ΅ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅, Ρ‚ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ мСньшС. Если тСкстовый Π±Π»ΠΎΠΊ достаточно ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ ΠΈ строки Π² Π½Π΅ΠΌ Π΄Π»ΠΈΠ½Π½Ρ‹Π΅, Ρ‚ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ слСдуСт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ большС, ΠΈΠ½Π°Ρ‡Π΅ тСкст потСряСт удобство чтСния.

ΠŸΠΎΠ΄Π±ΠΈΡ€Π°Ρ‚ΡŒ высоту строки слСдуСт ΠΏΠΎ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π° тСкста: ΠΎΡ‚ Π΄Π»ΠΈΠ½Π½Ρ‹ строки зависит ΠΈΠ½Ρ‚Ρ€Π΅Π»ΡŒΡΠΆ, ΠΎΡ‚ ΠΈΠ½Ρ‚Ρ€ΠΈΠ»ΡŒΡΠΆΠ° зависит отступ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ всС вмСстС зависят ΠΎΡ‚ Π²Π½Π΅ΡˆΠ½ΠΈΡ… Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ большС Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… отступов ΠΏΠΎ ΠŸΡ€Π°Π²ΠΈΠ»Ρƒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΈ внСшнСго ΠΈ Π’Π΅ΠΎΡ€ΠΈΠΈ близости.

БущСствуСт мноТСство Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², CSS-сСток, ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ… ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ высоты строки ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π² ΠΏΠΎΠ»Ρ‚ΠΎΡ€Π° Ρ€Π°Π·Π° Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ, Ρ‡Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ Π²ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π² ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΡƒΡŽΡΡ линию всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ строки тСкста. НапримСр UnitGridSystem. НСкоторыС ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΡŒΠ½ΠΎΠ΅ число ΠΈ Π²Ρ‹ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ½Ρ‚Ρ€ΠΈΠ»ΡŒΡΠΆ для всСх тСкстов ΠΊΡ€Π°Ρ‚Π½Ρ‹ΠΉ этому числу. Но Π² этом случаС ΠΎΡ‚ части ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² придСтся ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ. Π’ качСствС компромисса ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ инструмСнт Grilover. Он отличаСтся ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ просто Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ высоту Π±Π°Π·ΠΎΠ²ΠΎΠΉ строки ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π½ΠΎ ΠΈ компСнсируСт слипаниС/расползаниС строк ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ Scale factor.

ИспользованиС сСтки ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π² вСрстку

Π‘Π΅Ρ‚ΠΊΡƒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°ΠΌ Π² Π²ΠΈΠ΄Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ спСцификации. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΊ основному Π΄ΠΆΠΈΠΏΠ΅Π³Ρƒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΆΠΈΠΏΠ΅Π³ с сСткой, Π½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π° Π½Π΅ΠΌ основныС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ шаг, отступ, ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². Π’ΠΎΠ³Π΄Π° соотвСтствиС вашСго ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ вСрстки станСт Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΡ‡Π½Ρ‹ΠΌ, ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ ΠΈ синхронизациСй повысится с ΠΎΠ±Π΅ΠΈΡ… сторон. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ Π² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… интСрфСйсах ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ нСзависимыС пиксСли (dp), Ρ‚Π°ΠΊ ΠΈ Π² Π²Π΅Π±Π΅ это Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ rem. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Π² пиксСлях ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ элСмСнты ΠΈ расстояния Π² rem. Π£Π΄ΠΎΠ±Π½ΠΎ ΠΊΠΎΠ³Π΄Π° шаг вашСй сСтки ΠΈ rem ΠΊΡ€Π°Ρ‚Π΅Π½ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ числу. НапримСр, Ссли шаг сСтки 8 px, Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ β€” 16 px ΠΈ rem Ρ€Π°Π²Π΅Π½ 16 px, Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнтов ΠΈ расстояния ΠΏΡ€ΠΈ кратности 4 Π±ΡƒΠ΄ΡƒΡ‚ ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ Π½Π° сСтку ΠΈ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ†Π΅Π»ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² rem. Π­Ρ‚ΠΎ позволяСт сразу Π²ΠΈΠ΄Π΅Ρ‚ΡŒ расстояния ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами ΠΏΠΎ шагам Π½Π° сСткС. Π’Π°ΠΊΠΈΠ΅ Ρ†Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π±Π΅Π· Π΄ΠΎΠ»Π³ΠΈΡ… расчСтов ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ наглядно, Ссли Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Rem ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€ΠΎΠΌ.

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки:
О ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π΅ распознования тСкста ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌ Ρ€ΠΈΡ‚ΠΌΠ΅ Π½Π° Smash Magazine
Π•Ρ‰Π΅ ΠΎ сСткС Π½Π° teehan+lax
Grilover ΠΈ Typecast
Π‘Ρ‚Π°Ρ‚ΡŒΠΈ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ сСток Π½Π° The Grid System
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ поиска ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ для дизайнСрской сСтки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ β€” Gridfier.

Π‘Π΅Ρ‚ΠΊΠ° SharePoint ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

  • Π‘Ρ‚Π°Ρ‚ΡŒΡ

АдаптивныС интСрфСйсы Π»Π΅Π³ΠΊΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… устройствах, Ρ‡Ρ‚ΠΎΠ±Ρ‹ содСрТимоС Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»Π°ΡΡŒ Π½Π° экранах Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ². Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‚Π°ΠΊΠΆΠ΅ избавляСт ΠΎΡ‚ нСобходимости ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ нСсколько вСрсий страниц сайта для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… устройств.

Π’ рСкомСндациях ΠΏΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… страниц Π² срСдС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ SharePoint ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ систСма Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ сСтки, основанная Π½Π° Office UI Fabric. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ описаны базовая систСма сСтки страниц ΠΈ ΠΏΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Π΅ значСния, ΠΈΠ»ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экрана, ΠΏΡ€ΠΈ использовании ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° страниц.

Π‘Π΅Ρ‚ΠΊΠΈ Ρ‚ΠΈΠΏΠΎΠ² страниц

Для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницы Π² срСдС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ SharePoint ΠΌΠΎΠ³ΡƒΡ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ собствСнныС ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΊΠ°ΡΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ примСнСния Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ сСтки Fabric. Благодаря этому каТдая страница Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, для ΠΊΠ°ΠΊΠΎΠ³ΠΎ устройства ΠΎΠ½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π°, Π° интСрфСйс Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ для ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ срСды. Базовая сСтка Π² классичСских срСдах SharePoint прСдставляСт собой структуру ΠΈΠ· 12 столбцов. ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ столбцов ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² соотвСтствии с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ экрана.

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π½ΠΈΠΆΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π°Ρ… прСдставлСна базовая структура сСтки, примСняСмая Π½Π° страницах SharePoint Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ сСтка рСгулируСтся Π² соотвСтствии с потрСбностями интСрфСйса ΠΈ устройства.

Π‘Π°ΠΉΡ‚Ρ‹ Π³Ρ€ΡƒΠΏΠΏ

ΠžΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° для сайта Π³Ρ€ΡƒΠΏΠΏΡ‹ Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π° Π² Π»Π΅Π²ΠΎΠΉ части экрана. На сайтах Π³Ρ€ΡƒΠΏΠΏ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ располоТСна слСва, поэтому ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π²Π΅Π±-частСй Π½Π° сСтку ΠΈ пСрСстраивании страницы ΠΎΠ½Π° Π½Π΅ пСрСкрываСтся. Максимальная ΡˆΠΈΡ€ΠΈΠ½Π° области ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° сайтС Π³Ρ€ΡƒΠΏΠΏΡ‹ β€” 1204 пиксСля, Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ β€” 320 пиксСлСй для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ сСтка рСгулируСтся с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ основных ΠΏΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π½Π° сайтС Π³Ρ€ΡƒΠΏΠΏΡ‹.

МалСнькая (320 x 568)

МалСнькая сСтка содСрТит ΠΎΠ΄ΠΈΠ½ столбСц ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с полями ΠΏΠΎ 20 пиксСлСй слСва ΠΈ справа.

БрСдняя (480 x 854)

БрСдняя сСтка содСрТит 12 столбцов с ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌΠΈ ΠΏΠΎ 16 пиксСлСй.

ΠšΡ€ΡƒΠΏΠ½Π°Ρ (640 x 1024)

ΠšΡ€ΡƒΠΏΠ½Π°Ρ сСтка содСрТит 12 столбцов с ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌΠΈ ΠΏΠΎ 24 пиксСля.

XL (1024 x 768)

Π‘Π΅Ρ‚ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ€Π° XL содСрТит 12 столбцов с ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌΠΈ ΠΏΠΎ 24 пиксСля.

XXL (1366 x 768)

Π‘Π΅Ρ‚ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ€Π° XXL содСрТит 12 столбцов с ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌΠΈ ΠΏΠΎ 32 пиксСля.

XXXL (1920 x 1080)

Π‘Π΅Ρ‚ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ€Π° XXXL содСрТит 12 столбцов с ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌΠΈ ΠΏΠΎ 32 пиксСля.

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ с нСсколькими столбцами ΠΈ Π²Π΅Π±-части Π½Π° сайтах Π³Ρ€ΡƒΠΏΠΏ

Π’Π΅Π±-части ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ страницы. НиТС ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π²Π΅Π±-части коррСктируСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΠ»Π°ΡΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ слСва.

Π‘Π°ΠΉΡ‚Ρ‹ для общСния

На сайтах для общСния ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ располоТСна Π²Π²Π΅Ρ€Ρ…Ρƒ, Π° ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° β€” ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. Максимальная ΡˆΠΈΡ€ΠΈΠ½Π° области ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° сайтС для общСния β€” 1204 пиксСлСй, Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ β€” 320 пиксСлСй для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ сСтка рСгулируСтся с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ основных ΠΏΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π½Π° сайтС для общСния.

МалСнькая (320 x 568)

МалСнькая сСтка содСрТит ΠΎΠ΄ΠΈΠ½ столбСц ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с полями ΠΏΠΎ 20 пиксСлСй слСва ΠΈ справа.

БрСдняя (480 x 854)

БрСдняя сСтка содСрТит 12 столбцов с ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌΠΈ ΠΏΠΎ 16 пиксСлСй.

ΠšΡ€ΡƒΠΏΠ½Π°Ρ (640 x 1024)

ΠšΡ€ΡƒΠΏΠ½Π°Ρ сСтка содСрТит 12 столбцов с ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌΠΈ ΠΏΠΎ 24 пиксСля.

XL (1024 x 768)

Π‘Π΅Ρ‚ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ€Π° XL содСрТит 12 столбцов с ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌΠΈ ΠΏΠΎ 24 пиксСля.

XXL (1366 x 768)

Π‘Π΅Ρ‚ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ€Π° XXL содСрТит 12 столбцов с ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌΠΈ ΠΏΠΎ 32 пиксСля.

XXXL (1920 x 1080)

Π‘Π΅Ρ‚ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ€Π° XXXL содСрТит 12 столбцов с ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌΠΈ ΠΏΠΎ 32 пиксСля.

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ с нСсколькими столбцами ΠΈ Π²Π΅Π±-части Π½Π° сайтах для общСния

Π’Π΅Π±-части ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ страницы. НиТС ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ сайт для общСния ΠΈ Π²Π΅Π±-части для ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² с 1–3 столбцами.

ΠŸΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Π΅ значСния

Π§Ρ‚ΠΎΠ±Ρ‹ страница ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΡΡ‚Ρ€Π°ΠΈΠ²Π°Π»Π°ΡΡŒ Π½Π° экранах всСх Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ², ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс SharePoint Π΄ΠΎΠ»ΠΆΠ΅Π½ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹:

  • 320 пкс
  • 1024 пкс
  • 1366 пкс
  • 1920 пкс

ΠŸΡ€ΠΈ использовании этих ΠΏΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ слСдуСт ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ смСстится ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ послС ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΎΠΊΠ½Π° просмотра Π² соотвСтствии с блиТайшим ΠΏΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ эта схСма прСдставлСна Π² ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… цСлях ΠΈ Π½Π΅ являСтся Ρ‚ΠΎΡ‡Π½ΠΎΠΉ.

Адаптивная сСтка Π½Π° сайтах Π³Ρ€ΡƒΠΏΠΏ ΠΈ сайтах для общСния рСгулируСтся ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ ΠΎΡ‚ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΊ значСниям для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π°ΠΊ сайт коррСктируСтся для устройства ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π΅Π³ΠΎ экрана. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π½ΠΈΠΆΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ описаны Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ сСтки ΠΏΡ€ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Ρ… значСниях для Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экранов популярных устройств.

Π¨ΠΈΡ€ΠΈΠ½Π° ΠΎΠΊΠ½Π°Π£ΡΡ‚Ρ€ΠΎΠΉΡΡ‚Π²ΠΎΠŸΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅Π‘Ρ‚ΠΎΠ»Π±Ρ†Ρ‹Π˜Π½Ρ‚Π΅Ρ€Π²Π°Π»ΠœΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ количСство столбцов для Ρ€Π°Π·Π΄Π΅Π»Π°
320iPhone 5/SE, 320 x 568ΠœΠ°Π»Ρ‹ΠΉ1Н/Π΄1
480Устройство с 6-Π΄ΡŽΠΉΠΌΠΎΠ²Ρ‹ΠΌ экраномБрСдний1Н/Π΄1
640Устройство с 8-Π΄ΡŽΠΉΠΌΠΎΠ²Ρ‹ΠΌ ΡΠΊΡ€Π°Π½ΠΎΠΌΠšΡ€ΡƒΠΏΠ½Ρ‹ΠΉ12162
768iPad с ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ, 768 x 1024ΠšΡ€ΡƒΠΏΠ½Ρ‹ΠΉ12242
1024iPad с альбомной ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ, 1024 x 768Π Π°Π·ΠΌΠ΅Ρ€ XL12243
1368Surface Pro 3, 1368 x 912Π Π°Π·ΠΌΠ΅Ρ€ XXL12323
1440Surface Pro 4, 1440 x 960Π Π°Π·ΠΌΠ΅Ρ€ XXL12323
1600Π’Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, 1600 x 900Π Π°Π·ΠΌΠ΅Ρ€ XXL12323
1920Π’Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, 1920 x 1080Π Π°Π·ΠΌΠ΅Ρ€ XXXL12323

Π‘ΠΌ.

Ρ‚Π°ΠΊΠΆΠ΅
  • Набор инструмСнтов ΠΈ рСсурсы для Π΄ΠΈΠ·Π°ΠΉΠ½Π°
  • ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° SharePoint

ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ сСтки: ПолноС руководство | by Nitish Khagwal

Π§Ρ‚Π΅Π½ΠΈΠ΅: 8 ΠΌΠΈΠ½.

Β·

23 октября 2020 Π³.

Π― Π½Π°Ρ…ΠΎΠΆΡƒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с сСткой ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ. Π‘Π΅Ρ‚ΠΊΠ° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ ΠΈ быстрСС ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ дизайнСрскиС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. Π‘Π΅Ρ‚ΠΊΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΎΠΉ Π½Π° экранах Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ рассказываСтся ΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠΌ аспСктС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ сСтки ΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΌΠΎΠ³ΡƒΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сСтки Π² своСм Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ процСссС проСктирования.

Π‘Π΅Ρ‚ΠΊΠ° состоит ΠΈΠ· Ρ‚Ρ€Π΅Ρ… основных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π²ΠΊΠ»ΡŽΡ‡Π°Ρ столбцы, ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΈ поля. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΠΈΡ… ΠΏΠΎΠ½ΡΡ‚ΡŒ β€”

Колонки

Колонки β€” это Π²ΠΎΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для выравнивания ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. ΠœΡ‹ опрСдСляСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов Π»ΠΈΠ±ΠΎ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… (%), Π»ΠΈΠ±ΠΎ Π² фиксированных значСниях.

Π‘Ρ‚ΠΎΠ»Π±Ρ†Ρ‹ Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ сСткС

ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ

ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ β€” это ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами. Π–Π΅Π»ΠΎΠ±Π° ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚ΡŒ содСрТимоС. ΠœΡ‹ опрСдСляСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΆΠ΅Π»ΠΎΠ±Π° ΠΊΠ°ΠΊ фиксированныС значСния.

Π–Π΅Π»ΠΎΠ±Π° Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ сСткС

Поля

Поля β€” это пространство ΠΌΠ΅ΠΆΠ΄Ρƒ содСрТимым ΠΈ краями экрана.

ΠœΡ‹ опрСдСляСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ… ΠΏΠΎΠ»Π΅ΠΉ ΠΊΠ°ΠΊ фиксированныС значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ минимальноС свободноС пространство для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана.

Π“ΠΈΠ±ΠΊΠΈΠ΅ поля Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ ΠΎΡΡ‚Π°Π²ΡˆΠ΅Π΅ΡΡ пространство послС создания сСтки со столбцами, ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ°ΠΌΠΈ ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹ΠΌΠΈ полями.

Π“ΠΈΠ±ΠΊΠΈΠ΅ поля ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана.

Π‘ΠΎΠΊΠΎΠ²Ρ‹Π΅ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠ΅ поля Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ сСткС

ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ (изобраТСния, тСкст ΠΈΠ»ΠΈ элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса) упаковываСтся Π² Π²ΠΈΠ΄ΠΈΠΌΡ‹Π΅ ΠΈΠ»ΠΈ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹Π΅ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹. Π’ΠΈΠ΄ΠΈΠΌΡ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°ΠΌΠΊΡƒ ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ заполнСния, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΡƒΡŽ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ.

Π’ΠΈΠ΄ΠΈΠΌΡ‹Π΅ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠ°ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Π±Π°Π½Π½Π΅Ρ€Ρ‹ ΠΈ Ρ‚. Π΄.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ

НСвидимыС Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹, ΠΊΠ°ΠΊ тСкст ΠΈΠ»ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ.

ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°Ρ…, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ

Π ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ ΠΈ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° ΠΊΡ€Π°ΡŽ столбца. Π ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ ΠΈΠ»ΠΈ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΊΡ€Π°ΡŽ ΠΆΠ΅Π»ΠΎΠ±ΠΎΠ² ΠΈΠ»ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ… ΠΏΠΎΠ»Π΅ΠΉ.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ столбцов Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° размСщаСтся нСзависимо ΠΈ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ выравниваСтся со столбцами.

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ столбцов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… для составлСния сСтки, называСтся структурой столбцов.

8, 12, 16 ΠΈ 20 β€” это нСсколько Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных структур столбцов для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π­Ρ‚ΠΎ зависит ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ, ΠΊΠ°ΠΊΡƒΡŽ структуру ΠΊΠΎΠ»ΠΎΠ½Π½ Π²Ρ‹ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚Π΅ для своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

8/12/16/20 Π‘Π΅Ρ‚Ρ‡Π°Ρ‚Ρ‹Π΅ структуры столбцов

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° ΠΈΠ· 12 столбцов являСтся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΎΠΉ. Он ΠΌΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ содСрТимоС Π»ΠΈΠ±ΠΎ Π² 4–4–4 ΠΈΠ»ΠΈ 3–3–3–3 Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° .

Π’ΠΎΡ‡ΠΊΠ° останова β€” это ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ пСрСстраиваСтся Π² соотвСтствии с доступным Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана для Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ просмотра ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° столбца, ΡˆΠΈΡ€ΠΈΠ½Π° столбца, ΡˆΠΈΡ€ΠΈΠ½Π° поля ΠΈ поля зависят ΠΎΡ‚ Ρ‚ΠΎΡ‡ΠΊΠΈ останова. Π ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π»ΠΈΠ±ΠΎ ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ΡΡ, Π»ΠΈΠ±ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² соотвСтствии с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ останова, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒΡΡ для Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ просмотра.

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ сСтки

Π Π°Π·ΠΌΠ΅Ρ€ столбца ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ, Ссли Π½Π° мСньшСм экранС достаточно мСста для размСщСния содСрТимого. Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ† располагаСтся Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ, Ссли содСрТимоС Π½Π΅ помСщаСтся Π² доступноС пространство Π½Π° мСньшСм экранС.

Π‘Π΅Ρ‚ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ трСмя Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ способами Π² Ρ€Π°Π·Π½Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡ΠΊΠ°Ρ….

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΠΈΡ… ΠΏΠΎΠ½ΡΡ‚ΡŒ β€”

ЀиксированныС сСтки

Ѐиксированная сСтка ΠΈΠΌΠ΅Π΅Ρ‚ столбцы фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠ΅ поля. Ѐиксированная сСтка ΠΈΠΌΠ΅Π΅Ρ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ содСрТимого, которая Π½Π΅ измСняСтся Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ Ρ‚ΠΎΡ‡Π΅ΠΊ останова, Π° Π³ΠΈΠ±ΠΊΠΈΠ΅ поля Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ ΠΎΡΡ‚Π°Π²ΡˆΠ΅Π΅ΡΡ пространство.

ПовСдСниС сСтки с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ

Гибкая ΠΈΠ»ΠΈ полноразмСрная сСтка

Гибкая сСтка ΠΈΠΌΠ΅Π΅Ρ‚ столбцы с измСняСмой ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ, фиксированныС ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΈ фиксированныС Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ поля. Гибкая сСтка ΠΈΠΌΠ΅Π΅Ρ‚ Π³ΠΈΠ±ΠΊΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ содСрТимого, которая ΠΈΠ΄Π΅Ρ‚ ΠΎΡ‚ края Π΄ΠΎ края Π² соотвСтствии с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана.

Π’ Π³ΠΈΠ±ΠΊΠΎΠΉ сСткС столбцы Π»ΠΈΠ±ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ, Π»ΠΈΠ±ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°ΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ доступному пространству.

Fluid Grid Behavior

Π“ΠΈΠ±Ρ€ΠΈΠ΄Π½Ρ‹Π΅ сСтки

Гибридная сСтка ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΊΠ°ΠΊ с измСняСмой ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ, Ρ‚Π°ΠΊ ΠΈ с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ.

Π’ соврСмСнных ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ элСмСнты ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ выходят Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ сСтки ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° экранС ΠΎΡ‚ края Π΄ΠΎ края. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π½ΠΈΠΆΠ½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Ρ‹, Π²ΠΈΠ΄ΠΈΠΌΡ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π±Π΅Π· ΠΏΠΎΠ»Π΅ΠΉ ΠΈΠ»ΠΈ изобраТСния β€” Π²ΠΎΡ‚ лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· распространСнных ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ².

ПовСдСниС Π³ΠΈΠ±Ρ€ΠΈΠ΄Π½ΠΎΠΉ сСтки

Если ΡˆΠΈΡ€ΠΈΠ½Π° содСрТимого ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ доступный Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана, фиксированная сСтка Ρ€Π΅Π·ΠΊΠΎ прСвращаСтся Π² ΠΈΠ·ΠΌΠ΅Π½Ρ‡ΠΈΠ²ΡƒΡŽ сСтку, Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΡƒΡŽΡΡ ΠΊΠΎ всСму доступному пространству Π½Π° экранС для Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½ΠΎΠ³ΠΎ размСщСния содСрТимого.

Π― ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽ 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ структуру для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π’ соотвСтствии с вашими трСбованиями ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ структуру столбцов. НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΡƒΡŽ структуру ΠΊΠΎΠ»ΠΎΠ½Π½ Π²Ρ‹ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚Π΅, Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ останСтся ΠΏΡ€Π΅ΠΆΠ½ΠΈΠΌ.

Π’Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с большими Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ 1440Γ—900, 1600Γ—900 ΠΈΠ»ΠΈ 1920Γ—1080, Ссли это Π½Π΅ являСтся ΠΏΡ€Π΅Π΄Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚Π΅.

1280Γ—800 β€” наимСньшСС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола. И ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ для Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ 1280 Γ— 800, ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ большим экранам, Π½ΠΎ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ становится довольно слоТным.

Π˜Ρ‚Π°ΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½ΠΎΠΉ области Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 1280Γ—800 β€”

Настройка сСтки ΠΌΠ°ΠΊΠ΅Ρ‚Π° фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтку фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹, ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ фиксированноС числовоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΠΏΠΎΠ»Π΅ΠΉ ΠΈ столбцов. Π― Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ столбцы ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 74 пиксСля, отступы ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 32 пиксСля ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ поля 16 пиксСлСй с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны.

Настройка сСтки ΠΌΠ°ΠΊΠ΅Ρ‚Π° с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ

Π‘Ρ‚ΠΎΠ»Π±Ρ†Ρ‹ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 74 пиксСля ΠΈ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 32 пиксСля приводят ΠΊ ΡˆΠΈΡ€ΠΈΠ½Π΅ содСрТимого 1240 пиксСлСй (ΠΈΡΠΊΠ»ΡŽΡ‡Π°Ρ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ поля ΠΏΠΎ 16 пиксСлСй с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны, Ρ‚. Π΅. 1272 пиксСля) , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ максимально доступный Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана.

Π’ Ρ€Π°Π·Π½Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡ΠΊΠ°Ρ…, ΠΊΠΎΠ³Π΄Π° ΡˆΠΈΡ€ΠΈΠ½Π° содСрТимого ΠΌΠ°ΠΊΠ΅Ρ‚Π° с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана, сСтка с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ вСсти сСбя ΠΊΠ°ΠΊ ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π°Ρ сСтка.

Настройка сСтки Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтку Π³ΠΈΠ±ΠΊΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ фиксированныС числовыС значСния для ΠΆΠ΅Π»ΠΎΠ±ΠΎΠ² ΠΈ автоматичСски вычисляСмыС значСния (Π² %) для столбцов.

Настройка сСтки Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°

Π‘Π΅Ρ‚ΠΊΠ° Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ вСсь Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана для ΡˆΠΈΡ€ΠΈΠ½Ρ‹ основного содСрТимого, оставляя Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ поля ΠΏΠΎ 16 пиксСлСй с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны.

Для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π³ΠΈΠ±ΠΊΡƒΡŽ сСтку, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ поля ΠΈΠΌΠ΅ΡŽΡ‚ фиксированныС числовыС значСния. Π― Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ отступы ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 16 пиксСлСй ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ поля ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 16 пиксСлСй с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны.

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ интСрфСйсы Π½Π° Π°Ρ€Ρ‚Π±ΠΎΡ€Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 360Γ—640.

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства ΠΈΠΌΠ΅ΡŽΡ‚ малСнькоС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ экрана. Если ΠΌΡ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΠΌ 12 ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… столбцов, ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ поля Π² Ρ‚Π°ΠΊΠΎΠΌ малСньком Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ, ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² ΠΌΠ°ΡΡˆΡ‚Π°Π±Π΅ станСт довольно Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΠΈΠΌ.

Гибкая настройка сСтки для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств

Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ объСдиняСм столбцы Π² Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΈΠ· 3, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ 4 толстых столбца, сохраняя сСтку ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π³Π»Π°Π΄ΠΊΠΎΠΉ ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ для быстрого принятия Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ ΠΏΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΡŽ.

ΠœΡ‹ настраиваСм сСтки для ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. Π― Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ отступы ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 32 пиксСля ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ поля ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 16 пиксСлСй с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны.

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ интСрфСйсы для ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² Π½Π° Π°Ρ€Ρ‚Π±ΠΎΡ€Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 768Γ—1024.

Гибкая настройка сСтки для ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°

ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ столбцы Π² Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΈΠ· 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ 6 толстых столбцов для чистой ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ настройки сСтки.

Π’ Material Design явно Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽΡ‚ΡΡ отступы 24 пиксСля ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ поля 32 пиксСля. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти значСния для Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°.

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сСтки опрСдСляСт структуру основного содСрТимого ΠΌΠ°ΠΊΠ΅Ρ‚Π°. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сСтки для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ.

НСсколько ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² уровня страницы ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ основного содСрТимого.

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ страницы, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… для пСрСноса основного содСрТимого, опрСдСляСт Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² Π½ΠΈΡ… β€”

ΠœΠ°ΠΊΠ΅Ρ‚ с ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΎΠΉ

ΠœΠ°ΠΊΠ΅Ρ‚ с ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π½ΠΎΡˆΠΈΡ€ΠΈΠ½Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Π° β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых популярных Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… ΠΈ Π²Π΅Π΄ΡƒΡ‰ΠΈΡ… страниц.

ΠœΠ°ΠΊΠ΅Ρ‚ с ΠΎΠ΄Π½ΠΈΠΌ столбцом ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ уровня страницы

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ 12 столбцов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ с ΠΎΠ΄Π½ΠΈΠΌ столбцом, Π»ΠΈΠ±ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ 12 столбцов ΠΏΠΎ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ².

Но всС ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ уровня страницы.

ΠœΠ°ΠΊΠ΅Ρ‚ с двумя столбцами

ΠœΠ°ΠΊΠ΅Ρ‚ с двумя столбцами ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° уровня страницы. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ уровня страницы ΠΈΠΌΠ΅Π΅Ρ‚ больший вСс столбца ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π΄Ρ€ΡƒΠ³ΠΈΠΌ.

ΠœΠ°ΠΊΠ΅Ρ‚ с двумя столбцами ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ 2 страниц

Π’ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ с двумя столбцами столбцы Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π»ΠΈΠ±ΠΎ ΠΏΠΎ 9–3, Π»ΠΈΠ±ΠΎ ΠΏΠΎ 8–4 Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° для создания ΡˆΠΈΡ€ΠΈΠ½Ρ‹ основного содСрТимого.

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ с ΠΎΠ΄Π½ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ панСлью β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΄Π²ΡƒΡ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

ΠœΠ°ΠΊΠ΅Ρ‚ с трСмя столбцами

ΠœΠ°ΠΊΠ΅Ρ‚ с трСмя столбцами ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ страницы. Один ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ уровня страницы раздСляСт больший вСс столбца ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с двумя Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ уровня страницы.

ΠœΠ°ΠΊΠ΅Ρ‚ с трСмя столбцами ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ 3 страниц

Π’ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ с трСмя столбцами столбцы Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π»ΠΈΠ±ΠΎ Π² 3–6–3, Π»ΠΈΠ±ΠΎ Π² 2–8–2 Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°Ρ… для создания ΡˆΠΈΡ€ΠΈΠ½Ρ‹ основного содСрТимого.

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ с двумя Π±ΠΎΠΊΠΎΠ²Ρ‹ΠΌΠΈ панСлями ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ быстрым ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Ρ‚Ρ€Π΅Ρ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

ΠœΠ°ΠΊΠ΅Ρ‚ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹

ΠœΠ°ΠΊΠ΅Ρ‚ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Π°Ρ‡Π΅.

Ѐиксированная ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ

Π¨ΠΈΡ€ΠΈΠ½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ фиксирована Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Ρ‚ΠΎΡ‡Π΅ΠΊ останова, Π° ΠΎΡΡ‚Π°Π²ΡˆΠ΅Π΅ΡΡ пространство занято Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ измСняСмой ΡˆΠΈΡ€ΠΈΠ½Ρ‹.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Π°Ρ панСль с Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹ΠΌΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹ΠΌΠΈ панСлями β€” прСкрасный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ.

Π’ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² срСдствС прототипирования ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ ΡΡƒΡ‰Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ.

Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ ΠΊΠΎΠ΄Π°, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ столбцы, Π»ΠΈΠ±ΠΎ ΡΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΡ….

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ 12 столбцов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ с ΠΎΠ΄Π½ΠΈΠΌ столбцом, ΠΈΠ»ΠΈ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ 12 столбцов Π² Π½Π°Π±ΠΎΡ€ слоТСнных ΠΈΠ»ΠΈ ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½Ρ‹Ρ… Π³Ρ€ΡƒΠΏΠΏ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Π’Ρ‹ всСгда Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ваш Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π·Π½Π°Π΅Ρ‚ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов, отступы ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ поля Π²Ρ‹ использовали для Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ², ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΈ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² соврСмСнных инструмСнтах прототипирования.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ довольно популярныС Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Bootstrap, Zurb Foundation ΠΈ Ρ‚. Π΄., Π³Π΄Π΅ значСния столбцов, ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠ² ΠΈ Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ… ΠΏΠΎΠ»Π΅ΠΉ сильно Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ Π² соотвСтствии со стандартизированным ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ.

ΠŸΡ€ΠΎΡΡ‚Π°Ρ настройка Bootstrap Grid

Однако ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ эти значСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€ΡƒΠ±ΠΎΠ³ΠΎ ΠΎΠ±Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡƒΡ‚ΠΈ Π² популярных Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°Ρ… для Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π° экранах Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

НС ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ структурами столбцов, столбцами, ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ°ΠΌΠΈ ΠΈ значСниями Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ… ΠΏΠΎΠ»Π΅ΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для вас.

Но Π΄Π°! Если Π²Ρ‹ большС сосрСдоточСны Π½Π° быстрых Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°Ρ… Π² сТатыС сроки, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ числовыС значСния ΠΈ ΠΏΠΎΠ±Π΅ΠΆΠ΄Π°ΠΉΡ‚Π΅ Π² ΠΈΠ³Ρ€Π΅ с сСткой, ΠΊΠ°ΠΊ PRO .

Бпасибо!

Π’Ρ‹ достигли ΠΊΡ€Π°ΠΉΠ½Π΅Π³ΠΎ Π΄Π½Π°! Π― Ρ†Π΅Π½ΡŽ это!

Π― надСюсь, Ρ‡Ρ‚ΠΎ это руководство ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° ΠΏΡ€ΠΎΡ‡Π½ΠΎΠΉ сСткС. Если Π²Ρ‹ считаСтС эту ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ, поТалуйста, πŸ‘πŸ‘

НС ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС β€” Instagram , Twitter , ΠΈΠ»ΠΈ Dribbble .

Π—Π΄ΠΎΡ€ΠΎΠ²ΠΎ! Bie πŸ‘‹ πŸ‘‹

13 Π»ΡƒΡ‡ΡˆΠΈΡ… Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… сСточных систСм CSS для вашСго Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Skeleton β€” это Π½Π°Π±ΠΎΡ€ Ρ„Π°ΠΉΠ»ΠΎΠ² CSS для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ сСточныС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹. Skeleton β€” это большС, Ρ‡Π΅ΠΌ просто систСма сСток, ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ нСсколько основных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΎΠ±Ρ‰ΠΈΡ… Π·Π°Π΄Π°Ρ‡ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ сброс CSS для Π½ΠΎΡ€ΠΌΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ вашСго CSS.

Основная Ρ†Π΅Π»ΡŒ Neat grid framework β€” ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ³Π°Ρ‚ΡŒ Ρ‡ΠΈΡΡ‚ΡƒΡŽ ΡΠ΅ΠΌΠ°Π½Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ миксинов Sass, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ Π»ΠΈΡˆΠ½ΠΈΡ… ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… классов ΠΈ пСрСноса Ρ€Π°Π·Π΄Π΅Π» элСмСнтов. НачнитС Ρ€Π°Π±ΠΎΡ‚Ρƒ с Neat, ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π² ΠΈΡ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈ ΠΈΠ·ΡƒΡ‡ΠΈΠ² нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ².

Если Π²Ρ‹ ΠΏΡ€ΠΈΠ²Π΅Ρ€ΠΆΠ΅Π½Π΅Ρ† ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌΠ°, Ρ‚ΠΎ Simple Grid β€” это систСма, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ стоит ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½Π° ΠΏΡ€ΠΈΠ·Π²Π°Π½Π° ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Π°ΠΌ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ для создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сСтки CSS. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, 1140 пиксСлСй β€” это базовая ΡˆΠΈΡ€ΠΈΠ½Π° Simple Grid, Π° Π½Π΅ Π±ΠΎΠ»Π΅Π΅ распространСнныС 1024 пиксСля, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ Simple Grid считаСт, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ пСрСросли это соглашСниС.

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ этой Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ сСтки Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. Подобно философии Neat, ΠΎΠ±ΡΡƒΠΆΠ΄Π°Π²ΡˆΠ΅ΠΉΡΡ Ρ€Π°Π½Π΅Π΅, Ссли Π²Ρ‹ обСспокоСны Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈΠ·Π±Ρ‹Ρ‚ΠΎΡ‡Π½Ρ‹ΠΌ количСством ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… классов CSS, Ρƒ вас Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Sass’s 9. 0213 Ѐункция @extend с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ csswizardry-grids.

Одной ΠΈΠ· ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… особСнностСй Profound Grid являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Ρ‚ΠΎΡ‡Π½ΠΎ воспроизводит ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ с ΠΏΠ»Π°Π²Π½ΠΎΠΉ сСткой Π²ΠΎ всСх ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Как эта отзывчивая сСточная систСма CSS достигаСт Ρ‚Π°ΠΊΠΎΠ³ΠΎ успСха? Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля для расчСта Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² столбца.

Griddle ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Π²Π΅Π±-сайтов, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π½Π° соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹. Π­Ρ‚Π° систСма сСтки CSS создаСтся с использованиСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ миксинов Sass. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ возмоТности CSS inline-block ΠΈ box-sizing , Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ вашим ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΠΎΠ²Ρ‹Π΅ возмоТности, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Π°ΠΌ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π½Π° основС ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов.

7. Π‘Π²Π΅Ρ€Ρ…ΠΌΠΎΡ‰Π½Ρ‹Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ сСтки

Если Π²Ρ‹ чувствуСтС, Ρ‡Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ систСмы сСтки CSS слишком ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ ваши возмоТности, Ссли ваш ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ β€” ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ваш Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ адаптируСтся ΠΊ экрану просмотра ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ссли Π²Ρ‹ Π·Π°Π±ΠΎΡ‚ΠΈΡ‚Π΅ΡΡŒ ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π½Π°Π·Π²Π°Π½Π½Ρ‹Ρ… классах CSS Π² вашСй Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, Π²Π°ΠΌ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ сСтки Extra Strength.

Π­Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ сСтки CSS Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, которая часто Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌ наши ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹; Π½Π΅ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΆΠ΅Π»ΠΎΠ±ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ситуациями просмотра. ΠŸΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ сСтки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ фиксированныС Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния для водосточных ΠΆΠ΅Π»ΠΎΠ±ΠΎΠ², сохраняя ΠΏΡ€ΠΈ этом ΠΈΠ·ΠΌΠ΅Π½Ρ‡ΠΈΠ²Ρ‹Π΅ столбцы.

Π­Ρ‚Π° сСтка CSS являСтся ΠΎΠ±Π»Π΅Π³Ρ‡Π΅Π½Π½ΠΎΠΉ, всСго 250 Π±Π°ΠΉΡ‚. Если Π²Π°ΠΌ просто Π½ΡƒΠΆΠ½Π° нСслоТная адаптивная сСтка ΠΈ Π½ΠΈΡ‡Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅, ΠΈ Ссли Π²Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ Π·Π°Π±ΠΎΡ‚ΠΈΡ‚Π΅ΡΡŒ ΠΎ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π²Π΅Π±-интСрфСйса, этот ΠΊΡ€ΠΎΡˆΠ΅Ρ‡Π½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ сСтки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²Π° класса CSS, β€” это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

Адаптивная сСточная систСма прСдоставляСт Π²Π°ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС гибкости ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ сСточными систСмами CSS, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½Π° Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любоС количСство столбцов, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ. ΠŸΠΎΠΏΡ€ΠΎΡ‰Π°ΠΉΡ‚Π΅ΡΡŒ с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ диктаторскими сСтками ΠΈΠ· 12 ΠΈΠ»ΠΈ 16 столбцов, Ссли Π²Ρ‹ ΠΏΠΎΠΉΠ΄Π΅Ρ‚Π΅ ΠΏΠΎ этому ΠΏΡƒΡ‚ΠΈ.

Если Π²Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ ΠΈ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с самой популярной систСмой сСток, 960 Grid System, Ρ‚ΠΎ rwdgrid β€” отзывчивая сСтка CSS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰Π°Ρ синтаксис ΠΈ Ρ„ΠΈΠ»ΠΎΡΠΎΡ„ΠΈΡŽ 960 Grid System β€” стоит Ρ‚ΠΎΠ³ΠΎ.