π² CSS Grid
Map of Content Π΄Π»Ρ CSS Grid: Π΄Π²ΡΠΌΠ΅ΡΠ½Π°Ρ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠ°, ΠΎΠ±Π»Π°ΡΡΠΈ, ΡΠ°Π±Π»ΠΎΠ½Ρ, ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ.
π ΠΠ³Π»Π°Π²Π»Π΅Π½ΠΈΠ΅
ΠΠ°ΡΠ΅ΠΌ Π½ΡΠΆΠ½ΠΎ
CSS Grid -- ΠΏΠ΅ΡΠ²Π°Ρ Π½Π°ΡΡΠΎΡΡΠ°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° Π΄Π²ΡΠΌΠ΅ΡΠ½ΠΎΠΉ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ Π² CSS. ΠΡΠ»ΠΈ Flexbox ΡΠ΅ΡΠ°Π΅Ρ Π·Π°Π΄Π°ΡΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ, ΡΠΎ Grid ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ. ΠΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΠ½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ², Π΄Π°ΡΠ±ΠΎΡΠ΄ΠΎΠ² ΠΈ Π»ΡΠ±ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ².
πΊ ΠΡΡΡ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ
π’ ΠΠ°ΡΠΈΠ½Π°ΡΡΠΈΠΉ
ΠΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ
- ΠΡΠ½ΠΎΠ²Ρ Grid
- Grid-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈ grid-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
- Π‘ΡΡΠΎΠΊΠΈ, ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ ΡΡΠ΅ΠΉΠΊΠΈ
- Grid-Π»ΠΈΠ½ΠΈΠΈ ΠΈ grid-ΠΎΠ±Π»Π°ΡΡΠΈ
- display grid ΠΈ inline-grid
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ
- Grid template
- ΠΠ΄ΠΈΠ½ΠΈΡΠ° fr -- Π΄ΡΠΎΠ±Π½ΡΠ΅ Π΄ΠΎΠ»ΠΈ
- repeat() -- ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠΎΠ²
- minmax() -- Π³ΡΠ°Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
- auto-fill ΠΈ auto-fit
π‘ Π‘ΡΠ΅Π΄Π½ΠΈΠΉ
Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
- grid-column ΠΈ grid-row
- grid-area -- ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
- grid-template-areas -- ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ
- Π―Π²Π½Π°Ρ ΠΈ Π½Π΅ΡΠ²Π½Π°Ρ ΡΠ΅ΡΠΊΠ°
- grid-auto-rows ΠΈ grid-auto-columns
- grid-auto-flow -- Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
ΠΡΡΡΡΠΏΡ ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
- gap (grid-gap) -- ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ΅ΠΉΠΊΠ°ΠΌΠΈ
- justify-items ΠΈ align-items
- justify-content -- Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³Π»Π°Π²Π½ΠΎΠΉ ΠΎΡΠΈ
- justify-self ΠΈ align-self
- place-items ΠΈ place-content
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Grid
- Responsive Grid Π±Π΅Π· media queries
- Grid ΠΈ media queries
- Grid -- ΠΏΠ°ΡΡΠ΅ΡΠ½ auto-fill + minmax
π΄ ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ
- Subgrid
- ΠΠΌΠ΅Π½ΠΎΠ²Π°Π½Π½ΡΠ΅ grid-Π»ΠΈΠ½ΠΈΠΈ
- Grid ΠΈ aspect-ratio
- ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Grid
- Grid -- Π°Π½ΠΈΠΌΠ°ΡΠΈΡ
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ
- Grid -- ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ (page layout)
- Grid -- Π΄Π°ΡΠ±ΠΎΡΠ΄
- Grid -- Π³Π°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
- Grid -- ΠΊΠ°ΡΡΠΎΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°
- Grid -- Holy Grail Layout
Π‘ΡΠ°Π²Π½Π΅Π½ΠΈΠ΅
- Flexbox vs Grid
- Grid -- ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ
- Grid -- Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ ΠΈ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
π Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ Π΄ΠΎΠΌΠ΅Π½Ρ
| ΠΠΎΠΌΠ΅Π½ | Π‘Π²ΡΠ·Ρ |
|---|---|
| _MOC CSS | Π ΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π΄ΠΎΠΌΠ΅Π½ |
| _MOC Flexbox | ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ |
| _MOC HTML | Π‘ΡΡΡΠΊΡΡΡΠ° Π΄Π»Ρ Grid-ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ |
| _MOC Π Π΅ΡΠ΅ΠΏΡΡ | ΠΠΎΡΠΎΠ²ΡΠ΅ Grid-ΡΠ΅ΡΠ΅Π½ΠΈΡ |
π§ ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ
| β¬ Π ΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ MOC | _MOC CSS |
| β¬ Π Π³Π»Π°Π²Π½ΠΎΠΉ | πΊοΈ MOC |