Definition af gridkolonner

CSS Grid er et todimensionelt layoutsystem, der lader dig placere elementer i rækker og kolonner samtidigt. Tailwind CSS tilbyder værktøjsklasser, der svarer direkte til CSS Grid-egenskaber, så du aldrig behøver at skrive display: grid eller grid-template-columns i hånden. Du tilføjer blot de rigtige klassenavne til dine HTML-elementer.

Hvis du vil gøre et element til en gittercontainer, skal du anvende klassen grid. Uden en kolonnedefinition placeres alle børn som standard i én enkelt kolonne. Dette er udgangspunktet for ethvert Tailwind Grid-layout — alle gitterværktøjer, du tilføjer, bygger videre på klassen grid.

Tailwind har grid-cols-1 til grid-cols-12, som deler containeren op i kolonner med samme bredde. Internt kompileres grid-cols-3 til grid-template-columns: repeat(3, minmax(0, 1fr)). Det betyder, at alle kolonner deler den tilgængelige bredde ligeligt, hvilket gør det perfekt til kortgitre og sektioner med funktioner.

Forskellige antal kolonner passer til forskellige anvendelser. Et gitter med 2 kolonner fungerer godt til sektioner med opdelt indhold, 3 kolonner til rækker med funktioner og 4 eller 6 kolonner til produkt- eller billedgallerier. Tailwind understøtter alle heltal fra 1 til 12, så du får det samme udvalg som i Bootstraps gittersystem, men uden rækkecontainere.

Et gitter med 12 kolonner er en klassisk designkonvention, fordi 12 kan divideres med 1, 2, 3, 4 og 6, hvilket giver stor fleksibilitet i layoutet. Med Tailwinds grid-cols-12 optager hvert underordnet element som standard én kolonne. Derefter bruger du col-span-* på individuelle underordnede elementer for at få dem til at spænde over flere kolonner — det udforsker vi i næste lektion.

Når de foruddefinerede forudindstillinger fra 1 til 12 ikke er nok, kan du bruge grid-cols-none til at fjerne enhver kolonneskabelon og derefter definere din egen med vilkårlige værdier i grid-cols-[...]. Klammenotationen lader dig skrive enhver gyldig CSS-værdi for grid-template-columns direkte i et klassenavn, så du får ubegrænset fleksibilitet uden at forlade HTML.

Moderne browsere understøtter nøgleordet subgrid, som lader et indlejret gitter arve sin overordnede komponents kolonnespor. Tailwind v3.4+ indeholder grid-cols-subgrid til dette formål. Subgrid er effektivt til at justere formularetiketter i kortkomponenter, der ligger i et overordnet gitter — de interne elementer i hvert kort justeres efter det overordnede gitters linjer.

Værktøjerne gap-* tilføjer ensartet afstand mellem gitterceller. Brug gap-4 til ensartet afstand i begge retninger, gap-x-4 til afstand kun vandret og gap-y-6 til afstand kun lodret. I modsætning til marginer tilføjer gap ikke ekstra plads ved gitterets yderkanter, så dit layout forbliver rent og forudsigeligt.

I de fleste virkelige layouts ønsker du færre kolonner på små skærme og flere på større skærme. Tailwinds responsive præfikser gør dette enkelt: grid-cols-1 md:grid-cols-2 lg:grid-cols-4 stabler elementerne på mobilen, viser to kolonner på tablets og fire på desktops. Denne mobile-first-tilgang betyder, at klassen uden præfiks er grundlaget, mens klasser med præfiks tilsidesætter den ved større brudpunkter.

CSS Grids nøgleord auto-fill og auto-fit opretter dynamiske antal kolonner baseret på den tilgængelige plads. Med Tailwinds syntaks til vilkårlige værdier kan du skrive grid-cols-[repeat(auto-fill,minmax(200px,1fr))] for automatisk at tilføje kolonner, efterhånden som pladsen tillader det. auto-fill bevarer tomme spor, mens auto-fit sammenklapper dem — begge skaber ægte flydende gitre uden mediaforespørgsler.

Her samler vi det hele i et rigtigt mønster for en funktionssektion, som bruges på marketingsider. Hvert funktionskort har et ikon, en overskrift og en beskrivelse. Gitteret er grid-cols-1 sm:grid-cols-3, så det stables på mobilen og fordeles i tre kolonner på større skærme. Ensartet indvendig afstand og en diskret baggrund skaber visuel adskillelse uden kanter.

I denne lektion lærte du, at gitterklassen aktiverer en CSS Grid-container, at grid-cols-1 til grid-cols-12 definerer kolonnespor med samme bredde, og at responsive præfikser som md:grid-cols-3 skifter antallet af kolonner ved brudpunkter. Nu undersøger vi, hvordan gitterelementer kan spænde over flere kolonner og rækker til komplekse layouts.