Layout with Grid
Svep för att visa menyn
Tailwind provides utility classes to create grid-based layouts.
Enable Grid
<div className="grid">
<div>Item 1</div>
<div>Item 2</div>
</div>
grid: enables grid layout.
Columns
<div className="grid grid-cols-2 gap-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
grid-cols-2: creates 2 columns;gap-4: adds space between items.
More Columns
<div className="grid grid-cols-3 gap-2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
grid-cols-3: creates 3 columns.
Span Columns
<div className="grid grid-cols-3 gap-4">
<div className="col-span-2">Wide</div>
<div>Small</div>
</div>
col-span-2: element takes 2 columns.
Use grid utilities to create structured layouts with rows, columns, and spacing.
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 1. Kapitel 5
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Layout with Grid
Tailwind provides utility classes to create grid-based layouts.
Enable Grid
<div className="grid">
<div>Item 1</div>
<div>Item 2</div>
</div>
grid: enables grid layout.
Columns
<div className="grid grid-cols-2 gap-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
grid-cols-2: creates 2 columns;gap-4: adds space between items.
More Columns
<div className="grid grid-cols-3 gap-2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
grid-cols-3: creates 3 columns.
Span Columns
<div className="grid grid-cols-3 gap-4">
<div className="col-span-2">Wide</div>
<div>Small</div>
</div>
col-span-2: element takes 2 columns.
Use grid utilities to create structured layouts with rows, columns, and spacing.
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 1. Kapitel 5
