grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-columns: 1fr 2fr; /* 2nd column is twice the 1st */
fr ("ভগ্নাংশ") উপলব্ধ স্থান বিতরণ করে — 1fr 2fr এটি 1:2 অনুপাতে বিভক্ত করে। repeat(3, 1fr) তিনটি সমান ট্র্যাকের জন্য সংক্ষিপ্ত রূপ।
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
এই এক লাইন সম্পূর্ণভাবে প্রতিক্রিয়াশীল কার্ড গ্রিড তৈরি করে: প্রতিটি কলাম কমপক্ষে 250px; ব্রাউজার যতটা সম্ভব প্রতি সারিতে ফিট করে এবং বাকিটি মোড়ায় — ডেস্কটপে 4 কলাম থেকে মোবাইলে 1-এ স্বয়ংক্রিয়ভাবে যায়। auto-fit + minmax Grid এর সবচেয়ে পছন্দের প্যাটার্নগুলির মধ্যে একটি।
.hero {
grid-column: 1 / 3; /* span from column line 1 to 3 (two columns) */
grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
আইটেমগুলি একাধিক সারি/কলাম জুড়ে বিস্তৃত হতে পারে, যা ম্যাগাজিন-স্টাইল লেআউট সক্ষম করে যা Flexbox এর সাথে অসুবিধাজনক।
তারা ভালভাবে একত্রিত হয় — একটি গ্রিড কোষ নিজেই একটি flex কন্টেইনার হতে পারে।
Grid সবচেয়ে শক্তিশালী CSS লেআউট টুল — এটি সম্পূর্ণ-পৃষ্ঠা লেআউট এবং প্রতিক্রিয়াশীল কার্ড গ্রিড পরিষ্কারভাবে পরিচালনা করে, প্রায়শই নেস্টেড-div হ্যাক প্রতিস্থাপন করে।
auto-fit/minmax প্রতিক্রিয়াশীল প্যাটার্ন একা অনেক মিডিয়া কোয়েরির প্রয়োজন দূর করে।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন