WebDEV
Open in Telegram
Π‘ΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠ° ΠΊΠ°Π½Π°Π»Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ: Π²ΠΈΠ΄Π΅ΠΎ-ΡΡΠΎΠΊΠΈ, ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΡΠ°ΡΡΠΈ, Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΈΠ· ΠΌΠΈΡΠ° IT ΠΈ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. Π‘ΡΡΠ»ΠΊΠ°: @Portal_v_IT Π‘ΠΎΡΡΡΠ΄Π½ΠΈΡΠ΅ΡΡΠ²ΠΎ: @oleginc ΠΠ°Π½Π°Π» Π½Π° Π±ΠΈΡΠΆΠ΅: telega.in/c/webb_dev
Show more8 202
Subscribers
-324 hours
-117 days
-6330 days
Posts Archive
8 199
π ΠΠ΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½ΡΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ Π² Angular
Compliant-ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΡ ΠΎΠΊΡΡΠΆΠ°ΡΡ Π½Π°Ρ Π² ΠΏΠΎΠ²ΡΠ΅Π΄Π½Π΅Π²Π½ΠΎΡΡΠΈ β Π² Π²ΠΈΠ΄Π΅ Π·Π°ΡΡΠ΅ΠΆΠ΅ΠΊ ΡΡΠΊΠ·Π°ΠΊΠ°, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΡΡΠΈ ΠΈΠ»ΠΈ ΠΊΠΎΠ»ΠΏΠ°ΡΠΊΠΎΠ² ΠΎΡ ΡΠ°ΠΌΠΏΡΠ½Π΅ΠΉ, β ΠΌΡ ΡΠ΅Π΄ΠΊΠΎ Π·Π°Π΄ΡΠΌΡΠ²Π°Π΅ΠΌΡΡ ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΡΠ°ΠΊΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΊΡΠ°ΡΠΊΠΎ, Π² compliant-ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΠ΅ Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π΅Π³ΠΎ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΡ
Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄Π΅ΡΠΎΡΠΌΠ°ΡΠΈΡ. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π² ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠ΅Ρ
Π½ΠΈΠΊΠ΅ (rigid body) Π³ΠΈΠ±ΠΊΠΎΡΡΡ Π·Π°ΡΠ°ΡΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΡΠΌ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°, Ρompliant-ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΅Π΅ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ ΡΠΈΠ»Ρ ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ Π² Π½ΡΠΆΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ, Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠΉ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΡ
Π΄Π΅ΡΠ°Π»Π΅ΠΉ.
#ΡΡΠ°ΡΡΠΈ #js #Angular #TypeScript
8 199
π₯ ΠΡΡΡΠ΅Π΅ Π½Π° ΠΊΠ°Π½Π°Π»Π΅ Π·Π° Π½Π΅Π΄Π΅Π»Ρ
1. Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠ΅ CSS-ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ.
2. Sortable β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π΅ΠΌΡΡ
ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΠΌΡΡ
ΡΠΏΠΈΡΠΊΠΎΠ².
3. 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°: grid-template-columns: repeat(12, 1fr).
8 199
π Tina CMS β Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ React. ΠΠΎΡΠ»Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Tina ΠΊ ΠΏΡΠΎΠ΅ΠΊΡΡ Gatsby ΠΈΠ»ΠΈ Next.js Π²Π°Ρ ΡΠ°ΠΉΡ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌΡΠΌ, ΡΡΠΎ Π΄Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ΅ΠΊΡΡ, ΠΏΠ΅ΡΠ΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
#ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ
8 199
π‘ Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠ΅ CSS-ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ
βΠ§Π°ΡΡΡ 9
ΠΠ΅ΡΠ΅Π΄ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΏΠ΅ΡΠ²ΠΎΠΉ, Π²ΡΠΎΡΠΎΠΉ, ΡΡΠ΅ΡΡΠ΅ΠΉ, ΡΠ΅ΡΠ²ΡΡΡΠΎΠΉ, ΠΏΡΡΠΎΠΉ, ΡΠ΅ΡΡΠΎΠΉ, ΡΠ΅Π΄ΡΠΌΠΎΠΉ ΠΈ Π²ΠΎΡΡΠΌΠΎΠΉ ΡΠ°ΡΡΡΠΌΠΈ.
βRAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΌΠΈ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠΌΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎ. ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ΅ΡΠΌΠΈΠ½Ρ repeat, auto-(fit|fill) ΠΈ minmax() ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΠΊΡΠΎΠ½ΠΈΠΌΠ° RAM.
ΠΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ Π΄Π°Π½Π½ΡΡ ΡΠ΅ΠΌΡ.
ΠΠΈΠ΄Π΅ΠΎ-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠ΄ ΡΡΠΈΠΌ ΠΏΠΎΡΡΠΎΠΌ.
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ...
#ΡΠΎΠ²Π΅ΡΡ #coding #css8 199
π‘ Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠ΅ CSS-ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ
βΠ§Π°ΡΡΡ 8
ΠΠ΅ΡΠ΅Π΄ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΏΠ΅ΡΠ²ΠΎΠΉ, Π²ΡΠΎΡΠΎΠΉ, ΡΡΠ΅ΡΡΠ΅ΠΉ, ΡΠ΅ΡΠ²ΡΡΡΠΎΠΉ, ΠΏΡΡΠΎΠΉ, ΡΠ΅ΡΡΠΎΠΉ ΠΈ ΡΠ΅Π΄ΡΠΌΠΎΠΉ ΡΠ°ΡΡΡΠΌΠΈ.
β12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°: grid-template-columns: repeat(12, 1fr)
ΠΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° span. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π·Π°Π΄Π°ΡΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ Π»ΠΈΠ½ΠΈΡ ΠΈ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΎΡ
Π²Π°ΡΠΈΡΡ, Π½Π°ΡΠΈΠ½Π°Ρ ΡΠΎ ΡΡΠ°ΡΡΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΊΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, grid-column: 1 / span 12 Π±ΡΠ΄Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΎΠΌ grid-column: 1 / 13, Π° grid-columns: 2 / span 6 - Π°Π½Π°Π»ΠΎΠ³ΠΎΠΌ grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
ΠΠΈΠ΄Π΅ΠΎ-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠ΄ ΡΡΠΈΠΌ ΠΏΠΎΡΡΠΎΠΌ.
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ...
#ΡΠΎΠ²Π΅ΡΡ #coding #css8 199
π Sortable β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π΅ΠΌΡΡ
ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΠΌΡΡ
ΡΠΏΠΈΡΠΊΠΎΠ². ΠΠ½Π° Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π²Π½Π΅ΡΠ½ΠΈΡ
Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ, ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ°ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ
ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΈ Π½Π° ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
.
#ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ #js
8 199
π₯ ΠΡΡΡΠ΅Π΅ Π½Π° ΠΊΠ°Π½Π°Π»Π΅ Π·Π° Π½Π΅Π΄Π΅Π»Ρ
1. ΠΠ°Π΄Π°Π²Π°ΡΡ Height ΠΈ Width Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ½ΠΎΠ²Π° Π²Π°ΠΆΠ½ΠΎ.
2. AutoNumeric β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Javascript, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π²Π²ΠΎΠ΄Π° Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ ΠΌΠ΅ΠΆΠ΄ΡΠ½Π°ΡΠΎΠ΄Π½ΡΡ
Π²Π°Π»ΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΠΈΡΠ»ΠΎΠ²ΡΡ
ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠ².
3. Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠ΅ CSS-ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ - Π§Π°ΡΡΡ 6 | Π§Π°ΡΡΡ 7.
8 199
ΠΠ°Π½Π°Π»Ρ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΠΏΠΎΠΈΡΠΊΠ° ΡΠ°Π±ΠΎΡΡ Π² it:
Π’ΡΠΈ ΠΊΠ°Π½Π°Π»Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΡΡΡΠΎ ΡΠ½ΠΈΠΌΡΡ Π²ΠΎΠΏΡΠΎΡ ΠΏΠΎΠΈΡΠΊΠ° ΡΠ°Π±ΠΎΡΡ Π΄Π»Ρ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠΎΠ² Π² it.
@remoteit β ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»Π½Π°Ρ ΡΠ΄Π°Π»Π΅Π½ΠΊΠ° Π΄Π»Ρ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠΎΠ² Π² it, Π²Π°ΠΊΠ°Π½ΡΠΈΠΈ ΠΎΡΠ±ΠΈΡΠ°ΡΡΡΡ Π² ΡΡΡΠ½ΡΡ, ΠΌΠΈΠ½ΠΈΠΌΡΠΌ 4 Π² Π΄Π΅Π½Ρ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠΊΡΠΊΠ»ΡΠ·ΠΈΠ²Π½ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
@relocats β Π²Π°ΠΊΠ°Π½ΡΠΈΠΈ Π΄Π»Ρ it ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠΎΠ² Ρ ΠΏΠ΅ΡΠ΅Π΅Π·Π΄ΠΎΠΌ Π² ΠΡΠΎΠΏΡ, ΠΠΌΠ΅ΡΠΈΠΊΡ ΠΈ ΠΠ·ΠΈΡ, ΡΠΎΠ»ΡΠΊΠΎ Π°Π΄Π΅ΠΊΠ²Π°ΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ Ρ Ρ
ΠΎΡΠΎΡΠΈΠΌΠΈ ΡΠ΅Π»ΠΎΠΊΠ°ΡΠΈΠΎΠ½Π½ΡΠΌΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ.
@gamedevjobs β ΡΠ°ΠΌΡΠΉ ΡΠ΅Π³ΡΠ»ΡΡΠ½ΡΠΉ, Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠΉ Π΄Π°ΠΉΠ΄ΠΆΠ΅ΡΡ ΠΏΠΎ gamedev Π²Π°ΠΊΠ°Π½ΡΠΈΡΠΌ Π² ΡΠ³. Π Π΅Π΄Π°ΠΊΡΠΈΡΡΠ΅Ρ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠΈ ΠΈΠ³ΡΠΎΠ²ΠΎΠΉ ΡΠΉΡΠ°Ρ Ρ 20 Π»Π΅ΡΠ½ΠΈΠΌ ΠΎΠΏΡΡΠΎΠΌ.
ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΡ ΠΈ ΠΎΡΠΊΠ»ΠΈΠΊΠ°ΠΉΡΡ, ΡΠ°Π±ΠΎΡΠ° Π½Π°ΠΉΠ΄Π΅ΡΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
.
8 199
π‘ Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠ΅ CSS-ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ
βΠ§Π°ΡΡΡ 7
ΠΠ΅ΡΠ΅Π΄ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΏΠ΅ΡΠ²ΠΎΠΉ, Π²ΡΠΎΡΠΎΠΉ, ΡΡΠ΅ΡΡΠ΅ΠΉ, ΡΠ΅ΡΠ²ΡΡΡΠΎΠΉ, ΠΏΡΡΠΎΠΉ ΠΈ ΡΠ΅ΡΡΠΎΠΉ ΡΠ°ΡΡΡΠΌΠΈ.
β12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°: grid-template-columns: repeat(12, 1fr)
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ: 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΡ ΡΠ΅ΡΠΊΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±ΡΡΡΡΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΠ΅ΡΠΊΠΈ Π² CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ repeat(). ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ repeat(12, 1fr); Π΄Π»Ρ ΡΠ°Π±Π»ΠΎΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡ 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΊΠ°ΠΆΠ΄Π°Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π½Π° Π½Π΅ΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ grid-Π»ΠΈΠ½ΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ grid-column: 1/13 Π±ΡΠ΄Π΅Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ ΠΏΠ΅ΡΠ²ΠΎΠΉ ΠΈ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ (13-ΠΉ) Π»ΠΈΠ½ΠΈΠ΅ΠΉ, ΠΎΡ
Π²Π°ΡΡΠ²Π°Ρ Π²ΡΠ΅ 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. Π‘ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ grid-column: 1/5 - ΠΏΠ΅ΡΠ²ΡΠ΅ 4 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
#ΡΠΎΠ²Π΅ΡΡ #coding #css8 199
π Monolith β ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΡΠ΅Π»ΡΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π² Π²ΠΈΠ΄Π΅ Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠ½Π° ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ CSS, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ΄ JS ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ Ρ
ΡΠ°Π½ΠΈΡΡ Π²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅, ΠΊΠΎΡΠΎΡΡΠΌ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ. ΠΠ°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡ Β«Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊΒ» Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
#ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ
