V Tailwind CSS rozpětí řádků způsobí, že prvek zabere dva nebo více řádků v mřížce. Používá se k definování počtu řádků, které by měl prvek zabírat/rozsah. Umožňuje uživatelům upravit velikost a polohu položky mřížky ve více řádcích a vytvořit různá rozvržení. Navíc jej lze použít k vytvoření flexibilních a citlivých rozvržení mřížky pro webové stránky.
Tento zápis bude příkladem metody, jak vytvořit rozpětí řádků v Tailwind CSS.
Jak vytvořit rozpětí řádků v Tailwindu?
Chcete-li, aby se řádky v Tailwindu rozkládaly, vytvořte program HTML. Poté použijte „ row-span-
Pro praktickou implementaci se podívejte na uvedené kroky:
Krok 1: Vytvořte rozsah sloupců v programu HTML
Vytvořte HTML program a použijte „ row-span-
< tělo >
< div třída = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div třída = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div třída = 'bg-teal-500 p-5' > 2 < / div >
< div třída = 'row-span-2 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 = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / tělo >
Zde v nadřazeném prvku
- “ mřížka Třída ” se používá k vytvoření rozvržení mřížky.
- “ mřížka-řádek-4 ” class nastaví počet řádků v mřížce na 4.
- “ 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.
V podřízených prvcích
- “ řádek-rozpětí-3 ” class určuje, že prvek by se měl rozprostírat přes 3 řádky v mřížce.
- “ řádek-rozpětí-2 ” označuje, že prvek by se měl rozkládat přes 2 řádky v mřížce.
- “ řádek-rozpětí-4 ” class určuje, že prvek by se měl rozprostírat přes 4 řádky v mřížce.
- “ bg-teal-500 ” nastaví modrozelenou barvu na pozadí položky mřížky.
- “ p-5 ” třída přidá odsazení 5 jednotek k obsahu uvnitř podřízených položek .
Krok 2: Ověřte výstup
Zobrazte webovou stránku HTML a ověřte, zda bylo použito rozpětí řádků:
Ve výše uvedeném výstupu lze pozorovat, že rozpětí řádku bylo úspěšně aplikováno, podle kterého bylo specifikováno.
Závěr
Chcete-li, aby se řádky v Tailwindu roztáhly, použijte „ row-span-
” v programu HTML a zadejte počet řádků, které by měl každý prvek zahrnovat. Pro ověření si prohlédněte změny na webové stránce HTML. Tento zápis je příkladem metody, jak vytvořit rozpětí řádků v Tailwind CSS.