Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Bygga Layouter med Grid-Verktyg | Layoutgrunder
Tailwind CSS för webbutveckling

bookBygga Layouter med Grid-Verktyg

Ett annat sätt att organisera webbplatsinnehåll är genom rutnätslayouter. Tailwind CSS erbjuder kraftfulla verktyg för att skapa rutnätslayouter. Detta kapitel förklarar hur du använder Tailwind CSS grid utilities för att skapa grid-containrar och grid-element.

Grid-container

För att definiera en grid-container, använd klassen grid. Du kan styra antalet kolumner, avståndet mellan rader och kolumner samt mer.

index.html

index.html

copy

Förklaring

  1. grid: Ställer in elementets display till grid;
  2. grid-cols-3: Definierar ett rutnät med tre kolumner;
  3. gap-4: Lägger till ett mellanrum på 1rem (16px) mellan rutnätsobjekt.

Rutnät med rader

index.html

index.html

copy

grid-rows-2: Definierar ett rutnät med två rader.

Kontroll av kolumn- och radhöjder

Storleken på kolumner och rader kan styras med hjälp av klasserna grid-cols-{n} och grid-rows-{n}, där {n} representerar antalet kolumner eller rader. Det går även att använda fraktionella enheter (fr), procent och andra storleksenheter.

index.html

index.html

copy

Förklaring

  1. col-span-2: Sträcker elementet över två kolumner;
  2. col-span-3: Sträcker elementet över alla tre kolumner.

Fasta och flexibla storlekar

index.html

index.html

copy

Förklaring

  1. w-1/2: Anger elementets bredd till 50% av dess behållare;
  2. w-full: Anger elementets bredd till 100% av dess behållare;
  3. w-1/3: Anger elementets bredd till 33,33% av dess behållare.

Rutnätsmall för kolumner och rader

Specifika hjälparklasser kan användas för att definiera antal och bredd på kolumner och rader i rutnätslayouten.

Anpassade rutnätskolumner

index.html

index.html

copy

Förklaring

  1. grid-cols-4: Definierar ett rutnät med fyra kolumner;
  2. col-span-1: Sträcker elementet över en kolumn;
  3. col-span-2: Sträcker elementet över två kolumner.

Anpassade rutnätsrader

index.html

index.html

copy

Förklaring

  1. grid-rows-3: Definierar ett rutnät med tre rader;
  2. row-span-2: Sträcker elementet över två rader;
  3. row-span-1: Sträcker elementet över en rad.

Obs

Se officiella dokumentationen för mer information om Tailwind CSS Grid.

1. Vilken klass ställer in display-egenskapen till grid?

2. Hur definierar du ett rutnät med tre kolumner?

question mark

Vilken klass ställer in display-egenskapen till grid?

Select the correct answer

question mark

Hur definierar du ett rutnät med tre kolumner?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 5

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you explain how to use grid utilities for responsive layouts?

What are some common use cases for grid layouts in Tailwind CSS?

Can you show more examples of combining grid and flex utilities?

Awesome!

Completion rate improved to 3.57

bookBygga Layouter med Grid-Verktyg

Svep för att visa menyn

Ett annat sätt att organisera webbplatsinnehåll är genom rutnätslayouter. Tailwind CSS erbjuder kraftfulla verktyg för att skapa rutnätslayouter. Detta kapitel förklarar hur du använder Tailwind CSS grid utilities för att skapa grid-containrar och grid-element.

Grid-container

För att definiera en grid-container, använd klassen grid. Du kan styra antalet kolumner, avståndet mellan rader och kolumner samt mer.

index.html

index.html

copy

Förklaring

  1. grid: Ställer in elementets display till grid;
  2. grid-cols-3: Definierar ett rutnät med tre kolumner;
  3. gap-4: Lägger till ett mellanrum på 1rem (16px) mellan rutnätsobjekt.

Rutnät med rader

index.html

index.html

copy

grid-rows-2: Definierar ett rutnät med två rader.

Kontroll av kolumn- och radhöjder

Storleken på kolumner och rader kan styras med hjälp av klasserna grid-cols-{n} och grid-rows-{n}, där {n} representerar antalet kolumner eller rader. Det går även att använda fraktionella enheter (fr), procent och andra storleksenheter.

index.html

index.html

copy

Förklaring

  1. col-span-2: Sträcker elementet över två kolumner;
  2. col-span-3: Sträcker elementet över alla tre kolumner.

Fasta och flexibla storlekar

index.html

index.html

copy

Förklaring

  1. w-1/2: Anger elementets bredd till 50% av dess behållare;
  2. w-full: Anger elementets bredd till 100% av dess behållare;
  3. w-1/3: Anger elementets bredd till 33,33% av dess behållare.

Rutnätsmall för kolumner och rader

Specifika hjälparklasser kan användas för att definiera antal och bredd på kolumner och rader i rutnätslayouten.

Anpassade rutnätskolumner

index.html

index.html

copy

Förklaring

  1. grid-cols-4: Definierar ett rutnät med fyra kolumner;
  2. col-span-1: Sträcker elementet över en kolumn;
  3. col-span-2: Sträcker elementet över två kolumner.

Anpassade rutnätsrader

index.html

index.html

copy

Förklaring

  1. grid-rows-3: Definierar ett rutnät med tre rader;
  2. row-span-2: Sträcker elementet över två rader;
  3. row-span-1: Sträcker elementet över en rad.

Obs

Se officiella dokumentationen för mer information om Tailwind CSS Grid.

1. Vilken klass ställer in display-egenskapen till grid?

2. Hur definierar du ett rutnät med tre kolumner?

question mark

Vilken klass ställer in display-egenskapen till grid?

Select the correct answer

question mark

Hur definierar du ett rutnät med tre kolumner?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 5
some-alt