Gridstack.js: Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π»Π΅Π²Ρ‹ΠΉ ΠΈ ΠΏΡ€Π°Π²Ρ‹ΠΉ отступ Π² столбцах, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΌΠ΅ΠΆΠ΄Ρƒ строками.

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 13 Π΄Π΅ΠΊ. 2014  Β·  5ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: gridstack/gridstack.js

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

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

просто ΠΈΠ· Π»ΡŽΠ±ΠΎΠΏΡ‹Ρ‚ΡΡ‚Π²Π°. ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 20, Π° Π½Π΅ 0.. ΠΈΠ»ΠΈ Π² любом случаС настраиваСтся, ΠΌΠ½Π΅ каТСтся, это обычная Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ.. Π»ΡŽΠ±Ρ‹Π΅ мысли ΠΏΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ΡΡ Π·Π°Ρ€Π°Π½Π΅Π΅.

ВсС 5 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

ΠŸΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π½Π° самом Π΄Π΅Π»Π΅ ΡƒΠΆΠ΅ являСтся ΠΎΠΏΡ†ΠΈΠ΅ΠΉ - Β«vertical_marginΒ». И Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° я ΡΠΌΠΎΡ‚Ρ€ΡŽ Π±Π»ΠΈΠΆΠ΅, Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ просто ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π² css

.grid-stack-item-content, .placeholder-content {
слСва: 0;
справа: 0;
}

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Ρ, Ρ‡Ρ‚ΠΎ это Π½Π΅ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ влияния Π½Π° расчСт ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ, это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ.

ΠŸΡ€ΠΈΠ²Π΅Ρ‚,

Π”Π°, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ поля ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ‹ Π² CSS:

.grid-stack-item .grid-stack-item-content,
.grid-stack-item .placeholder-content {
    left: 10px;
    right: 10px;
}

ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ Π²ΠΎ врСмя ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ.

просто ΠΈΠ· Π»ΡŽΠ±ΠΎΠΏΡ‹Ρ‚ΡΡ‚Π²Π°. ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 20, Π° Π½Π΅ 0.. ΠΈΠ»ΠΈ Π² любом случаС настраиваСтся, ΠΌΠ½Π΅ каТСтся, это обычная Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ.. Π»ΡŽΠ±Ρ‹Π΅ мысли ΠΏΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ΡΡ Π·Π°Ρ€Π°Π½Π΅Π΅.

Π― Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ·Π°Π΄Π°Ρ‡Π΅Π½, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π½Π΅Ρ‚ настройки Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ поля. ΠŸΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ настроСк Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ поля Π² CSS, ΠΏΠΎΡ…ΠΎΠΆΠ΅, Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для мСня. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρƒ мСня Π΅ΡΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π·Π°Π·ΠΎΡ€ Π² 20 пиксСлСй ΠΌΠ΅ΠΆΠ΄Ρƒ строками ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅Ρ‚ Π·Π°Π·ΠΎΡ€Π° ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами.

Π― ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ», Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс Π² сСлСктор, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ достаточно Π²Ρ‹ΡΠΎΠΊΡƒΡŽ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ:

.grid-stack .grid-stack-item .grid-stack-item-content,
.grid-stack .grid-stack-item .placeholder-content {
    left: 10px;
    right: 10px;
}
Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ

Π‘ΠΌΠ΅ΠΆΠ½Ρ‹Π΅ вопросы

Metal101 picture Metal101  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

kevinlandsberg picture kevinlandsberg  Β·  5ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

cblokker picture cblokker  Β·  6ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

PrincessOfSecret picture PrincessOfSecret  Β·  6ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

metalheadz picture metalheadz  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ