Definiera gridkolumner

CSS Grid är ett tvådimensionellt layoutsystem som låter dig placera objekt i rader och kolumner samtidigt. Tailwind CSS tillhandahåller verktygsklasser som direkt motsvarar CSS Grid-egenskaper, så du behöver aldrig skriva display: grid eller grid-template-columns för hand. Du lägger helt enkelt till rätt klassnamn i dina HTML-element.

Om du vill göra ett element till en gridcontainer använder du klassen grid. Utan någon kolumndefinition staplas alla underordnade element som standard i en enda kolumn. Detta är utgångspunkten för alla Tailwind Grid-layouter — varje gridverktyg du lägger till bygger vidare på klassen grid.

Tailwind tillhandahåller grid-cols-1 till och med grid-cols-12 för att dela upp containern i kolumner med samma bredd. Internt kompileras grid-cols-3 till grid-template-columns: repeat(3, minmax(0, 1fr)). Det innebär att alla kolumner delar på det tillgängliga utrymmet lika, vilket passar perfekt för kortlayouter och funktionssektioner.

Olika antal kolumner passar för olika användningsområden. Ett rutnät med 2 kolumner fungerar bra för sektioner med delat innehåll, 3 kolumner för rader med funktioner och 4 eller 6 kolumner för produkt- eller bildgallerier. Tailwind stöder alla heltal från 1 till 12, vilket ger samma omfång som Bootstraps gridsystem, men utan radomslutningarna.

Rutnätet med 12 kolumner är en klassisk designkonvention eftersom 12 är delbart med 1, 2, 3, 4 och 6, vilket ger stor flexibilitet vid layoutarbete. Med Tailwinds grid-cols-12 upptar varje underordnat element som standard en kolumn. Därefter använder du col-span-* på enskilda underordnade element för att få dem att sträcka sig över flera kolumner – något vi går igenom i nästa lektion.

När de fördefinierade värdena från 1 till 12 inte räcker använder du grid-cols-none för att ta bort eventuell kolumnmall och definierar sedan en egen med godtyckliga värden i grid-cols-[...]. Hakparentesnotationen låter dig skriva valfritt giltigt CSS-värde för grid-template-columns direkt i ett klassnamn, vilket ger obegränsad flexibilitet utan att lämna HTML.

Moderna webbläsare stöder nyckelordet subgrid, som låter ett nästlat rutnät ärva sin överordnade grids kolumnspår. Tailwind v3.4+ innehåller grid-cols-subgrid för detta ändamål. Subgrid är användbart när formuläretiketter i kortkomponenter ska linjera med ett överordnat rutnät – de interna elementen i varje kort linjeras då med det övergripande rutnätets linjer.

Verktygen gap-* lägger till ett enhetligt mellanrum mellan rutnätsceller. Använd gap-4 för samma mellanrum i båda riktningarna, gap-x-4 för mellanrum endast horisontellt och gap-y-6 för mellanrum endast vertikalt. Till skillnad från marginaler lägger gap inte till extra utrymme längs rutnätets ytterkanter, vilket håller layouten ren och förutsägbar.

I de flesta verkliga layouter vill du ha färre kolumner på små skärmar och fler på större. Tailwinds responsiva prefix gör detta enkelt: grid-cols-1 md:grid-cols-2 lg:grid-cols-4 staplar elementen på mobiler, visar två kolumner på surfplattor och fyra på datorer. Detta mobile-first-tillvägagångssätt innebär att klassen utan prefix är grundläget och att prefixförsedda klasser skriver över det vid större brytpunkter.

CSS Grids nyckelord auto-fill och auto-fit skapar ett dynamiskt antal kolumner baserat på det tillgängliga utrymmet. Med Tailwinds syntax för godtyckliga värden kan du skriva grid-cols-[repeat(auto-fill,minmax(200px,1fr))] för att automatiskt lägga till kolumner när utrymmet tillåter det. auto-fill behåller tomma spår, medan auto-fit komprimerar dem – båda skapar verkligt flexibla rutnät utan mediefrågor.

Här sätter vi ihop delarna i ett verkligt mönster för en funktionssektion som används på marknadsföringssidor. Varje funktionskort har en ikon, en rubrik och en beskrivning. Rutnätet är grid-cols-1 sm:grid-cols-3, så det staplas på mobiler och fördelas över tre kolumner på större skärmar. Enhetlig utfyllnad och en diskret bakgrund skapar visuell avskiljning utan ramar.

I den här lektionen har du lärt dig att grid-klassen aktiverar en CSS Grid-container, att grid-cols-1 till och med grid-cols-12 definierar kolumnspår med samma bredd och att responsiva prefix som md:grid-cols-3 ändrar antalet kolumner vid brytpunkter. Nästa steg är att lära dig hur rutnätselement kan sträcka sig över flera kolumner och rader för komplexa layouter.