grid template rows tutorial in tailwind css bangla

Download 1M+ code from https://codegive.com/d677768
tailwind css grid template rows tutorial (বাংলা)

tailwind css একটি utility-first css framework, যা আপনাকে দ্রুত এবং সহজে responsive designs তৈরি করতে সাহায্য করে। এই টিউটোরিয়ালে আমরা grid template rows সম্পর্কে আলোচনা করবো, যা css grid layout-এর একটি অংশ।

grid template rows কি?

grid template rows প্রোপার্টি ব্যবহার করে আপনি গ্রিডের রো গুলোর উচ্চতা নির্ধারণ করতে পারেন। tailwind css-এ এই প্রোপার্টিটি বিভিন্ন utility ক্লাসের মাধ্যমে ব্যবহার করা হয়।

tailwind css-এ grid template rows ব্যবহার করার জন্য প্রস্তুতি

প্রথমে নিশ্চিত করুন যে আপনার প্রোজেক্টে tailwind css ইনস্টল করা আছে। যদি না থাকে, তাহলে নীচের কোডটি ব্যবহার করে tailwind css ইনস্টল করুন:

```bash
npm install -d tailwindcss
npx tailwindcss init
```

grid layout তৈরি করা

basic structure

আমরা একটি সহজ গ্রিড তৈরি করবো যেখানে ৩টি রো থাকবে।

```html
!doctype html
html lang="bn"
head
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
link href="https://cdn.jsdelivr.net/npm/tailwind..." rel="stylesheet"
titlegrid template rows example/title
/head
body class="bg-gray-200 p-10"
div class="grid grid-rows-3 gap-4"
div class="bg-red-500 h-20"row 1/div
div class="bg-green-500 h-40"row 2/div
div class="bg-blue-500 h-20"row 3/div
/div
/body
/html
```

উপরে দেওয়া কোড বিশ্লেষণ

1. **`grid`**: এটা গ্রিড কন্টেইনার তৈরি করে।
2. **`grid-rows-3`**: এখানে আমরা ৩টি রো নির্ধারণ করেছি।
3. **`gap-4`**: এটি রো গুলোর মধ্যে ১rem (৪ x ০.২৫rem) গ্যাপ তৈরি করে।
4. **`h-20`, `h-40`**: বিভিন্ন রো গুলোর উচ্চতা নির্ধারণ করে।

grid template rows কাস্টমাইজ করা

আপনি যদি বিভিন্ন উচ্চতা চান, তাহলে আপনি কাস্টম ক্লাস তৈরি করতে পারেন। উদাহরণস্বরূপ, নিচের কোডে আমরা বিভিন্ন উচ্চতা নির্ধারণ করেছি।

```html
div class="grid grid-rows-[100px,200px,300px] gap-4"
div class="bg-red-500"row 1/div
div class="bg-green-500"row 2/div
div class="bg-blue-500"row 3/div
/div
` ...

#TailwindCSS #GridTemplateRows #python
Grid template rows tutorial
Tailwind CSS Bangla
Tailwind CSS grid
Grid layout Bangla
Tailwind CSS tutorial
Bangla CSS tutorial
Responsive grid design
CSS grid tutorial Bangla
Tailwind grid system
Grid row configurations
Tailwind CSS tips
Bangla web design
Tailwind CSS examples
Grid template rows examples
Tailwind CSS for beginners