Tailwind CSS nabízí systém mřížky, který uživatelům umožňuje rozdělit webovou stránku do sloupců a řádků pomocí nástrojů grid-cols a grid-rows. Poskytuje také pomocné nástroje pro začátek a konec sloupce mřížky pro ovládání velikosti a umístění prvků ve sloupcích mřížky. Tyto nástroje umožňují uživatelům určit počáteční a koncovou pozici prvku v rozvržení mřížky.
Tento článek vysvětlí způsob, jak nastavit, aby sloupce začínaly nebo končily na konkrétní n-té čáře mřížky v Tailwind CSS.
Jak nastavit, aby sloupce začínaly nebo končily na n-té mřížce v Tailwindu?
Chcete-li, aby sloupce začínaly nebo končily na n-té mřížce v Tailwindu, použijte „ col-start-
Krok 1: Určete počáteční a koncovou pozici prvků mřížky v programu HTML
Vytvořte HTML program a použijte „ col-start-
< tělo >
< h1 třída = 'text-2xl text-center' >
Tailwind CSS – Začátek sloupce / Konec
h1 >
< div třída = 'grid grid-cols-4 gap-3 m-3' >
< div třída = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div třída = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div třída = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div třída = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div třída = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
tělo >
Zde v nadřazeném prvku
- “ mřížka “ se používá k vytvoření rozvržení mřížky.
- “ grid-cols-4 ” class určuje, že mřížka by měla mít 4 stejně velké sloupce.
- “ mezera-3 ” třída nastavuje vzdálenost 3 jednotek mezi každou položkou mřížky.
- “ m-3 ” třída přidává okraj 3 jednotek kolem kontejneru mřížky.
Ve vnitřních podřízených prvcích
- “ col-start-2 Vlastnost ” určuje, že položka mřížky začíná ve sloupci 2.
- “ col-span-2 ” označuje, že položka mřížky zabírá 2 sloupce.
- “ col-start-1 ” se používá ke spuštění položky mřížky od sloupce 1.
- “ col-end-3 ” určuje, že položka mřížky končí ve sloupci 3.
- “ col-start-3 ” označuje, že položka mřížky začíná od druhého sloupce.
- “ col-end-5 Vlastnost ” ukončí položku mřížky ve sloupci 5.
- “ col-span-3 ” určuje, že položka mřížky zabírá 3 sloupce.
- “ bg-teal-500 ” nastaví modrozelenou barvu na pozadí všech položek mřížky.
- “ p-5 “ přidává výplň 5 jednotek k obsahu uvnitř položek mřížky.
Krok 2: Ověřte výstup
Chcete-li zajistit, aby byly použity počáteční a koncové pozice sloupce mřížky, zobrazte webovou stránku HTML:
Výše uvedený výstup indikuje, že počáteční a koncová pozice sloupce mřížky byly úspěšně použity, podle toho, jak byly specifikovány.
Závěr
Chcete-li, aby sloupce začínaly nebo končily na n-té čáře mřížky v Tailwind, „ col-start-