Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Lay-outs Bouwen met Grid-hulpprogramma's | Layoutbasisprincipes
Tailwind CSS voor Webontwikkeling

bookLay-outs Bouwen met Grid-hulpprogramma's

Een andere manier om website-inhoud te organiseren is via grids. Tailwind CSS biedt krachtige utilities voor het maken van grid-layouts. Dit hoofdstuk legt uit hoe je met Tailwind CSS grid-utilities gridcontainers en items opzet.

Gridcontainer

Gebruik de grid-klasse om een gridcontainer te definiëren. Je kunt het aantal kolommen, de afstanden tussen rijen en kolommen en meer instellen.

index.html

index.html

copy

Uitleg

  1. grid: Stelt de weergave van het element in op grid;
  2. grid-cols-3: Definieert een grid met drie kolommen;
  3. gap-4: Voegt een tussenruimte van 1rem (16px) toe tussen grid-items.

Grid met rijen

index.html

index.html

copy

grid-rows-2: Definieert een grid met twee rijen.

Kolom- en rijgroottes beheren

De groottes van kolommen en rijen kunnen worden beheerd met de klassen grid-cols-{n} en grid-rows-{n}, waarbij {n} het aantal kolommen of rijen aangeeft. Ook fractionele eenheden (fr), percentages en andere maatvoeringseenheden zijn mogelijk.

index.html

index.html

copy

Uitleg

  1. col-span-2: Laat het element over twee kolommen lopen;
  2. col-span-3: Laat het element over alle drie de kolommen lopen.

Vaste en flexibele afmetingen

index.html

index.html

copy

Uitleg

  1. w-1/2: Stelt de breedte van het element in op 50% van de container;
  2. w-full: Stelt de breedte van het element in op 100% van de container;
  3. w-1/3: Stelt de breedte van het element in op 33,33% van de container.

Grid-sjabloonkolommen en -rijen

Specifieke utility-klassen gebruiken om het aantal en de breedte van kolommen en rijen in het grid-layout te definiëren.

Aangepaste grid-kolommen

index.html

index.html

copy

Uitleg

  1. grid-cols-4: Definieert een raster met vier kolommen;
  2. col-span-1: Laat het element over één kolom lopen;
  3. col-span-2: Laat het element over twee kolommen lopen.

Aangepaste Grid-rijen

index.html

index.html

copy

Uitleg

  1. grid-rows-3: Definieert een grid met drie rijen;
  2. row-span-2: Laat het element over twee rijen spreiden;
  3. row-span-1: Laat het element over één rij spreiden.

Opmerking

Raadpleeg de officiële documentatie voor meer informatie over de Tailwind CSS Grid.

1. Welke klasse stelt de display-eigenschap in op grid?

2. Hoe definieer je een grid met drie kolommen?

question mark

Welke klasse stelt de display-eigenschap in op grid?

Select the correct answer

question mark

Hoe definieer je een grid met drie kolommen?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 5

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

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

bookLay-outs Bouwen met Grid-hulpprogramma's

Veeg om het menu te tonen

Een andere manier om website-inhoud te organiseren is via grids. Tailwind CSS biedt krachtige utilities voor het maken van grid-layouts. Dit hoofdstuk legt uit hoe je met Tailwind CSS grid-utilities gridcontainers en items opzet.

Gridcontainer

Gebruik de grid-klasse om een gridcontainer te definiëren. Je kunt het aantal kolommen, de afstanden tussen rijen en kolommen en meer instellen.

index.html

index.html

copy

Uitleg

  1. grid: Stelt de weergave van het element in op grid;
  2. grid-cols-3: Definieert een grid met drie kolommen;
  3. gap-4: Voegt een tussenruimte van 1rem (16px) toe tussen grid-items.

Grid met rijen

index.html

index.html

copy

grid-rows-2: Definieert een grid met twee rijen.

Kolom- en rijgroottes beheren

De groottes van kolommen en rijen kunnen worden beheerd met de klassen grid-cols-{n} en grid-rows-{n}, waarbij {n} het aantal kolommen of rijen aangeeft. Ook fractionele eenheden (fr), percentages en andere maatvoeringseenheden zijn mogelijk.

index.html

index.html

copy

Uitleg

  1. col-span-2: Laat het element over twee kolommen lopen;
  2. col-span-3: Laat het element over alle drie de kolommen lopen.

Vaste en flexibele afmetingen

index.html

index.html

copy

Uitleg

  1. w-1/2: Stelt de breedte van het element in op 50% van de container;
  2. w-full: Stelt de breedte van het element in op 100% van de container;
  3. w-1/3: Stelt de breedte van het element in op 33,33% van de container.

Grid-sjabloonkolommen en -rijen

Specifieke utility-klassen gebruiken om het aantal en de breedte van kolommen en rijen in het grid-layout te definiëren.

Aangepaste grid-kolommen

index.html

index.html

copy

Uitleg

  1. grid-cols-4: Definieert een raster met vier kolommen;
  2. col-span-1: Laat het element over één kolom lopen;
  3. col-span-2: Laat het element over twee kolommen lopen.

Aangepaste Grid-rijen

index.html

index.html

copy

Uitleg

  1. grid-rows-3: Definieert een grid met drie rijen;
  2. row-span-2: Laat het element over twee rijen spreiden;
  3. row-span-1: Laat het element over één rij spreiden.

Opmerking

Raadpleeg de officiële documentatie voor meer informatie over de Tailwind CSS Grid.

1. Welke klasse stelt de display-eigenschap in op grid?

2. Hoe definieer je een grid met drie kolommen?

question mark

Welke klasse stelt de display-eigenschap in op grid?

Select the correct answer

question mark

Hoe definieer je een grid met drie kolommen?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 5
some-alt