grid-template-columns প্রপার্টি

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

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

সিনট্যাক্স

সিলেক্টর {
	grid-template-columns: কলামের প্রস্থ;
}

উদাহরণ

আসুন আমাদের গ্রিড এলিমেন্টের জন্য কলামের প্রস্থ নির্ধারণ করি:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

আসুন প্রথম এবং তৃতীয় কলামের জন্য পিক্সেলে নির্দিষ্ট প্রস্থ নির্ধারণ করি, এবং দ্বিতীয় কলামটি স্বয়ংক্রিয়ভাবে উপলব্ধ স্থান পূরণ করুক:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

এখন grid-template-columns প্রপার্টি ব্যবহার করে এমনভাবে করি যাতে প্রথম এবং দ্বিতীয় কলাম কন্টেইনারের এক ভাগ নেয়, এবং তৃতীয় কলাম - তিন ভাগ:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

fr এককে উল্লিখিত মানগুলি ভগ্নাংশের 형태 নিতে পারে। আসুন পূর্ববর্তী উদাহরণটি পরিবর্তন করি, দ্বিতীয় এবং তৃতীয় কলামের প্রস্থ ভগ্নাংশ সংখ্যায় উল্লেখ করে:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 0.5fr 2.5fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

আসুন grid-template-columns প্রপার্টিতে repeat() ফাংশন উল্লেখ করি, যা কন্টেইনারকে জানাবে যে সমস্ত তিনটি কলামের একই প্রস্থ থাকা উচিত:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 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>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 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>

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

এখন আসুন কলামের প্রস্থ নির্ধারণ করি repeat() ফাংশন এবং মুক্ত একক fr ব্যবহার করে সংমিশ্রিত মান নির্ধারণ করে:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

repeat() ফাংশনে auto-fill মান উল্লেখ করা যেতে পারে, যা আমাদের কন্টেইনারকে আমাদের প্রয়োজনীয় প্রস্থের অভিন্ন কলাম দিয়ে পূরণ করবে:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

auto-fill-এর সাথে minmax ফাংশন উল্লেখ করা খুব সুবিধাজনক, যা কলামের প্রস্থের পরিসর নির্ধারণ করে ন্যূনতম থেকে সর্বোচ্চ মান পর্যন্ত। যদি কন্টেইনারের প্রস্থ সমস্ত কলাম ধারণ করতে না পারে, তবে তাদের কিছু নতুন লাইনে চলে যাবে, এবং লাইনের কলামগুলি সেখানে সমানভাবে বিতরণ হবে। আসুন পূর্ববর্তী উদাহরণটি পরিবর্তন করি, এতে minmax ফাংশন উল্লেখ করে। কলাম স্থাপনের বিভিন্ন বিকল্প দেখতে আপনার ব্রাউজার পৃষ্ঠার প্রস্থ পরিবর্তন করুন:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

এখন আসুন auto-fit প্রপার্টি উল্লেখ করি, যা auto-fill থেকে আলাদা যে, এটি কলামের সংখ্যাকে কন্টেইনারের উপলব্ধ প্রস্থের সাথে মানিয়ে নেয়, সেগুলিকে প্রসারিত বা সংকুচিত করে:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

fr-এর পাশাপাশি %-এ মান ব্যবহার করা যেতে পারে, যা কলামটি কন্টেইনারের কত অংশ নেবে তাও নির্ধারণ করে। এক্ষেত্রে প্রথমে %-এ কলামের আকার গণনা করা হবে, এবং অবশিষ্ট মুক্ত স্থান ভাগে বিভক্ত হবে:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50% 1fr 2fr 30%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

আসুন একসাথে প্রপার্টি ব্যবহার করি grid-template-columns এবং grid-template-rows:

<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-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

উদাহরণ

আসুন প্রপার্টি ব্যবহার করে grid-template-columns এবং grid-template-rows নয়টি সেলের একটি টেবিল তৈরি করি, যা তিনটি সারিতে অবস্থিত। এবং দ্বিতীয় এবং তৃতীয় সারির প্রস্থ একই হবে, এবং প্রতিটি কলামের প্রস্থ ভিন্ন হবে:

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

আরও দেখুন

grid-template-rows প্রপার্টি,
যা গ্রিডে সারির সংখ্যা এবং প্রস্থ নির্ধারণ করে
grid-auto-columns প্রপার্টি,
যা অন্তর্নিহিত গ্রিডে কলামের সংখ্যা এবং প্রস্থ নির্ধারণ করে