গ্রিড-এরিয়া প্রপার্টি
grid-area প্রপার্টিটি
গ্রিডে একটি এলিমেন্টের নাম নির্দিষ্ট করে।
এই নামগুলি grid-template-areas প্রপার্টিতে উল্লেখ করা হয়,
যেখানে গ্রিডে এলিমেন্টগুলিকে কীভাবে স্থাপন করতে হবে
সেই ক্রমে তাদের নামগুলি তালিকাভুক্ত করা থাকে।
সিনট্যাক্স
সিলেক্টর {
grid-area: এলিমেন্টের-নাম;
}
উদাহরণ
আসুন আমাদের গ্রিডের এলিমেন্টগুলির জন্য নাম এবং অবস্থান নির্ধারণ করি:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#elem1 {
grid-area: first;
}
#elem2 {
grid-area: second;
}
#elem3 {
grid-area: third;
}
#parent {
display: grid;
grid-template-areas: 'third second first';
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
আরো দেখুন
-
grid-template-areasপ্রপার্টি,
যা গ্রিডে এলিমেন্টগুলির অবস্থান নির্ধারণ করে
