CSS গ্রিড বৈশিষ্ট্যের সংক্ষিপ্ত রূপ
grid বৈশিষ্ট্যটি
গ্রিড কন্টেইনাররের সকল কলাম এবং সারির বৈশিষ্ট্যের
একটি সংক্ষিপ্ত রূপ। সমস্ত
মান একটি স্ল্যাশ দিয়ে একই লাইনে লেখা হয়।
grid এর মাধ্যমে শুধুমাত্র এক ধরনের বৈশিষ্ট্য বর্ণনা করা যায় -
স্পষ্ট (grid-template-rows,
grid-template-columns,
grid-template-areas)
বা অস্পষ্ট (grid-auto-rows,
grid-auto-columns,
grid-auto-flow)।
যে বৈশিষ্ট্যগুলি
উল্লেখ করা হয়নি,
তারা ডিফল্ট মান গ্রহণ করে।
উদাহরণ
আসুন grid বৈশিষ্ট্য ব্যবহার করে
একটি টেবিল তৈরি করি:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
উদাহরণ
এবং এখন দ্বিতীয় এবং তৃতীয় সারিকে একই প্রস্থ এবং প্রতিটি কলামকে বিভিন্ন প্রস্থ দেওয়া যাক:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 60px 1fr 60px / 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
উদাহরণ
এবং এখন আগের উদাহরণের টেবিলে শীর্ষ সারির প্রস্থ দুই ফ্র্যাকশন করি, এবং প্রথম কলামটি আধা ফ্র্যাকশন করি:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ব্যবহারিক কাজ
নিম্নলিখিত উদাহরণটি বাস্তবায়ন করুন:
নিম্নলিখিত উদাহরণটি বাস্তবায়ন করুন:
নিম্নলিখিত উদাহরণটি বাস্তবায়ন করুন:
