CSS গ্রিডে পিক্সেল এবং fr ইউনিট
কলামের প্রস্থ একই সাথে
পিক্সেল এবং
fr-এ নির্ধারণ করা
যায়:
html<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>css#parent {
display: grid;
grid-template-columns: 100px 1fr 50px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
Результат:
Задание 1
ধরুন আপনার গ্রিডে তিনটি কলাম রয়েছে।
এটি এমনভাবে তৈরি করুন যাতে প্রথম কলামটি
100px দখল করে, এবং বাকি
দুটি কলাম সমান আকারের হয়।
Задание 2
ধরুন আপনার গ্রিডে চারটি কলাম রয়েছে।
এটি এমনভাবে তৈরি করুন যাতে প্রথম এবং শেষ
কলামগুলি 100px দখল করে,
এবং বাকি কলামগুলি বাকি জায়গা এমনভাবে ভাগ করে নেয়
যাতে তৃতীয় কলামটি দ্বিতীয় কলামের চেয়ে 1.5
গুণ বড় হয়।