Π‘Π΅Ρ‚ΠΊΠ° для вСрстки сайта: Π² Ρ‡Ρ‘ΠΌ сСкрСт β€” Π”ΠΈΠ·Π°ΠΉΠ½ Π½Π° vc.ru

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

Π² Ρ‡Ρ‘ΠΌ сСкрСт β€” Π”ΠΈΠ·Π°ΠΉΠ½ Π½Π° vc.ru

Как любая систСма, сСтка строится Π½Π° основС модуля. ΠœΠΎΠ΄ΡƒΠ»ΡŒ Π² ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊ сСткС β€” нСкая минимальная Π΅Π΄ΠΈΠ½ΠΈΡ†Π° измСрСния, которая лоТится Π² основу всСй структуры.

25Β 335 просмотров

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ сСткС, сразу хочСтся ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒ вас с Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠΌ EM β€” это Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Π°, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡ†Π° измСрСния, которая ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Π²Π΅Π±-вёрсткС.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΈΠΌΠ΅Π½Π½ΠΎ EM? Π­Ρ‚ΠΎΡ‚ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ ΠΏΡ€ΠΈΡˆΡ‘Π» ΠΈΠ· высокого Π½Π°Π±ΠΎΡ€Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ количСство Π·Π½Π°ΠΊΠΎΠ². Π’ΠΎΠ³Π΄Π° Π±Ρ‹Π»Π° ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»Π° эта историчСская Π΅Π΄ΠΈΠ½ΠΈΡ†Π°, которая равняСтся самой большой Π±ΡƒΠΊΠ²Π΅ (ΠΊΠΎΠ³Π΄Π° Π±ΡƒΠΊΠ²Ρ‹ Π±Ρ‹Π»ΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅, ΠΊΠΎΠ³Π΄Π° Π±Ρ‹Π» высокий Π½Π°Π±ΠΎΡ€, Π»ΠΈΡ‚Π΅Ρ€ вырСзался ΠΈΠ· Π΄Π΅Ρ€Π΅Π²Π° ΠΈΠ»ΠΈ выливался ΠΈΠ· ΠΌΠ΅Ρ‚Π°Π»Π°) ΠΈ самой большой Π±ΡƒΠΊΠ²ΠΎΠΉ Π² Π½Π°Π±ΠΎΡ€Π΅ Π±Ρ‹Π»Π° М. Π’ΠΎ Π΅ΡΡ‚ΡŒ это нСкоторая усрСднСнная Π΅Π΄ΠΈΠ½ΠΈΡ†Π°, Ρ€Π°Π²Π½ΡΡŽΡ‰Π°ΡΡΡ срСднСму Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ Π±ΡƒΠΊΠ²Ρ‹ Π² ΡˆΡ€ΠΈΡ„Ρ‚Π΅.

Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, это нСкая стандартная Π±ΡƒΠΊΠ²Π°, усрСднённая.

Как ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ числовой ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ? К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, прСдставим строку, Π½Π°Π±Ρ€Π°Π½Π½ΡƒΡŽ 16 ΠΊΠ΅Π³Π»Π΅ΠΌ ΠΈ высотой строки 24px.

Если 24 Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° 16 получится 1,5.

По классикС ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΉ вёрстки ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Π°Ρ Π΄Π»ΠΈΠ½Π° строки 45–75 Π·Π½Π°ΠΊΠΎΠ², Π° высота 1,4 em.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ это накладываСтся Π½Π° ΡΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ строку Π½Π° сайтС:

ΠžΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΠΎ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств:

32–38 Π·Π½Π°ΠΊΠΎΠ².

1,3–1,5 em β€” Ρ€Π°Π·ΠΌΠ΅Ρ€ высоты строки.

Π’Ρ‹Π²ΠΎΠ΄: Ρ‡Π΅ΠΌ ΠΊΠΎΡ€ΠΎΡ‡Π΅ строка, Ρ‚Π΅ΠΌ мСньшС высота строки.

Из-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π² Π²Π΅Π±Π΅ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ Π½Π΅ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚, Π° сканируСт, высота строки Π½Π° сайтах большС классичСской.

Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΏΡ€ΠΎ строку ΠΈ ΠΎΠ± основных Π΅Ρ‘ полоТСниях. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΏΡ€ΠΎ сСтку ΠΈ Ρ‚ΠΎ, Π·Π°Ρ‡Π΅ΠΌ ΠΎΠ½Π° Π½ΡƒΠΆΠ½Π°.

Часто, ΠΊΠΎΠ³Π΄Π° говорят ΠΏΡ€ΠΎ сСтку, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Π³Π°Π·Π΅Ρ‚Ρƒ.

Π Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ Π΅Ρ‘ Π±ΠΎΠ»Π΅Π΅ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎ.

ΠœΠΎΠ΄ΡƒΠ»ΡŒ

Как любая систСма, сСтка строится Π½Π° основС модуля. ΠœΠΎΠ΄ΡƒΠ»ΡŒ Π² ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊ сСткС β€” это нСкая минимальная Π΅Π΄ΠΈΠ½ΠΈΡ†Π° измСрСния, которая лоТится Π² основу всСй структуры.

ΠŸΡ€ΠΈ построСнии сСтки ΠΌΡ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ 6 px, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π² Π½Ρ‘ΠΌ всС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ сСтки ΠΊΡ€Π°Ρ‚Π½Ρ‹ 6 px (Π² ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ ΠΊΡ€Π°ΠΉΠ½ΠΈΡ… случаях эти 6 px ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π°Π΄Π²ΠΎΠ΅, ΠΈ получаСтся 3 px).

Высота ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ β€” ΠΊΡ€Π°Ρ‚Π½Π°.

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ β€” ΠΊΡ€Π°Ρ‚Π½Ρ‹.

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ ΠΎΡ‚ ΠΊΡ€Π°Π΅Π² β€” ΠΊΡ€Π°Ρ‚Π½Ρ‹.

Π’ΠΎ Π΅ΡΡ‚ΡŒ получаСтся, высота строки любого тСкстового Π±Π»ΠΎΠΊΠ° ΠΊΡ€Π°Ρ‚Π½Π° Π»ΠΈΠ±ΠΎ 6 Π»ΠΈΠ±ΠΎ 3 px. Π—Π° счёт этого вся систСма замыкаСтся Π½Π° сСбС ΠΈ становится ΠΎΡ‡Π΅Π½ΡŒ Ρ†Π΅Π»ΡŒΠ½ΠΎΠΉ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, это экономит врСмя ΠΈ позволяСт Π½Π΅ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΡ‚ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Π±Π»ΠΎΠΊ β€” Π²Ρ‹ просто Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚Π΅ Π΅Π³ΠΎ сначала ΠΏΠΎ большой сСткС (ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ), ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΠΎ малСнькой (ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ).

Колонки:

Π­Ρ‚ΠΎ основныС ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ сСтки. НиТС Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ сСтку, Π³Π΄Π΅ фиолСтовая полоса ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΎΠ΄Π½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ.

ΠœΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹:

Π£Π·ΠΊΠΈΠ΅ ΠΆΡ‘Π»Ρ‚Ρ‹Π΅ полоски ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ„ΠΎΡ€ΠΌΠΎΠΉ ΠΌΠΈΠΊΡ€ΠΎΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π°ΡŽΡ‚ сСткС Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΎΠ·Π΄ΡƒΡ…Π°.

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

Π‘Ρ‚ΠΎΠ»Π±Ρ†Ρ‹:

Они ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ ΠΏΡ€ΠΎΡ‡Π½ΡƒΡŽ структуру, которая Π΄Π°Ρ‘Ρ‚ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ порядок ΠΈΠ·-Π·Π° выравнивания.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ 12-колоночная сСтка считаСтся самой ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° Ρ…ΠΎΡ€ΠΎΡˆΠΎ дСлится Π½Π° Ρ‚Ρ€ΠΈ, Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΈ ΡˆΠ΅ΡΡ‚ΡŒ столбцов, Ρ‡Ρ‚ΠΎ достаточно Π³ΠΈΠ±ΠΊΠΎ ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

1024–1400 px β€” это стандартная 12-колоночная сСтка Π½Π° дСсктопС.

На ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π΅ количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ Π² Π΄Π²Π° Ρ€Π°Π·Π°. Π­Ρ‚ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ достаточно ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠΌ. Как ΠΈ Π² случаС с ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ устройствами, всё становится ΠΌΠ΅Π½Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹ΠΌ, Π±ΠΎΠ»Π΅Π΅ спокойным ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ.

Π’Π°ΠΊΠΆΠ΅ ΡŽΠ·Π°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ считаСтся чСтырёхколоночная сСтка.

Она простая ΠΈ надёТная, Π½ΠΎ ΠΈΠ·-Π·Π° симмСтричности ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ скучновато.

Врёхколоночная сСтка β€” Π±ΠΎΠ»Π΅Π΅ смСлый Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.

Π’ случаС использования асиммСтричной сСтки Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·ΡƒΠΌΠ½ΠΎ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ баланс для своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹Π΅ Π²Ρ‹ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ сайтов

Π‘Ρ‚ΠΎΠΈΡ‚ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ высота строки Π½Π°Π±ΠΎΡ€Π½ΠΎΠ³ΠΎ тСкста Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π²Π½Π° ΠΈΠ»ΠΈ большС отступов ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ. Если Ρ‚Π°ΠΊ происходит, Ρ‚ΠΎ скорСС всСго, Π²ΠΎ врСмя вёрстки Π±ΡƒΠ΄Π΅Ρ‚ тяТСло Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с этой сСткой ΠΈ Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‹ΠΏΠ°Ρ‚ΡŒΡΡ рядом с Π΄Ρ€ΡƒΠ³ΠΈΠΌ.

На ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах Π΅ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ интСрСсный ΠΌΠΎΠΌΠ΅Π½Ρ‚ β€” Ссли Π² вашСй Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΆΠΈΡ€Π½Ρ‹Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ Π²Π°ΠΌ хочСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Ρ‘ Π±ΠΎΠ³Π°Ρ‡Π΅ с большим количСством Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠΉ ΠΈ контрастов, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ уровня ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ°ΠΊ Π½Π°Π±ΠΎΡ€Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° ΡΡ‚ΡƒΠΏΠ΅Π½ΡŒ ΠΏΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ шкалС Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ²) ΠΈ Π·Π° счёт своСй насыщСнности ΠΎΠ½ Ρ‚Π°ΠΊ ΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.

ЭкспСримСнт:

Π—Π΄Π΅ΡΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ избавился ΠΎΡ‚ ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹Ρ… отступов ΠΈ просто ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠ» вСсь экран Π½Π° 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π½Π° дСсктопС β€” ΠΈ Π½Π° мСньшСС количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… устройствах. Π­Ρ‚ΠΎ Π΄Π°Ρ‘Ρ‚ интСрСсный эффСкт.

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

Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π²Ρ‹ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ….

Π­Ρ‚ΠΎ обусловлСно Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ всС ΡƒΠΆΠ΅ Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свой ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊ малСньким устройствам. Π’Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Π»ΠΎΠ³ΠΈΠΊΠ° упрощаСтся.

ΠœΠΈΠ½ΡƒΡΡ‹:

  • МСлко.

Π’ΠΎ Π΅ΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΠ΄ 1024 px, Π½Π΅ сильно ΡΡ‚Π°Ρ€Π°ΡΡΡŒ ΠΏΡ€ΠΎΠ³Π½ΠΎΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ с Π½ΠΈΠΌ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Ρ‘Ρ‚ Π½Π° Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… 1600 px ΠΈ большС. ВыдСляя просто ΠΊΠ°ΠΊΡƒΡŽ-Ρ‚ΠΎ Π·ΠΎΠ½Ρƒ ΠΏΠΎΠ΄ Π΄ΠΈΠ·Π°ΠΉΠ½, всю Π»ΠΎΠ³ΠΈΠΊΡƒ, красоту ΠΈ вёрстку, Π° ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ нСосмыслСнныС куски пространства.

НС Π½Π°Π΄ΠΎ Ρ‚Π°ΠΊ!

ΠŸΡƒΡΡ‚ΠΎΠ΅ пространство β€” это ΠΌΠΎΡ‰Π½Ρ‹ΠΉ инструмСнт Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, управлСния Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ΠΌ, ΠΈ ΠΎΠ½ΠΎ всСгда Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ осознанным. НС оставляйтС «висящиС ΡƒΡˆΠΈΒ» ΠΏΠΎ краям.

  • ΠŸΠ»Ρ‹Π²Ρ‘Ρ‚ строка.

Π’Π°ΠΊΠΎΠ΅ случаСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‰Π°ΡŽΡ‚ ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒΡΡ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ количСства Π·Π½Π°ΠΊΠΎΠ² Π² строкС. Π—Π° счёт этого ΠΌΠ°ΠΊΠ΅Ρ‚ становится растянутым ΠΈ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΌ. Π—Π°Π΄Π°Ρ‡Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π² Π΄Π°Π½Π½ΠΎΠΌ случаС β€” Π½Π΅ густо ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ всё ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, Π° всё-Ρ‚Π°ΠΊΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ тСкст Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

НСт Π½ΠΈΡ‡Π΅Π³ΠΎ ΡΡ‚Ρ€Π°ΡˆΠ½ΠΎΠ³ΠΎ, Ссли ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ сСтки Ρƒ вас осознанно всё пространство ΠΈ просто Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ тСкстовой Π±Π»ΠΎΠΊ упираСтся Π² Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ стСну, пСрСстаСт Π΄Π΅Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈ остаётся Π² Ρ‚ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ символов Π² строкС, ΠΊΠΎΠ³Π΄Π° это ΡƒΠ΄ΠΎΠ±Π½ΠΎ читаСтся.

Другая распространённая ошибка, ΠΊΠΎΠ³Π΄Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΈΠΌΠ΅Π΅Ρ‚ свободноС пространство ΠΈ Ρ‚ΡƒΡ‚ ΠΆΠ΅ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ всё Π·Π°ΠΏΠΎΠ»ΠΎΠ½ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ.

Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²ΠΈΠ΄ΠΈΡ‚ Ρ‚Π°ΠΊΠΎΠ΅ ΠΎΠ±ΠΈΠ»ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π΅ΠΌΡƒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ слоТно Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, Π³Π΄Π΅ ΠΈ Ρ‡Ρ‚ΠΎ Ρ‚ΡƒΡ‚ Π³Π»Π°Π²Π½ΠΎΠ΅, Π³Π΄Π΅ Ρ‚ΠΎΡ‡ΠΊΠ° Π²Ρ…ΠΎΠ΄Π° ΠΈ Π·Π° Ρ‡Ρ‚ΠΎ Π·Π°Ρ†Π΅ΠΏΠΈΡ‚ΡŒΡΡ взгляду, Π½ΠΎ Ρƒ Π½Π΅Π³ΠΎ ΠΈ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ТСлания этого Π΄Π΅Π»Π°Ρ‚ΡŒ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²ΠΈΠ΄ΠΈΡ‚ слишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ страницу.

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки Π½Π° инструмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ сСтки:

  • grid.guide;
  • gridcalculator.dk;
  • pearsonified.com;
  • gridlover.net;
  • archetypeapp.com;
  • hihayk.github.io/modulator.

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ

/ Π‘Π΅Ρ€Π³Π΅ΠΉ Нуйкин / Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ Вас Π΄Ρ€ΡƒΠ·ΡŒΡ.

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

ΠŸΠΎΡΡ‚Π°Ρ€Π°ΡŽΡΡŒ Π² сСгодняшнСм ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка, ΠΊΠ°ΠΊΠΈΠ΅ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΎΠ½Π° выполняСт, ΠΊΠ°ΠΊ Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ самому, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°ΠΆΡƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ создания ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта Π½Π° Π΅Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Π’ качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° я создал нСслоТный ΠΌΠ°ΠΊΠ΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±Π»ΠΎΠ³Π°. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ всС ΠΌΠ΅Π»ΠΎΡ‡ΠΈ создания Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Ρ€Π°ΠΌΠΊΠ°Ρ… этой ΡΡ‚Π°Ρ‚ΡŒΠΈ я Π½Π΅ Π±ΡƒΠ΄Ρƒ, ΠΏΠΎΠΊΠ°ΠΆΡƒ лишь ΠΎΠ±Ρ‰ΠΈΠΉ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСтку для создания Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка?

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

ΠœΠΎΠ΄ΡƒΠ»Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ измСрСния, ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡƒΡŽ для придания соразмСрности ΠΈ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

НавСрноС, слишком Π·Π°ΡƒΠΌΠ½ΠΎ написал. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΡŽ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ простым языком, Π² нашСм ΠΌΠΈΡ€Π΅ достаточно ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Ρ… сСток, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, кирпичная стСна Π² ΠΏΠΎΠ»ΠΊΠΈΡ€ΠΏΠΈΡ‡Π° ΠΎΠ½Π° ΠΊΠ°ΠΊ Ρ€Π°Π· Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСткой, Π° ΠΊΠΈΡ€ΠΏΠΈΡ‡ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΌ.

ΠŸΠ»ΠΈΡ‚ΠΊΠ° Π² Π²Π°Π½Π½ΠΎΠΉ ΠΊΠΎΠΌΠ½Π°Ρ‚Π΅, Ρ‚ΠΎΠΆΠ΅, вся стСна ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка (ΠΏΡ€ΠΈ условии, Ρ‡Ρ‚ΠΎ вся ΠΏΠ»ΠΈΡ‚ΠΊΠ° ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°), Π° ΠΎΠ΄Π½Π° ΠΏΠ»ΠΈΡ‚ΠΊΠ° это ΠΌΠΎΠ΄ΡƒΠ»ΡŒ ΠΈΠ»ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ†Π° измСрСния ΠΊΠ°ΠΊ Π² нашСм случаС.

Π”ΡƒΠΌΠ°ΡŽ Ρ‚Π°ΠΊ Π±ΠΎΠ»Π΅Π΅ понятно, ΠΈΡ‚Π°ΠΊ ΠΈΠ΄Π΅ΠΌ дальшС, Π΄Π°Π²Π°ΠΉΡ‚Π΅ опрСдСлимся, для Ρ‡Π΅Π³ΠΎ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° сСтка.

Для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ½Π° сСтка, ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΎΠ½Π° выполняСт?

Π‘Π΅Ρ‚ΠΊΠ° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° для быстрой Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°, Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта ΠΈΠ»ΠΈ прилоТСния. Она Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ экономит врСмя Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ, структурированиС, ΡˆΠ°Π±Π»ΠΎΠ½ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π£Π±ΠΈΡ€Π°Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Ρ€ΡƒΡ‚ΠΈΠ½Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΡŽ Π±Π»ΠΎΠΊΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π£ΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ, Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ Ρ‚Π°ΠΊ ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π² Ρ†Π΅Π»ΠΎΠΌ.

  • УскоряСт процСсс Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Нам трСбуСтся Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньшС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ мСста для Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.
  • ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. ВсС элСмСнты Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π° ΠΏΠΎ сСткС, ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.
  • ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΡˆΠ°Π±Π»ΠΎΠ½ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π² ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку, ΠΌΡ‹ создаСм ΡˆΠ°Π±Π»ΠΎΠ½Π½ΡƒΡŽ основу для всСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, Ρ‚Π°ΠΊ ΠΈ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ Π½Π° Π±ΡƒΠ΄ΡƒΡ‰Π΅Π΅. А Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСм возмоТности быстрой ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ.
  • Π˜ΡΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ошибки. Π‘Π΅Ρ‚ΠΊΠ° позволяСт ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ряда самых ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ошибок с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, структурированиСм, Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΈ отступами ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠΎΠ².
  • ЯвляСтся Π΅Π΄ΠΈΠ½ΠΎΠΉ систСмой ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ. Благодаря модулям всС элСмСнты Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ ΠΈ соизмСримы ΠΌΠ΅ΠΆΠ΄Ρƒ собой.
  • Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈ упорядочиваСт. Благодаря ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСткС ΠΌΠ°ΠΊΠ΅Ρ‚ становится Π±ΠΎΠ»Π΅Π΅ структурированный ΠΈ упорядочСнный, Π΄ΠΈΠ·Π°ΠΉΠ½ воспринимаСтся Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½Ρ‹ΠΌ.
  • ΠŸΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π±ΠΎΠ»Π΅Π΅ эстСтичному Π²ΠΈΠ΄Ρƒ. ЧСткая ΠΈ логичСская структура ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ сайта ΠΏΡ€ΠΈΠ΄Π°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ эстСтичный Π²ΠΈΠ΄.
  • ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² дальнСйшСй Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠΌ участникам ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π”ΠΈΠ·Π°ΠΉΠ½, построСнный посрСдством ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ систСмы вСрстки, Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π³Ρ‡Π΅, Π½Π΅ΠΆΠ΅Π»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚, построСнный Π±Π΅Π· сСтки. Π‘Π΅Ρ‚ΠΊΠ° Π΄Π°Π΅Ρ‚ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚ΠΈΠ·Π°Ρ†ΠΈΡŽ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ, ускоряСт процСсс вСрстки. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Π»Π΅Π³Ρ‡Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ большой ΠΊΠΎΠΌΠ°Π½Π΄Π΅ Π½Π°Π΄ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ. А Ρ‚Π°ΠΊ ΠΆΠ΅ позволяСт Π³ΠΎΡ€Π°Π·Π΄ΠΎ быстрСС Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ участникам ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π§Ρ‚ΠΎ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΡŽ Π±ΠΎΠ»Π΅Π΅ цСлостного Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹.

Π‘Ρ‚Ρ€ΠΎΠΈΠΌ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ ΠΏΠ΅Ρ€Π΅Π΄ Π½Π°Ρ‡Π°Π»ΠΎΠΌ создания ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта. ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅ΠΌΡΡ, ΠΏΠΎΠ΄ ΠΊΠ°ΠΊΠΎΠ΅ минимальноС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΡ‹ создаСм ΠΌΠ°ΠΊΠ΅Ρ‚.

ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ Ρ‡Π°Ρ‰Π΅ всСго ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ΡΡ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° Π² 1024Ρ…768 ΠΈ 1280Ρ…720 пиксСлСй. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Ρ‹ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, всС ΠΊΠ°ΠΊ всСгда зависит ΠΎΡ‚ стоящСй ΠΏΠ΅Ρ€Π΅Π΄ Π’Π°ΠΌΠΈ Π·Π°Π΄Π°Ρ‡ΠΈ. Π˜ΡΡ…ΠΎΠ΄Ρ ΠΈΠ· этих ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², Π½Π°ΠΌ ΠΈ придСтся ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта. Из Π½ΠΈΡ… Π½Π°ΠΌ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Π° ΡˆΠΈΡ€ΠΈΠ½Π°, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ фиксирована Ρƒ сайтов, Π° высота Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚ Π²Π°Ρ€ΡŒΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ·-Π·Π° наполнСния сайта.

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС я создам холст с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² 1000 пиксСлСй ΠΏΠΎΠ΄ минимальноС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π² 1024Ρ…768 пиксСлСй. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ сдСлаю Π² 960 пиксСлСй, ΠΏΠΎ 20 пиксСлСй отступы ΠΏΠΎ краям (ΡˆΠΈΡ€ΠΈΠ½Π° Π½Π°ΡˆΠΈΡ… ΠΏΠΎΠ»Π΅ΠΉ).

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²ΡƒΡŽ сСтку

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

ΠœΠ΅ΠΆΡΡ‚Ρ€ΠΎΡ‡Π½Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Β ( Π² css line‑height) ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒΒ Π΄Π²ΡƒΠΌΡ способами:

  1. Π Π°Π·ΠΌΠ΅Ρ€ основного ΡˆΡ€ΠΈΡ„Ρ‚Π° для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (16ΠΏΡ‚.) / 2 + Ρ€Π°Π·ΠΌΠ΅Ρ€ основного ΡˆΡ€ΠΈΡ„Ρ‚Π° для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (16ΠΏΡ‚.
    ) = 24ΠΏΡ‚.
  2. Π Π°Π·ΠΌΠ΅Ρ€ основного ΡˆΡ€ΠΈΡ„Ρ‚Π° для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (16ΠΏΡ‚.) xΒ 1.5 = 24ΠΏΡ‚.

Π‘Ρ‚Ρ€ΠΎΠΈΠΌ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ‡Π»Π΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ сСтку

Π’Π΅ΠΏΠ΅Ρ€ΡŒ самоС интСрСсноС, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ сСтку. Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ опрСдСляСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ нашСго модуля. Π˜Ρ‚Π°ΠΊ, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ эту ΡΠ°ΠΌΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, ΠΊΠ°ΠΊ это ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.

  1. Если Π½Π° сайтС планируСтся присутствиС Π±Π»ΠΎΠΊΠ° с постоянной Π²Π΅Π»ΠΈΡ‡ΠΈΠ½ΠΎΠΉ (Π±Π°Π½Π½Π΅Ρ€Π°, Π²ΠΈΠ΄Π΅ΠΎ, ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΈ Ρ‚.Π΄.). Π­Ρ‚ΠΈ Π±Π»ΠΎΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ фиксированныС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈ Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя нСсколько ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, зная ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ модуля, достаточно ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π±Π»ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ.
  2. Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ это ΠΊΠΎΠ³Π΄Π° Ρƒ Вас Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡ€Π°Ρ‚ΡŒΡΡ. НапримСр, ΠΏΠΎ Π·Π°Π΄Π°Ρ‡Π΅ стоит Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π² линию Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ‚Π΅Π»Π° сайта ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ количСство Π±Π»ΠΎΠΊΠΎΠ², скаТСм 6. Π’ΠΎΠ³Π΄Π°, зная этот ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΈΠΊΠΈΠ½ΡƒΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ Ρ‚Π°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π΄Π²Π° модуля ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅. БоотвСтствСнно Π½Π°ΠΌ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ 12 колоночная сСтка.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ модулями ΠΈΠ»ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ. Π― Π² основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ€ строки ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²ΠΎΠΉ сСтки, Π² Π΄Π°Π½Π½ΠΎΠΌ случаС это 18 пиксСлСй.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρƒ нас получаСтся ΡˆΠΈΡ€ΠΈΠ½Π° модуля равная 63,5 ΠΎΠΊΡ€ΡƒΠ³Π»ΠΈΠΌ Π΄ΠΎ 63 пиксСлСй. Π£ нас остаСтся ΠΏΠΎ 0,5 пиксСлСй Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ ΠΈΡ… Ρƒ нас 12 ΠΈΡ‚ΠΎΠ³ΠΎ 6 пиксСлСй, раскидаСм ΠΈΡ… Π½Π° поля ΠΏΠΎ 3 пиксСля, Ρ‚Π΅ΠΌ самым наши поля увСличатся ΠΈ станут Ρ€Π°Π²Π½Ρ‹Π΅ 23 пиксСлям, Π° Π½Π΅ 20, соотвСтствСнно ΠΈ контСнтная Ρ‡Π°ΡΡ‚ΡŒ станСт равная 954 пикс.

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

Π”Π΅Π»Π°Π΅ΠΌ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Ρ‡Π»Π΅Π½Π΅Π½ΠΈΠ΅

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

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π°

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

ΠžΡ„ΠΎΡ€ΠΌΠ»ΡΠ΅ΠΌ, Π΄Π΅Ρ‚Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌ, ΠΏΡ€ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ

ИмСя ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ структуру Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π±Π»ΠΎΠΊΠΎΠ² сайта. МоТно ΠΏΡ€ΠΈΠΊΠΈΠ½ΡƒΡ‚ΡŒ удобство, ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ, ΠΈ Ссли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ быстро ΠΏΠΎΠ΄ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ. Π”Π°Π»Π΅Π΅ послС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ нас устраиваСт ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ отрисовкС самого Π΄ΠΈΠ·Π°ΠΉΠ½Π°, прорисовкС Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ.

А Π²ΠΎΡ‚ Ρ‚Π°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚ выглядит ΡƒΠΆΠ΅ Π±Π΅Π· ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки Π² ΠΈΡ‚ΠΎΠ³Π΅ послС всСй ΠΏΡ€ΠΎΠ΄Π΅Π»Π°Π½Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹.

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

И Π² Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Ρ…ΠΎΡ‡Ρƒ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСтки Π² своих Ρ€Π°Π±ΠΎΡ‚Π°Ρ… ΠΈΠ»ΠΈ Π½Π΅Ρ‚ Π΄Π΅Π»ΠΎ Π’Π°ΡˆΠ΅, я лишь Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ…ΠΎΡ‚Π΅Π» Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ± этом инструмСнтС Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠ½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² Ρ€Π°Π±ΠΎΡ‚Π΅.

НиТС ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΌ процСссом создания Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΎΡ‚Β ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π΄ΠΎ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎΒ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта ΠΈΠ· этой ΡΡ‚Π°Ρ‚ΡŒΠΈ.

Π’ΠΈΠ΄Π΅ΠΎ процСсс по созданию Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта с использованиСм ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки:

  • Π£Ρ€ΠΎΠΊ 1: Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° сайта Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅
  • Π£Ρ€ΠΎΠΊ 2: ΠŸΡ€ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ ΡˆΠ°ΠΏΠΊΡƒ, мСню, анонсы
  • Π£Ρ€ΠΎΠΊ 3: Π”ΠΎΠ΄Π΅Π»Ρ‹Π²Π°Π΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ сайта

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСтку Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

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

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ сСтка?

Π’Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Π½Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΈ ΠΎΠ½Π° смотрит Π½Π° вас, ΠΊΠ°ΠΊ чистый холст. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡƒΠ³Π°Ρ‚ΡŒ. Π‘ Ρ‡Π΅Π³ΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ? ΠšΡƒΠ΄Π° ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ? ΠšΡƒΠ΄Π° Π²Ρ‹ добавляСтС изобраТСния ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ? Π‘Π΅Ρ‚ΠΊΠ° β€” это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ для Π½Π°Ρ‡Π°Π»Π°.

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

‍

ЦСлСвая страница с сСткой ΠΈΠ· 12 столбцов (источник: Milo Studio)

‍

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

‍

πŸ€‘ Π‘Π•Π‘ΠŸΠ›ΠΠ’ΠΠΠ― мастСрская Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° πŸ‘‰ Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ сСйчас! πŸ€‘

ΠžΡ‚ΠΊΡƒΠ΄Π° бСрутся сСтки?

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

‍

Π Π°Π½Π½ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ рукописи, ΠΎΠΊ. 1100–1160 (источник: Medieval Books)

‍

Π§Ρ‚ΠΎΠ±Ρ‹ Π³Π»ΡƒΠ±ΠΆΠ΅ ΠΏΠΎΠ³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΡΡ Π² ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ ΠΏΠΎΠ»ΠΈΠ³Ρ€Π°Ρ„ΠΈΠΈ, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с нашим постом Β«Π˜ΡΡ‚ΠΎΡ€ΠΈΡ графичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π°Β».

ΠŸΠ΅Ρ€Π΅Π½Π΅ΡΠ΅ΠΌΡΡ Π² ΠΏΡ€ΠΎΠΌΡ‹ΡˆΠ»Π΅Π½Π½ΡƒΡŽ Ρ€Π΅Π²ΠΎΠ»ΡŽΡ†ΠΈΡŽ ΠΈ Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ массового производства, Π³Π°Π·Π΅Ρ‚Ρ‹, ΠΏΠ»Π°ΠΊΠ°Ρ‚Ρ‹, Ρ€Π΅ΠΊΠ»Π°ΠΌΠ° ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ ΠΏΠ΅Ρ‡Π°Ρ‚Π°Π»ΠΈΡΡŒ Π² ΠΈΠ·ΠΎΠ±ΠΈΠ»ΠΈΠΈ.

‍

Π“Π°Π·Π΅Ρ‚Π° The New York Times, 29 июля 1914 Π³.

‍

Π’ 20-ΠΌ Π²Π΅ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π―Π½ Π§ΠΈΡ…ΠΎΠ»ΡŒΠ΄ ΠΈ Π™ΠΎΠ·Π΅Ρ„ ΠœΡŽΠ»Π»Π΅Ρ€-Π‘Ρ€ΠΎΠΊΠΌΠ°Π½, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π½ΠΎΠ²Ρ‹Π΅ систСмы сСтки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стали Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ сСгодня ΠΊΠ°ΠΊ ΡˆΠ²Π΅ΠΉΡ†Π°Ρ€ΡΠΊΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ ΠΈΠ»ΠΈ ΡˆΠ²Π΅ΠΉΡ†Π°Ρ€ΡΠΊΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ. ΠœΠ΅ΠΆΠ΄ΡƒΠ½Π°Ρ€ΠΎΠ΄Π½Ρ‹ΠΉ типографский ΡΡ‚ΠΈΠ»ΡŒ. Они Π²Π½Π΅Π΄Ρ€ΠΈΠ»ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ с большим количСством ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ².

‍

Книга ΠΏΠΎ систСмам сСток (источник)

‍

ΠŸΠΎΡ‡Π΅ΠΌΡƒ сСтки Π²Π°ΠΆΠ½Ρ‹ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

Π‘Π΅Ρ‚ΠΊΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ ΠΈ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ. Π‘Π΅Π· Π½ΠΈΡ… Π²Ρ‹ Π±Ρ‹ Π½Π΅ Π·Π½Π°Π»ΠΈ, Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Нам Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ создавали Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π½Π°Π», ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π²Π΅Π±-сайту ΠΈ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΅ΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ.

‍

Π‘Π΅Ρ‚ΠΊΠ° ΠΈΠ· 5 столбцов (источник: Hrvoje Grubisic)

‍

Π‘Π΅Ρ‚ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Π°Ρ вСрсия Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницы ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколько столбцов для размСщСния тСкста ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ достаточно Π³ΠΈΠ±ΠΊΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒΡΡ Π΄ΠΎ 2–3 столбцов Π½Π° столС ΠΈ 1 столбца Π½Π° мобильном устройствС. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ мобильная сСтка становится слоТСнной, ΠΊΠ°ΠΊ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка с 1 столбцом Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

‍

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ адаптивности сСток

‍

Π’ΠΈΠΏΡ‹ сСток

БущСствуСт 5 основных Ρ‚ΠΈΠΏΠΎΠ² сСток. НСкоторыС ΠΈΠ· Π½ΠΈΡ… Π»ΡƒΡ‡ΡˆΠ΅ подходят для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‡Π΅ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠ΅, Π½ΠΎ Π²Ρ‹, вСроятно, использовали всС 5 Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ своСй дизайнСрской ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Ρ‹.

Базовая сСтка ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π±Π°Π·ΠΎΠ²ΠΎΠΉ сСтки

‍

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

‍

Π‘Π΅Ρ‚ΠΊΠ° рукописСй ΠŸΡ€ΠΈΠΌΠ΅Ρ€ сСтки рукописСй

‍

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

‍

Π‘Π΅Ρ‚ΠΊΠ° столбцов ΠŸΡ€ΠΈΠΌΠ΅Ρ€ сСтки столбцов

‍

Π‘Π΅Ρ‚ΠΊΠΈ столбцов ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ тСкст, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ. Для Π²Π΅Π±-сайтов Ρƒ вас ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ 2 Π΄ΠΎ 12 ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ 16 столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницы. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ тСкст ΠΈ изобраТСния Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΎΠ΄Π½ΠΎΠΌ столбцС ΠΈΠ»ΠΈ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… столбцах. ΠŸΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚Π²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами называСтся ΠΆΠ΅Π»ΠΎΠ±Π°ΠΌΠΈ, ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΏΠΎ всСй Π΄Π»ΠΈΠ½Π΅.

‍

ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами

‍

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

‍

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ асиммСтричной сСтки столбцов (источник: A Beautiful Mess)

‍

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки

‍

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСтки Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ сСткам столбцов, Π½ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ строк. Π’Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π³Π°Π·Π΅Ρ‚Ρ‹ ΠΈ ΠΆΡƒΡ€Π½Π°Π»Ρ‹ довольно часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСтки для ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½ΠΎ ΠΈΡ… Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π΅Π±-сайта ΠΈΠ»ΠΈ прилоТСния, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ сСтки ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ².

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Everlane ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку для ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ Π²Ρ‹Π±ΠΎΡ€Π° дТинсовой Ρ‚ΠΊΠ°Π½ΠΈ.

‍

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ (источник: Everlane)

‍

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

‍

Главная страница YouTube являСтся ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки

Β 

‍

Π˜Π΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΠ°Ρ сСтка ΠŸΡ€ΠΈΠΌΠ΅Ρ€ иСрархичСской сСтки

‍

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

НовостныС сайты ΠΈ сайты, связанныС со БМИ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ этот Ρ‚ΠΈΠΏ сСтки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΡΡ‚Π°Ρ‚ΡŒΡΠΌ ΠΈ ΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ большС, Ρ‡Π΅ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. ВзглянитС Π½Π° этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ The New York Times ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ сСтку Π½Π° своСй домашнСй страницС.

‍

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ иСрархичСской сСтки Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ (источник: The New York Times)

‍

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ иСрархия влияСт Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с нашСй ΡΡ‚Π°Ρ‚ΡŒΠ΅ΠΉ «ПониманиС ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Β».

‍

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сСтку Π² Adobe XD

Π’ Adobe XD Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ простой столбСц для Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… страниц. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΈ ΠΏΠΎΠ΄ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠΌ Β«Π‘Π΅Ρ‚ΠΊΠ°Β» установитС Ρ„Π»Π°ΠΆΠΎΠΊ Β«Π‘Π΅Ρ‚ΠΊΠ°Β», Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«ΠœΠ°ΠΊΠ΅Ρ‚Β».

‍

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сСтку столбцов Π² Adobe XD

‍

ΠžΡ‚Ρ‚ΡƒΠ΄Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтку ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ количСство столбцов, ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΆΠ΅Π»ΠΎΠ±Π°, ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбца ΠΈ Π΄Π°ΠΆΠ΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Π±Ρ‹Π»Π° ваша сСтка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Π±ΡƒΠ΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

‍

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ использованию сСток

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ сСтка, ΠΊΠ°ΠΊΠΈΠ΅ Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ‚ΠΈΠΏΡ‹ сСток ΠΈ ΡƒΠΌΠ΅Π΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои собствСнныС, Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим нСсколько совСтов ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

‍

ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ сСткС ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ

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

‍

НС Π±ΠΎΠΉΡ‚Π΅ΡΡŒ ΡΠ»ΠΎΠΌΠ°Ρ‚ΡŒ сСтку ΠΏΡ€ΠΈ нСобходимости

НовыС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ сСбя ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΈΠ΄Π΅Π΅ΠΉ использования сСтки, Π½ΠΎ Π²Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ этого Π΄Π΅Π»Π°Ρ‚ΡŒ. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ создали свою сСтку, Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ»ΠΎΠΌΠ°Ρ‚ΡŒ! Но, ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ это Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ, ΠΈ Ρƒ Π²Π°ΡˆΠΈΡ… дизайнСрских Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹. Π§Π΅ΠΌ большС Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ сСтку, Ρ‚Π΅ΠΌ большС Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ это руководство, ΠΈ это Π½Π° самом Π΄Π΅Π»Π΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ быстрСС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅.

‍

НС Π±ΠΎΠΉΡ‚Π΅ΡΡŒ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ²

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

‍

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ систСму сСток 960

БистСма сСток 960 β€” это ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, прСдоставляя часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π½Π° основС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ 960 пиксСлСй. Π•ΡΡ‚ΡŒ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°: 12 ΠΈ 16 столбцов.

Π‘Π΅Ρ‚ΠΊΠ° 960 ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ структуру:

  • ΠžΠ±Ρ‰Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° 960 пиксСлСй
  • ΠœΠ°ΠΊΡΠΈΠΌΡƒΠΌ 12 столбцов, ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ столбца 60 пиксСлСй0202
  • ΠžΠ±Ρ‰Π°Ρ ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ содСрТимого составляСт 940 пиксСлСй

12-колоночная сСтка обСспСчиваСт Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСтку ΠΈΠ· 12 столбцов для добавлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠ· 3 столбцов.

‍

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ элСмСнтов, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½Ρ‹Ρ… Π½Π° сСткС ΠΈΠ· 12 столбцов

‍

Анализ сСток Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π΅Π±-сайтов базовая сСтка. ΠšΠ°ΠΊΡƒΡŽ сСтку ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€? Они ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΅Π³ΠΎ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΎΠΏΡ‹Ρ‚Π°? Π’Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅, насколько ΡƒΡΠΏΠ΅ΡˆΠ½Π° (ΠΈΠ»ΠΈ Π½Π΅ΡƒΠ΄Π°Ρ‡Π½Π°) сСтка, Ρ‡Π΅ΠΌ большС Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π΅Π±-сайтах. ΠΠ°Π±Π»ΡŽΠ΄Π°ΠΉΡ‚Π΅, ΠΈΠ·ΡƒΡ‡Π°ΠΉΡ‚Π΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ для создания Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-сайта.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ сСтка влияСт Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, посмотритС это Π²ΠΈΠ΄Π΅ΠΎ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π Π°Π½ рассказываСт, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹.

‍

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅?

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, посмотритС наш ΠΊΠ°Π½Π°Π» Flux Π½Π° YouTube, Π³Π΄Π΅ ΠΌΡ‹ дСлимся Ρ‚ΠΎΠ½Π½Π°ΠΌΠΈ бСсплатной ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΡ‚Π°Ρ‚ΡŒ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³Π»ΡƒΠ±ΠΆΠ΅ ΠΏΠΎΠ³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΡΡ Π² ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ. ΠœΡ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ 3 Ρ€Π°Π·Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ³Π»ΡƒΠ±Π»ΡΡŽΡ‚ΡΡ Π² Π΄ΠΈΠ·Π°ΠΉΠ½, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΈ построСниС ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠ³ΠΎ Π²Π½Π΅ΡˆΡ‚Π°Ρ‚Π½ΠΎΠ³ΠΎ бизнСса. ΠœΡ‹ Π΄Π°Π΅ΠΌ Π²Π°ΠΌ ΠΏΡƒΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΈΠ·ΡƒΡ‡Π°Π»ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ Π½Π°Π²Ρ‹ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Π² вашСм Ρ‚Π΅ΠΌΠΏΠ΅.

Π’ ΠΊΠ½ΠΈΠ³Π΅ Β«ΠŸΡ€ΠΎΡ†Π΅ΡΡ Π²Π΅Π±-сайта ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒΡŽ 10Β 000 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ²Β» Π²Ρ‹ ΠΎΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚Π΅ для сСбя ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΉ процСсс создания красивых ΠΈ Ρ†Π΅Π½Π½Ρ‹Ρ… Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ вашим ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ стратСгичСских Ρ†Π΅Π»Π΅ΠΉ. ΠžΠ²Π»Π°Π΄Π΅ΠΉΡ‚Π΅ искусством ΠΈ стратСгиСй Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-сайтов ΠΈ ΠΏΠΎΠ²Ρ‹ΡΡŒΡ‚Π΅ Ρ†Π΅Π½Π½ΠΎΡΡ‚ΡŒ своих услуг, Π° Ρ‚Π°ΠΊΠΆΠ΅ свои ставки.

На мастСр-классС Webflow Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Webflow для быстрого создания собствСнных ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-сайтов, Π½Π΅ изучая ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. ΠžΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡ‚Π΅ΡΡŒ ΠΎΡ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… шаблонов, восстановитС свою Ρ‚Π²ΠΎΡ€Ρ‡Π΅ΡΠΊΡƒΡŽ свободу ΠΈ Π²ΠΎΠΏΠ»ΠΎΡ‚ΠΈΡ‚Π΅ Π² Тизнь свои Π»ΡƒΡ‡ΡˆΠΈΠ΅ творСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΌΠΎΡ‰Π½ΠΎΠ³ΠΎ инструмСнта Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π’ «ШСстифигурном Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π΅-фрилансСрС» Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹ΠΉ бизнСс Π² качСствС фрилансСра ΠΌΠΎΠΆΠ½ΠΎ Π² любом мСстС, Π³Π΄Π΅ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΊ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Ρƒ. ΠœΡ‹ Π΄Π°Π΅ΠΌ Π²Π°ΠΌ Π΄ΠΎΡ€ΠΎΠΆΠ½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ постоянно ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚ΡŒ Ρ†Π΅Π½Π½Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ Π·Π°Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π½Π° Тизнь, занимаясь Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ.

30 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²Π΅Π±-сайтов с сСткой для вдохновСния

Π”ΠΈΠ·Π°ΠΉΠ½, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, UX, Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅, Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°
ΠŸΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° ΠΈΠ· 30 послСдних ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²Π΅Π±-сайтов с сСткой для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° сСтки

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

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

Π’ ΠΊΠΎΠ½Ρ†Π΅ этого поста ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚Π²Π΅Ρ‚ΠΈΠ»ΠΈ Π½Π° 3 самых распространСнных вопроса ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… сСтки.

ОбновлСниС: UI/UX Design Trends 2023 ΠΏΡ€ΠΈΠ·Π²Π°Π½Ρ‹ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ Π±ΠΎΠ»Π΅Π΅ смСлым, Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌ ΠΈ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹ΠΌ ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒ ΠΈΡ….

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ страниц с Π±Π»Π°Π³ΠΎΠ΄Π°Ρ€Π½ΠΎΡΡ‚ΡŒΡŽ
  • Π’Π΅Π±-сайты с Π±Π»ΠΎΡ‡Π½ΠΎΠΉ сСткой
  • Π’Π΅Π±-сайты с ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½Π½ΠΎΠΉ сСткой
  • Π’Π΅Π±-сайты с ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСткой
  • Π’Π΅Π±-сайты с иСрархичСской сСткой
Часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ вопросы ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… сСтки
  • Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ сСтки?
  • КакиС элСмСнты ΠΌΠ°ΠΊΠ΅Ρ‚Π° сСтки?
  • ΠŸΠΎΡ‡Π΅ΠΌΡƒ сСтки Π²Π°ΠΆΠ½Ρ‹ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅?

Π’Π΅Π±-сайты с Π±Π»ΠΎΡ‡Π½ΠΎΠΉ сСткой

ΠžΠ΄Π½ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Π°Ρ сСтка β€” это ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ°, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰Π°Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько элСмСнтов Π² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌ располоТСнии .

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

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΏΠ°Ρ€Ρƒ Π²Π΅Π±-сайтов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΡ… Π±Π»ΠΎΡ‡Π½ΡƒΡŽ сСтку.

БизнСс-сайт LCM Design

ЭлСктронная ΠΏΠΎΡ‡Ρ‚Π° MailBakery Π”ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³

Waka Waka World Furniture

БизнСс-сайт The Touch Agency

htmlΠ”ΠΎΠΌΠ°ΡˆΠ½ΡΡ страница Burger’s

Howdy Design Family

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΉ БизнСс-сайт

Β 

Π’Π΅Π±-сайты с ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½Π½ΠΎΠΉ сСткой

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ сСтки, нСсколько столбцов ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ большСС Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ ΠΈ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π° состоит ΠΈΠ· Π΄Π²ΡƒΡ… ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ столбцов с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ°ΠΌΠΈ .

Π­Ρ‚ΠΎ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ i для Π²Π΅Π±-сайтов с большим объСмом тСкста , Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Π±Π»ΠΎΠ³ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΎ позволяСт ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°Ρ‚ΡŒ большоС количСство тСкста ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ сСтку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, создав Π·ΠΎΠ½Ρ‹ для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ столбСц, Π° тСкст Π°Π±Π·Π°Ρ†Π° ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ β€” Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, насколько Π³ΠΈΠ±ΠΊΠΎΠΉ являСтся многоколоночная сСтка, Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ….

Π’ΠΈΠ½ΠΎΠ³Ρ€Π°Π΄Π½ΠΈΠΊ Π£Π°ΠΉΡ‚Ρ…ΠΎΠ»Π»

ΠŸΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Par Hasard

ΠŸΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Rekhchand Sahu

БизнСс-сайт Varex Imaging

БизнСс-сайт Black Estate

Π‘Π»ΠΎΠ³ новостСй MAPΒ 

Dynamit Web Π‘Π»ΠΎΠ³ Development Studio

Π’Π΅Ρ€ΡƒΡ…ΠΈΡ€ΠΎ Π―Π½Π°Π³ΠΈΡ…Π°Ρ€Π° ΠŸΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ

Β 

Modular Grid ΠœΠ°ΠΊΠ΅Ρ‚ Π’Π΅Π±-сайты

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ сСтки, ΠΊΠ°ΠΊ слСдуСт ΠΈΠ· названия, создаСт ΠΌΠΎΠ΄ΡƒΠ»ΠΈ, раздСляя страницу ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π½Π° столбцы ΠΈ строки .

Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π΅Ρ‰Π΅ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ, Ρ‡Π΅ΠΌ многоколоночная сСтка, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ . ΠœΡ‹ часто Π²ΠΈΠ΄ΠΈΠΌ использованиС ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сСтки Π½Π° Π΄ΠΎΠΌΠ°ΡˆΠ½ΠΈΡ… экранах ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠΎΠ»Π½ΡƒΡŽ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΈΠ»ΠΈ Π½Π° страницах ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ ΠΈ коллСкциях элСмСнтов Π½Π° Π²Π΅Π±-сайтах элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ.

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

Morefront Design Studio

 ЭкспСримСнты с Google

ΠŸΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Малики Π€Π°Π²Ρ€

Unheap

ΠŸΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Grundini

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠšΡ€Π°ΡΠ°Π²Ρ‡ΠΈΠΊΠ° Ѐрэнка

Книги Antenne

Β 

Π’Π΅Π±-сайты с иСрархичСской сСткой

Π˜Π΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ сСтки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ спонтанноС ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ΅ располоТСниС элСмСнтов Ρ€Π°Π·Π½ΠΎΠΉ высоты ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ для создания Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ .

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

Debut Art Agency

Mike McQuade Portfolio Design

Webflow Redis Ggency

Ayond Agency Portfolio

Salomon eCommerce Website

Часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ вопросы ΠΎ Grid Layouts

πŸ‘‰ Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ сСтки?

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

πŸ‘‰ КакиС элСмСнты ΠΌΠ°ΠΊΠ΅Ρ‚Π° сСтки?

НСзависимо ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° ΠΌΠ°ΠΊΠ΅Ρ‚Π° сСтки, всС сСтки состоят ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… элСмСнтов:

  • Колонки: Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ сСкции, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ высоту вашСй области содСрТимого. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 60-80 пиксСлСй ΠΈ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ вашСй сСтки.
  • Рядов: Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ участки сСтки.
  • ΠœΠΎΠ΄ΡƒΠ»ΠΈ: Когда столбцы ΠΈ строки ΠΏΠ΅Ρ€Π΅ΡΠ΅ΠΊΠ°ΡŽΡ‚ΡΡ, ΠΎΠ½ΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ пространства, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡƒΡŽ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΌ. Π­Ρ‚ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ слуТат для соотвСтствия вашим элСмСнтам ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.
  • Π–Π΅Π»ΠΎΠ±Π°: ΠŸΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚Π²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами ΠΈ рядами, Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‰Π΅Π΅ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ.
  • Поля: ΠŸΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚Π²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ внСшним пространством вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ.

πŸ‘‰ ΠŸΠΎΡ‡Π΅ΠΌΡƒ сСтки Π²Π°ΠΆΠ½Ρ‹ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅?

Π‘Π΅Ρ‚Ρ‡Π°Ρ‚Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ структуру ΠΈ Π»ΠΎΠ³ΠΈΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Π»Π΅Π³Ρ‡Π°ΡŽΡ‚ просмотр ΠΈ усвоСниС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ. Они ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ элСмСнты страницы Π½Π° основС ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… столбцов ΠΈ строк . Π­Ρ‚ΠΈ столбцы ΠΈ строки ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ свой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ согласованным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π² интСрфСйсС.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ΠΈ ΠΎΡ‡Π΅Π½ΡŒ Π³ΠΈΠ±ΠΊΠΈΠ΅. Пока ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ‚ Π² Ρ€Π°ΠΌΠΊΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ сСтку ΠΊΠ°ΠΊ ΡƒΠ³ΠΎΠ΄Π½ΠΎ .

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

Β 

Подводя ΠΈΡ‚ΠΎΠ³ΠΈ

БистСма сСток Π΄Π°Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΈΡΡ‚Π΅ΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ сбалансированным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Π­Ρ‚ΠΎ нСвСроятно простой, Π½ΠΎ эффСктивный ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ сканируСмый ΠΈ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ понравится вашим посСтитСлям. НадССмся, Ρ‡Ρ‚ΠΎ эти 30 ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²Π΅Π±-сайтов Π½Π° основС сСтки Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΠ»ΠΈ вас Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅Ρ€Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ прСимущСствами систСмы.

ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *