Tento příspěvek rozvádí kompletní postup přidání mezery mezi sloupce v Tailwindu.
Jak přidat mezeru mezi sloupce ve službě Tailwind?
Chcete-li přidat mezeru mezi sloupci v Tailwindu, použijte vestavěný „ mezera-{velikost} “utilita. Určuje celočíselnou hodnotu, která představuje mezeru mezi sloupci vodorovně a svisle. Udělejme tento úkol prakticky s pomocí uvedených příkladů.
Struktura souboru projektu
' mezera-{velikost} ” nástroj lze implementovat v kterémkoli z projektů Tailwind, které se řídí danou strukturou souborů:
Začněme prvním příkladem.
Příklad 1: Pomocí nástroje „gap-{size}“ přidejte stejnou mezeru mezi řádky a sloupce
Tento příklad používá obslužný program „gap-{size}“ k přidání stejné mezery vodorovně i svisle mezi dané sloupce.
HTML kód
Přehled následujícího kódu:
< hlava >
< odkaz href = '/dist/output.css' rel = 'stylesheet' >
< / hlava >
< tělo >
< h1 třída = 'text-3xl font-tučné text-střed podtržení text-oranžová-600' > Vítejte v Linuxhintu! < / h1 < br >
< div třída = 'mx-2 grid grid-cols-3 gap-4' >
< div třída = 'border-2 border-orange-600' > První výukový program < / div >
< div třída = 'border-2 border-orange-600' > Druhý návod < / div >
< div třída = 'border-2 border-orange-600' > Třetí návod < / div >
< div třída = 'border-2 border-orange-600' > Čtvrtý návod < / div >
< div třída = 'border-2 border-orange-600' > Pátý návod < / div >
< div třída = 'border-2 border-orange-600' > Šestý návod < / div >
< div třída = 'border-2 border-orange-600' > Sedmý návod < / div >
< div třída = 'border-2 border-orange-600' > Osmý návod < / div >
< / div >
Ve výše uvedených řádcích kódu:
- Nejprve propojte hlavní soubor CSS „ /dist/output.css “ se stávajícím souborem HTML “ index.html ' za použití '
” v sekci “hlava”. - Dále sekce „body“ vytvoří prvek „
“, který používá „ Velikost písma “, “ Tloušťka písma “, “ Zarovnání textu “, “ Textová dekorace “ a „ Barva textu “třídy Tailwind, resp.
- Poté se přidá prvek „“, který použije „ mřížka nástroj pro nastavení jeho obsahu v uvedeném počtu rozložení mřížky, okraj ” pro nastavení vodorovného okraje a “ mezera ” pro přidání zadané mezery mezi sloupce.
- V části těla prvku „
“ je zahrnuto dalších osm prvků „“, které využívají „ Šířka okraje “ a „ Barva ohraničení “ tříd, resp.Výstup
Spusťte výše uvedený HTML kód na živém serveru a analyzujte výstup:
Jak je vidět, výstup přiměřeně přidá zadanou mezeru mezi sloupce v obou rozměrech.
Příklad 2: Pomocí nástroje „gap-{size}“ přidejte mezeru mezi řádky a sloupce nezávisle
' mezera-{velikost} Nástroj ” lze také implementovat s rozměry „x(horizontální)“ a „y(vertikální)“ jako „mezera-x-{velikost}“ pro řádky a „mezera-y-{velikost}“ pro sloupce pro přidání mezera mezi nimi jednotlivě.Podívejme se na jeho praktické provedení.
HTML kód
< hlava >
Podívejte se na daný kód:
< odkaz href = '/dist/output.css' rel = 'stylesheet' >
< / hlava >
< tělo >
< div třída = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div třída = 'border-2 border-orange-600' >První návod< / div >
< div třída = 'border-2 border-orange-600' >Druhý návod< / div >
< div třída = 'border-2 border-orange-600' >Třetí návod< / div >
< div třída = 'border-2 border-orange-600' >Čtvrtý návod< / div >
< div třída = 'border-2 border-orange-600' >Pátý návod< / div >
< div třída = 'border-2 border-orange-600' >Šestý návod< / div >
< div třída = 'border-2 border-orange-600' >Sedmý návod< / div >
< div třída = 'border-2 border-orange-600' >Osmý návod< / div >
< / div >
< tělo >Zde, „ mezera-x-{velikost} nástroj přidá mezeru mezi řádky a mezera-y-{velikost} ” přidá zadanou mezeru mezi sloupce nezávisle.
Výstup
Výše uvedený výsledek ověřuje, že mezera mezi řádky a sloupci je použita odpovídajícím způsobem.
Závěr
„Tailwind CSS“ poskytuje vestavěný „ mezera-{velikost} ” pro přidání mezery mezi sloupce. Lze jej také použít k samostatnému přidání mezery mezi řádky a sloupci pomocí „ mezera-x-{velikost} “ a „ mezera-y-{velikost} ' utility. Tento příspěvek poskytuje úplný postup přidání mezery mezi sloupce v Tailwindu.
- V části těla prvku „