Тази статия ще илюстрира метода за прилагане на точки на прекъсване и медийни заявки върху решетката на редовете в Tailwind CSS.
Как да приложите точки на прекъсване и медийни заявки върху решетка на редове в Tailwind?
За да приложите точки на прекъсване и медийни заявки върху решетката на редовете в Tailwind, направете HTML програма. След това дефинирайте броя на редовете за различни размери на екрана, като използвате „ см ”, “ md ' или ' lg ' точки на прекъсване с ' grid-rows-<стойност> ” комунални услуги. След това осигурете промени в уеб страницата, като коригирате размера на екрана.
Нека проучим практическото изпълнение:
Стъпка 1: Използвайте точки на прекъсване и медийни заявки с решетка на редове в HTML програма
Създайте HTML програма и задайте броя на редовете за различни размери на екрана с „ grid-rows-<стойност> ” помощна програма. Например използвахме „ md ' точка на прекъсване с ' grid-rows-3 ' полезност и ' lg ' точки на прекъсване с ' grid-rows-5 ” помощни програми за промяна на броя на редовете на различни размери на екрана:
< тяло >
< див клас = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< див клас = 'bg-teal-500 p-5' > 1 < / див >
< див клас = 'bg-teal-500 p-5' > 2 < / див >
< див клас = 'bg-teal-500 p-5' > 3 < / див >
< див клас = 'bg-teal-500 p-5' > 4 < / див >
< див клас = 'bg-teal-500 p-5' > 5 < / див >
< див клас = 'bg-teal-500 p-5' > 6 < / див >
< див клас = 'bg-teal-500 p-5' > 7 < / див >
< див клас = 'bg-teal-500 p-5' > 8 < / див >
< див клас = 'bg-teal-500 p-5' > 9 < / див >
< див клас = 'bg-teal-500 p-5' > 10 < / див >
< / див >
< / тяло >
Тук:
- “ решетка ” се използва за създаване на мрежово оформление.
- “ grid-rows-2 ” класът указва, че мрежата трябва да има 2 реда с еднакъв размер.
- “ md:grid-rows-3 ” клас променя решетката в 3 реда с еднакъв размер на среден размер на екрана.
- “ lg:grid-rows-5 ” клас променя решетката в 5 реда с еднакъв размер на големия екран.
- “ grid-flow-col ” клас поставя елементите от мрежата хоризонтално в колони.
- “ празнина-3 ” клас задава разстояние от 3 единици между всеки елемент от мрежата.
- “ m-3 ” клас прилага марж от 3 единици около контейнера на мрежата.
- “ текстов център ” задава текста на всеки елемент от мрежата в центъра.
- “ bg-teal-500 ” задава синьозеления цвят на фона на елементите от мрежата.
- “ p-5 ” клас добавя подложка от 5 единици към съдържанието в детето
елементи.
Стъпка 2: Проверете изхода
За да сте сигурни, че точките на прекъсване и медийните заявки са приложени към решетката на редовете, вижте HTML уеб страницата, като промените размера на екрана:
В горния изход може да се види, че броят на редовете се променя с размера на екрана. Това показва, че точките на прекъсване и медийните заявки са приложени успешно върху решетката на редовете.
Заключение
За да приложите точки на прекъсване и медийни заявки върху решетката на редовете в Tailwind, дефинирайте броя на редовете за различни размери на екрана, като използвате „ см ”, “ md ' или ' lg ' точки на прекъсване с ' grid-rows-<стойност> ” комунални услуги. След това осигурете промени в уеб страницата, като промените размера на екрана. Тази статия е илюстрирала метода за прилагане на точки на прекъсване и медийни заявки върху решетката на редовете в Tailwind CSS.