Tailwind CSSBeginner
Layout: Flexbox ও Grid
Tailwind-এ Flexbox ও Grid দিয়ে layout তৈরি — container, flex, grid utilities বাংলায়।
10টি অংশবাংলা ভাষায়
Tailwind-এ CSS Flexbox ও Grid-কে সহজ utility classes-এ রূপান্তর করেছে।
Container
<div class="container mx-auto px-4">
এটি centered container
</div>Flexbox
Flexbox utilitieshtml
html
<!-- হরাইজন্টাল flex -->
<div class="flex justify-between items-center">
<span>Left</span>
<span>Center</span>
<span>Right</span>
</div>
<!-- ভার্টিকাল flex -->
<div class="flex flex-col items-center">
<span>Up</span>
<span>Down</span>
</div>
<!-- wrap -->
<div class="flex flex-wrap gap-4">
<div class="w-32">Item 1</div>
<div class="w-32">Item 2</div>
<div class="w-32">Item 3</div>
</div>Flexbox Justify Content
| Class | কাজ |
|---|---|
| justify-start | শুরুতে |
| justify-center | কেন্দ্রে |
| justify-end | শেষে |
| justify-between | দুই প্রান্তে, gap মাঝে |
| justify-around | প্রতিটির চারপাশে gap |
| justify-evenly | সমান gap |
Grid
Grid layouthtml
html
<!-- 3 columns grid -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-100 p-4">1</div>
<div class="bg-blue-200 p-4">2</div>
<div class="bg-blue-300 p-4">3</div>
</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div>Responsive 1</div>
<div>Responsive 2</div>
<div>Responsive 3</div>
</div>
<!-- Span 2 columns -->
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 bg-blue-100 p-4">2 columns span</div>
<div class="bg-blue-200 p-4">1 column</div>
</div>Flex vs Grid
এক-মাত্রিক লেআউটে (এক দিকে সাজানো) flex, দ্বিমাত্রিক লেআউটে (সারি + কলাম) grid ব্যবহার করুন। অনেক ক্ষেত্রে দুটি একসাথেও ব্যবহার হয়।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।