У Таилвинд ЦСС-у, распон редова чини да елемент заузима два или више редова унутар мреже. Користи се за дефинисање броја редова који елемент треба да заузме/распон. Омогућава корисницима да подесе величину и положај ставке мреже у више редова и креирају различите изгледе. Штавише, може се користити за креирање флексибилних и прилагодљивих распореда мреже за веб странице.
Овај текст ће илустрирати метод за прављење распона редова у Таилвинд ЦСС-у.
Како направити распон редова у Таилвинд-у?
Да би се редови простирали у Таилвинд-у, направите ХТМЛ програм. Затим користите „ ров-спан-<валуе> ” услужни програм и дефинише број редова за распон. Потребно је дефинисати број редова који сваки одређени елемент треба да обухвата. На крају, погледајте промене на ХТМЛ веб страници ради верификације.
За практичну примену, погледајте наведене кораке:
Корак 1: Направите распон колоне у ХТМЛ програму
Направите ХТМЛ програм и користите „ ров-спан-<валуе> ” услужни програми са ставкама мреже за прављење распона колоне. На пример, користили смо „ ред-спан-3”, „ред-спан-2” и „ред-спан-4 ” услужни програми као у наставку:
< тело >
< див класа = 'грид грид-ровс-4 грид-флов-цол гап-3 м-3 тект-центер' >
< див класа = 'ров-спан-3 бг-теал-500 п-5' > 1 < / див >
< див класа = 'бг-теал-500 п-5' > 2 < / див >
< див класа = 'ров-спан-2 бг-теал-500 п-5' > 3 < / див >
< див класа = 'бг-теал-500 п-5' > 4 < / див >
< див класа = 'бг-теал-500 п-5' > 5 < / див >
< див класа = 'ров-спан-4 бг-теал-500 п-5' > 6 < / див >
< / див >
< / тело >
Овде, у родитељском елементу <див>:
- “ грид ” класа се користи за креирање распореда мреже.
- “ мрежа-ред-4 ” класа поставља број редова у мрежи на 4.
- “ грид-флов-цол ” класа поставља ставке мреже хоризонтално у колоне.
- “ гап-3 ” класа поставља размак од 3 јединице између сваке ставке мреже.
- “ м-3 ” класа примењује маргину од 3 јединице око мрежног контејнера.
- “ текстуални центар ” класа поставља текст сваке ставке мреже у центар.
У подређеним елементима <див>:
- “ ред-спан-3 ” класа специфицира да елемент треба да се простире на 3 реда у мрежи.
- “ ред-спан-2 ” класа означава да елемент треба да се простире на 2 реда у мрежи.
- “ ред-спан-4 ” класа специфицира да елемент треба да се простире на 4 реда у мрежи.
- “ бг-теал-500 ” класа поставља плаву боју на позадину ставке мреже.
- “ п-5 ” класа додаје допуну од 5 јединица садржају унутар подређених <див> ставки.
Корак 2: Проверите излаз
Погледајте ХТМЛ веб страницу да бисте проверили да ли је распон редова примењен или не:
У горњем излазу, може се приметити да је распон реда успешно примењен према којем је специфициран.
Закључак
Да би се редови ширили у Таилвинд-у, користите „ ров-спан-<валуе> ” у ХТМЛ програму и наведите број редова који сваки елемент треба да обухвата. За верификацију, погледајте промене на ХТМЛ веб страници. Овај запис је илустровао метод за прављење распона редова у Таилвинд ЦСС-у.