ВСрстаСм ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ: знакомство с Flexbox ΠΈ Grid

Знакомство с CSS-вёрсткой Π² 2018 Π³ΠΎΠ΄Ρƒ. РассказываСм, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Flexbox ΠΈ Grid для создания красивой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ старых ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ².

ОблоТка: ВСрстаСм ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ: знакомство с Flexbox ΠΈ Grid

РассказываСт ΠžΡ…Π°Π½Ρ Π­ΠΌΠΌΠ°Π½ΡƒΡΠ»ΡŒ

Π“Π΄Π΅-Ρ‚ΠΎ Π² 2012 ΠΈΠ»ΠΈ 2013 Π³ΠΎΠ΄Ρƒ я познакомился с Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ. ΠŸΠΎΡΡ‚Π΅ΠΏΠ΅Π½Π½ΠΎ я Π½Π°Ρ‡Π°Π» ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ это Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. ВскорС я понял, Ρ‡Ρ‚ΠΎ CSS ΠΏΡ€ΠΈΠ΄Π°Ρ‘Ρ‚ смысл ΠΌΠ½ΠΎΠ³ΠΈΠΌ Π²Π΅Ρ‰Π°ΠΌ, Π½ΠΎ Π½Π΅ создаёт Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ. БущСствуСт ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ…Π°ΠΊΠΎΠ², Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² Π½ΠΈΡ… слишком слоТно. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π² соврСмСнных стандартах, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠΎΠΉΠ΄Π΅Ρ‚ Ρ€Π΅Ρ‡ΡŒ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅, Ρ€Π°Π±ΠΎΡ‚Π΅ с Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ ΡƒΠ΄Π΅Π»ΠΈΠ»ΠΈ особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

Π§Ρ‚ΠΎ Π²Ρ‹Β ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ из этой ΡΡ‚Π°Ρ‚ΡŒΠΈ:

  • ΠΊΠ°ΠΊ Ρ€Π°Π½ΡŒΡˆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с CSS-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ;
  • Ρ€Π°Π·Π½ΠΈΡ†Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌΠΈ подходами и соврСмСнными стандартами;
  • ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с новыми стандартами (Flexbox ΠΈΒ Grid);
  • ΠΏΠΎΡ‡Π΅ΠΌΡƒ вас Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΎΠ»Π½ΠΎΠ²Π°Ρ‚ΡŒ эти соврСмСнныС стандарты.

Как Ρ€Π°Π½ΡŒΡˆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с CSS-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ

Π—Π°Π΄Π°Ρ‡Π°

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΡΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΡƒΠ΅ΠΌΒ Π²Π΅ΡΡŒΠΌΠ° ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΡƒΡŽ Π·Π°Π΄Π°Ρ‡Ρƒ: ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ страницу с двумя сСкциями β€” Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ панСлью ΠΈΒ Π·ΠΎΠ½ΠΎΠΉ с основным ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, ΡƒΒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… одинаковая высота, нСзависимо ΠΎΡ‚Β Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°?

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΒ Ρ‡Π΅ΠΌΡƒ мы стрСмимся:

Β 

Для начала я ΠΏΠΎΠΊΠ°ΠΆΡƒ,Β ΠΊΠ°ΠΊ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту Π·Π°Π΄Π°Ρ‡Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΡ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ².

1. Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ div с двумя элСмСнтами

НапримСр, <aside> ΠΈ

:

			<body>
  <aside>
    Lorem ipsum dolor sit amet.
  </aside>
  
  <main>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  </main>
</body>
		

ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ Π² main большС тСкста.

Π’Ρ‹Π΄Π΅Π»ΠΈΠΌ aside Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ Π±Ρ‹Π»ΠΎ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚ΡŒ:

			aside {
   color: #fff;
   background-color: #8cacea;
}
		

2. Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΎΠ±Π΅ сСкции рядом

Для этого напишСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

			aside {
  width: 25%;
}
main {
  width: 75%;
}
aside,
main{
  float: left;
}
		

Π­Ρ‚ΠΎΡ‚ ΡΡ‚ΠΈΠ»ΡŒ раздСляСт доступноС пространство Π²Β Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… пропорциях и устанавливаСт float для aside ΠΈ main.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π½Π΅Β Π·Π½Π°ΠΊΠΎΠΌ с float: это ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ старый способ пСрСмСщСния элСмСнтов Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ.

Как Π²ΠΈΠ΄Π½ΠΎ Π½Π°Β ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π²Ρ‹ΡˆΠ΅, Π·Π°Π΄Π°Ρ‡Π° всё Π΅Ρ‰Ρ‘ Π½Π΅Β Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π°Β β€” высота Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ нС совпадаСт с высотой основной Π·ΠΎΠ½Ρ‹. Π˜ΡΠΏΡ€Π°Π²ΠΈΠΌ это.

3. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚Ρ€ΡŽΠΊ с display: table

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, Π½Π°Π΄ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ display: table.

Если вы с ним Π½Π΅Β Π·Π½Π°ΠΊΠΎΠΌΡ‹, Ρ‚ΠΎΒ Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π½Π°Π΄ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ:

  1. Π”Π΅Π»Π°Π΅ΠΌ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ (в нашСм случаС элСмСнт body) Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ:body { display: table; }
  2. Π£Π±ΠΈΡ€Π°Π΅ΠΌ float ΠΈΒ Π΄Π΅Π»Π°Π΅ΠΌ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты aside ΠΈ main ячСйками Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹:aside, main{ display: table-cell; }

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ мы сдСлали это, Π·Π°Π΄Π°Ρ‡Ρƒ ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½Π½ΠΎΠΉ. ΠŸΠΎΒ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Ρ‚Π°ΠΊ Π΅Ρ‘Β Ρ€Π΅ΡˆΠ°Π»ΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅.

Π Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌΠΈΒ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°ΠΌΠΈ и соврСмСнными стандартами

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° у вас Π΅ΡΡ‚ΡŒ прСдставлСниС ΠΎΒ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ Ρ€Π΅ΡˆΠ°Π»ΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅, Π΄Π°Π²Π°ΠΉΡ‚Π΅ взглянСм, Π½Π°Β Ρ‡Ρ‚ΠΎ способны Flexbox ΠΈΒ Grid.

Flexbox ΠΈΒ GridΒ β€” это ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для CSS-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΡΠ²Π»ΡΡŽΡ‰ΠΈΠ΅ΡΡ соврСмСнными стандартами. Если Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ CSS-ΠΊΠΎΠ΄ Π½Π°Β Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅, Ρ‚ΠΎΒ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ ΠΈΡ….

РСшСниС Π·Π°Π΄Π°Ρ‡ΠΈ ΡΒ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Flexbox

ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚ форматирования Flexbox инициализируСтся ΠΏΡƒΡ‚Π΅ΠΌ создания flex-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Π ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ элСмСнтом являСтся body. ΠžΠ½Β ΡΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль ΠΈΒ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Π·ΠΎΠ½Ρƒ. Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€:

			body {
  display: flex;
}
		

Π˜Β ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ:

НС забудСм о пропорциях:

			aside {
  width: 25%;
}
main {
  width: 75%;
}
		

Вуаля! ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½Π½ΠΎΠΉ:

Π‘Β Flexbox ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π΅Ρ‰Π΅ΠΉ:

  • ΠžΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль ΠΈΒ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Π·ΠΎΠ½Ρƒ ΠΏΠΎΒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ оси:html, body { height: 100%;}body { align-items: center;}%save-sc5%
  • Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·Β Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов:aside { align-self: center;}%save-sc6%
  • ΠœΠ΅Π½ΡΡ‚ΡŒ порядок Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов Π±Π΅Π· измСнСния HTML-ΠΊΠΎΠ΄Π°:aside { order: 2}%save-sc7%

Π˜Β ΡΒ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΠ» лишь Π²Π΅Ρ€Ρ…ΡƒΡˆΠΊΡƒ айсбСрга Flexbox.

Flexbox доступСн Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². Им ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² Firefox с 28 вСрсии, Chrome с 29, Safari с 6.1 ΠΈ Edge с 12.

ΠŸΡ€ΠΈΠΌ. ΠΏΠ΅Ρ€Π΅Π². Π Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с Flexbox ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ нашС наглядноС Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅. ΠŸΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈ нашС Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ руководство ΠΏΠΎ CSS flex.

РСшСниС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΡΒ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Grid

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Flexbox, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎ большСй части Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠΈ, с CSS Grid Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ряды, Ρ‚Π°ΠΊ ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ, ΠΊΠ°ΠΊ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ Π½Π°ΡˆΡƒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ с Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ.

НачинаСтся всё Ρ‚Π°ΠΊΒ ΠΆΠ΅, ΠΊΠ°ΠΊ и в случаС с Flexbox. Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€:

			body {
  display: grid;
}
		

Π’ΠΎΡ‚ вСсь CSS:

			body {
  display: grid;
  background-color: #eeeeee;
}
aside {
   color: #fff;
   background-color: #8cacea;
}
		

Π˜Β Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΌΡ‹Β ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ:

Grid доступСн Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², хотя ΠΈ Π² мСньшСм количСствС. Им ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² Firefox с 52 вСрсии, Chrome с 57, Safari с 10.1 ΠΈ Edge с 16.

НашС послСднСС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ° Π½ΠΈΠΊΠ°ΠΊ нС отличаСтся ΠΎΡ‚Β ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ…. Π’Π°ΠΊ Π²Β Ρ‡Ρ‘ΠΌΒ ΠΆΠ΅ магия?

Π§Ρ‚ΠΎ, Ссли ΠΌΡ‹Β Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, ΠΊΠ°ΠΊ Ρ€Π°Π½ΡŒΡˆΠ΅:

			aside {
  width: 25%;
}
main {
  width: 75%;
}
		

Π”Π°, Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ отличаСтся, Π½ΠΎΒ Π½Π°ΠΌ ΠΎΠ½Β Π½Π΅Β ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚. Боковая панСль ΠΏΠΎΠΊΠ° нС располоТСна сбоку ΠΎΡ‚Β Π³Π»Π°Π²Π½ΠΎΠΉ Π·ΠΎΠ½Ρ‹.

Π’ΠΎΡ‚ ΠΌΡ‹Β ΠΈΒ ΠΏΠΎΠ΄ΠΎΡˆΠ»ΠΈ к сути Grid-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. ПослС ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Grid-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ display: grid Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ряды и строки Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ.

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это дСлаСтся:

			body {
  grid-template-columns: 30% 70%;
}
		

РСшСниС Π²Β ΠΎΠ΄Π½Ρƒ строку — красиво, Π½Π΅Β ΠΏΡ€Π°Π²Π΄Π°Β Π»ΠΈ? grid-template-columns опрСдСляСт ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ столбцов в сСткС.

ΠΠΎΒ ΡΒ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Grid ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС.

Π‘Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° Π³Π»Π°Π²Π½ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π±Ρ‹Π»ΠΈ Π±ΠΎΠ»Π΅Π΅ наглядными:

			main {
  background-color: rgba(39,174,96 ,1);
  color: #fff;
}
		

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΌΡ‹Β Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Grid:

  • МоТно ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Ρ‹Π² ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами:body { grid-column-gap: 15px;}Π’ΠΎΡ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:%save-sc13%НСт нСобходимости Π²Β Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ отступов ΠΊΒ Π±Π»ΠΎΠΊΠ°ΠΌ aside ΠΈ main: это Π΄Π΅Π»Π°Π΅Ρ‚ grid-column-gap.
  • МоТно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ столбцов, сколько Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π²Ρ‹ΡˆΠ΅ использовали Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΒ ΠΎΠ΄Π½ΠΎΠΌΡƒ элСмСнту aside ΠΈ main. Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π΅Ρ‰Ρ‘ Π΄Π²Π°:
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
    %save-sc14%Grid сам понял, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½Π°Π΄ΠΎΒ β€” Π½Π΅Β ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ Π΄Π°ΠΆΠ΅ Ρ‚Ρ€ΠΎΠ³Π°Ρ‚ΡŒ CSS.
  • МоТно ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρƒ строками:body { grid-row-gap: 15px;}%save-sc15%Для упрощСния ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сокращСниС: grid-gap: 15 px вмСсто grid-row-gap ΠΈ grid-column-gap.
  • МоТно ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ строк:body { grid-template-rows: 200px 300px 400px;}%save-sc16%Π’Π΅ΠΏΠ΅Ρ€ΡŒ высота ΠΏΠ΅Ρ€Π²ΠΎΠΉ, Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΈΒ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΉ строк Ρ€Π°Π²Π½Π° 200, 300 ΠΈΒ 400 пиксСлСй соотвСтствСнно.

Для Π½Π°Ρ‡Π°Π»Π° Ρ…Π²Π°Ρ‚ΠΈΡ‚ и этого — но это Π΄Π°Π»Π΅ΠΊΠΎ нС всё.

Как Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с новыми стандартами?

Π’Ρ‹Β ΡƒΠ²ΠΈΠ΄Π΅Π»ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Flexbox ΠΈΒ Grid ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ?

Для Π½Π°Ρ‡Π°Π»Π° я Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π²Π°ΠΌ ΠΏΠΎΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒΡΡ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΈΠ· этой ΡΡ‚Π°Ρ‚ΡŒΠΈ. ПослС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ слоТныС случаи. И Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ Grid ΠΏΠΎΠΊΠ° поддСрТиваСтся Π½Π΅ всСми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π΅ стоит Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ± адаптивности сайта, ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± этом Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΡ€ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ вёрстку.

Π’ качСствС ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ вас Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ³Ρ€Π° Flexbox Froggy, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ Π² ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ ΠΈΠ³Ρ€ для программистов.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ вас Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΎΠ»Π½ΠΎΠ²Π°Ρ‚ΡŒ эти стандарты?

Если вы до сих ΠΏΠΎΡ€ нС поняли, ΠΏΠΎΡ‡Π΅ΠΌΡƒ стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Flexbox ΠΈΒ Grid, Ρ‚ΠΎΒ Π²ΠΎΡ‚ нСсколько ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, с которыми Π²Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ использовании ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ:

  • Ссли Π²Ρ‹Β ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Β«ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅Β» Π±Π»ΠΎΠΊΠΈ ΠΈΒ clearfix, Ρ‚ΠΎΒ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ с ними ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹;
  • ΠΏΡ€ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ элСмСнты ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ Π½Π°Β Π΄Ρ€ΡƒΠ³Π°;
  • ΠΏΡ€ΠΈ использовании display: table остаСтся ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅Π½ΡƒΠΆΠ½ΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ;
  • ΠΏΡ€ΠΈ использовании inline-block Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с пустыми мСстами.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ