Tento článek bude příkladem metody použití zarážek a dotazů na média na mřížku řádků v Tailwind CSS.
Jak použít zarážky a dotazy na média na mřížce řádků ve službě Tailwind?
Chcete-li použít zarážky a dotazy na média na mřížku řádků v Tailwindu, vytvořte program HTML. Poté definujte počet řádků pro různé velikosti obrazovky pomocí „ sm “, “ md “ nebo „ lg ” zarážky s “ grid-rows-
Pojďme se podívat na praktickou implementaci:
Krok 1: Použijte zarážky a dotazy na média s mřížkou řádků v programu HTML
Vytvořte HTML program a definujte počet řádků pro různé velikosti obrazovky pomocí „ grid-rows-
< tělo >
< div třída = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div třída = 'bg-teal-500 p-5' > 1 < / div >
< div třída = 'bg-teal-500 p-5' > 2 < / div >
< div třída = 'bg-teal-500 p-5' > 3 < / div >
< div třída = 'bg-teal-500 p-5' > 4 < / div >
< div třída = 'bg-teal-500 p-5' > 5 < / div >
< div třída = 'bg-teal-500 p-5' > 6 < / div >
< div třída = 'bg-teal-500 p-5' > 7 < / div >
< div třída = 'bg-teal-500 p-5' > 8 < / div >
< div třída = 'bg-teal-500 p-5' > 9 < / div >
< div třída = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / tělo >
Tady:
- “ mřížka Třída ” se používá k vytvoření rozvržení mřížky.
- “ grid-rows-2 ” class určuje, že mřížka by měla mít 2 stejně velké řádky.
- “ md:grid-rows-3 ” třída změní mřížku na 3 stejně velké řádky na střední velikosti obrazovky.
- “ lg:grid-rows-5 ” třída změní mřížku na 5 stejně velkých řádků na velké obrazovce.
- “ grid-flow-col ” třída umístí položky mřížky vodorovně do sloupců.
- “ mezera-3 ” třída nastavuje vzdálenost 3 jednotek mezi každou položkou mřížky.
- “ m-3 Třída ” aplikuje okraj 3 jednotek kolem kontejneru mřížky.
- “ textové centrum ” nastaví text každé položky mřížky na střed.
- “ bg-teal-500 ” třída nastaví modrozelenou barvu na pozadí položek mřížky.
- “ p-5 “ třída přidává k obsahu uvnitř dítěte výplň 5 jednotek
položky.
Krok 2: Ověřte výstup
Chcete-li zajistit, aby byly body přerušení a dotazy na média použity na mřížku řádků, zobrazte webovou stránku HTML změnou velikosti obrazovky:
Ve výše uvedeném výstupu je vidět, že počet řádků se mění s velikostí obrazovky. To znamená, že zarážky a dotazy na média byly úspěšně použity na mřížku řádků.
Závěr
Chcete-li použít zarážky a dotazy na média na mřížku řádků v Tailwindu, definujte počet řádků pro různé velikosti obrazovky pomocí „ sm “, “ md “ nebo „ lg ” zarážky s “ grid-rows-
' utility. Poté zajistěte změny na webové stránce změnou velikosti obrazovky. Tento článek je příkladem metody použití bodů přerušení a dotazů na média na mřížku řádků v Tailwind CSS.