3 min read
•Question 4 of 38easyHow to use CSS Grid in Tailwind?
Grid layout utilities in Tailwind.
What You'll Learn
- Grid container setup
- Column configuration
- Responsive grids
Basic Grid
index.htmlHTML
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Responsive Grid
index.htmlHTML
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- 1 column mobile, 2 tablet, 4 desktop -->
</div>Spanning Columns
index.htmlHTML
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2">Takes 2 columns</div>
<div class="col-span-1">Takes 1</div>
<div class="col-span-1">Takes 1</div>
</div>Common Grid Classes
| Class | Effect |
|---|---|
| grid-cols-{n} | n columns |
| gap-{size} | Gap between items |
| col-span-{n} | Span n columns |
| row-span-{n} | Span n rows |