grid-template বৈশিষ্ট্য

grid-template বৈশিষ্ট্যটি নির্ধারণ করে একটি উপাদান গ্রিড বা গ্রিডে যে সারি এবং কলামগুলি দখল করবে তার সংখ্যা এবং প্রস্থ এবং এটি grid-template-rows এবং grid-template-columns বৈশিষ্ট্যগুলির একটি সংক্ষিপ্ত রূপ। যে সারি এবং কলামগুলিতে উপাদানটি স্থাপন করা হবে সেগুলি স্ল্যাশের মাধ্যমে নির্দেশিত হয়। grid-template বৈশিষ্ট্যটি প্যারেন্ট উপাদানে নির্দিষ্ট করা হয় এবং চাইল্ড উপাদানগুলির বিন্যাস নির্ধারণ করে। বৈশিষ্ট্যের মানে আমরা যেকোনো আকারের এককে সারি বা কলামের প্রস্থ নির্দেশ করি।

বৈশিষ্ট্যগুলিতে পিক্সেল মান নির্দিষ্ট করার সময় উপাদানগুলির আকার সঠিকভাবে তাদের সাথে মিলবে। যদি আমরা auto শব্দটি নির্দিষ্ট করি, তাহলে কলাম এবং সারিগুলি হবে সমস্ত উপলব্ধ স্থান পূরণ করুন। ব্যবহার fr (ভগ্নাংশ) একক মানে, যে সমস্ত স্থান বিভক্ত করা হবে সমান অংশে। এর সুবিধা fr হল এর বিভিন্ন ধারক বা স্ক্রীন রেজোলিউশনের সাথে অভিযোজনযোগ্যতা, যেহেতু fr কেবল তাদের নির্দিষ্ট সংখ্যক ভগ্নাংশে বিভক্ত করে পিক্সেলে সঠিক আকারের সাথে আবদ্ধ না হয়ে।

সিনট্যাক্স

সিলেক্টর {
	grid-template: সারির প্রস্থ এবং সংখ্যা / কলামের প্রস্থ এবং সংখ্যা;
}

উদাহরণ

আসুন grid-template বৈশিষ্ট্য ব্যবহার করে একটি টেবিল তৈরি করি:

<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-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#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-template: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	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-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

আরও দেখুন

grid বৈশিষ্ট্য,
যা কলাম এবং সারি বৈশিষ্ট্যগুলির একটি সংক্ষিপ্ত রূপ নির্দিষ্ট করে
grid-template-rows বৈশিষ্ট্য,
যা গ্রিডে সারির সংখ্যা এবং প্রস্থ নির্ধারণ করে
grid-template-columns বৈশিষ্ট্য,
যা গ্রিডে কলামের সংখ্যা এবং প্রস্থ নির্ধারণ করে