Det här inlägget utvecklar hela proceduren för att lägga till gapet mellan kolumner i Tailwind.
Hur lägger man till gap mellan kolumner i medvind?
För att lägga till gapet mellan kolumnerna i Tailwind, använd den inbyggda ' gap-{storlek} ' verktyg. Den anger ett heltalsvärde som representerar gapet mellan kolumnerna horisontellt och vertikalt. Låt oss göra denna uppgift praktiskt taget med hjälp av de angivna exemplen.
Projektfilstruktur
den ' gap-{storlek} ”-verktyget kan implementeras i vilket som helst av Tailwind-projekten som följer den givna filstrukturen:
Låt oss börja med det första exemplet.
Exempel 1: Använd verktyget 'gap-{size}' för att lägga till samma gap mellan rader och kolumner
Det här exemplet använder verktyget 'gap-{size}' för att lägga till samma gap horisontellt och vertikalt mellan de givna kolumnerna.
HTML-kod
Översikt över följande kod:
< huvud >
< länk href = '/dist/output.css' rel = 'stilmall' >
< / huvud >
< kropp >
< h1 klass = 'text-3xl font-bold text-center underline text-orange-600' > Välkommen till Linuxhint! < / h1 >< br >
< div klass = 'mx-2 grid-cols-3 gap-4' >
< div klass = 'border-2 border-orange-600' > Första handledningen < / div >
< div klass = 'border-2 border-orange-600' > Andra handledningen < / div >
< div klass = 'border-2 border-orange-600' > Tredje handledningen < / div >
< div klass = 'border-2 border-orange-600' > Fjärde handledningen < / div >
< div klass = 'border-2 border-orange-600' > Femte handledningen < / div >
< div klass = 'border-2 border-orange-600' > Sjätte handledningen < / div >
< div klass = 'border-2 border-orange-600' > Sjunde handledningen < / div >
< div klass = 'border-2 border-orange-600' > Åttonde handledningen < / div >
< / div >
I ovanstående kodrader:
- Länka först CSS-huvudfilen ' /dist/output.css ' med den befintliga HTML-filen ' index.html ' använda '
' taggen i avsnittet 'huvud'. - Därefter skapar avsnittet 'body' ett '
'-element som använder ' Textstorlek ”, “ Teckensnittsvikt ”, “ Textjustering ”, “ Text dekoration ', och den ' Text färg ” Medvindsklasser, respektive.
- Efter det läggs ett ''-element till som tillämpar ' rutnät ' för att ställa in dess innehåll i det angivna antalet rutnätslayouter, ' marginal ' för att ställa in den horisontella marginalen och ' glipa ” verktyg för att lägga till det angivna gapet mellan kolumner.
- I avsnittet '
'-elementkroppen ingår ytterligare åtta ''-element som använder ' Gränsbredd ' och den ' Gräns färg ” klasser, respektive.Produktion
Kör HTML-koden ovan i liveservern och analysera resultatet:
Som sett lägger utdata till det specificerade gapet mellan kolumner i båda dimensionerna på lämpligt sätt.
Exempel 2: Använd verktyget 'gap-{size}' för att lägga till ett gap mellan rader och kolumner oberoende
den ' gap-{storlek} ”-verktyget kan också implementeras med dimensionerna ”x(horisontal)” och ”y(vertical)” som ”gap-x-{size}” för rader och ”gap-y-{size}” för kolumner för att lägga till gapet mellan dem individuellt.Låt oss se dess praktiska genomförande.
HTML-kod
< huvud >
Ta en titt på den givna koden:
< länk href = '/dist/output.css' rel = 'stilmall' >
< / huvud >
< kropp >
< div klass = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div klass = 'border-2 border-orange-600' >Första handledningen< / div >
< div klass = 'border-2 border-orange-600' >Andra handledningen< / div >
< div klass = 'border-2 border-orange-600' >Tredje handledningen< / div >
< div klass = 'border-2 border-orange-600' >Fjärde handledningen< / div >
< div klass = 'border-2 border-orange-600' >Femte handledningen< / div >
< div klass = 'border-2 border-orange-600' >Sjätte handledningen< / div >
< div klass = 'border-2 border-orange-600' >Sjunde handledningen< / div >
< div klass = 'border-2 border-orange-600' >Åttonde handledningen< / div >
< / div >
< kropp >Här, ' gap-x-{storlek} ' verktyget lägger till gapet mellan rader och ' gap-y-{size} ” lägger till det angivna gapet mellan kolumner oberoende av varandra.
Produktion
Ovanstående resultat verifierar att gapet mellan rader och kolumner tillämpas i enlighet därmed.
Slutsats
'Tailwind CSS' tillhandahåller en inbyggd ' gap-{storlek} ” för att lägga till gapet mellan kolumnerna. Den kan också användas för att lägga till gapet mellan rader och kolumner separat via ' gap-x-{storlek} ' och den ' gap-y-{size} ' verktyg. Det här inlägget gav den fullständiga proceduren för att lägga till gapet mellan kolumner i Tailwind.
- I avsnittet '