CSS গ্রিডে repeat ফাংশন

যদি আপনার একাধিক কলাম থাকে, যাদের জন্য একই আকার নির্ধারণ করা হয়েছে, তবে repeat ফাংশন ব্যবহার করে লেখাটি সহজ করা যেতে পারে। এই ফাংশনের প্রথম প্যারামিটারে নির্দেশিত হয় কলামের সংখ্যা, এবং দ্বিতীয়টিতে - তাদের প্রস্থ। আসুন উদাহরণের মাধ্যমে দেখি, এটি কীভাবে কাজ করে।

উদাহরণ

ধরুন আমাদের একই আকারের তিনটি কলাম আছে:

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

repeat ব্যবহার করে লেখাটি সহজ করি:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

উদাহরণ

ধরুন আমাদের একই আকারের তিনটি কলাম আছে, এবং চতুর্থটি অন্য আকারের:

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 2fr;
}

repeat ব্যবহার করে লেখাটি সহজ করি:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 2fr;
}

উদাহরণ

ধরুন আমাদের প্রথম তিনটি কলাম একই আকারের, এবং দ্বিতীয় তিনটি কলাম অন্য আকারের:

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

repeat ব্যবহার করে লেখাটি সহজ করি:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

উদাহরণ

ধরুন আমাদের প্রথম তিনটি কলাম একই আকারের, তারপর আরও একটি কলাম, এবং তারপর আরও তিনটি কলাম অন্য আকারের:

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

repeat ব্যবহার করে লেখাটি সহজ করi:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

উদাহরণ

সরলীকরণ যেকোনো আকারের এককের জন্য কাজ করে। উদাহরণস্বরূপ ধরা যাক আমাদের পিক্সেলে তিনটি কলাম আছে:

#parent {
	display: grid;
	grid-template-columns: 200px 200px 200px;
}

repeat ব্যবহার করে লেখাটি সহজ করি:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 200px);
}

ব্যবহারিক কাজ

repeat ব্যবহার করে 4টি একই আকারের কলাম তৈরি করুন।

4টি 100px আকারের কলাম তৈরি করুন, এবং আরও 3টি 2fr আকারের কলাম তৈরি করুন।

2টি 100px আকারের কলাম তৈরি করুন, আরও 3টি 200px আকারের কলাম তৈরি করুন, তারপর 1fr আকারের একটি কলাম তৈরি করুন, এবং তারপর 2টি 10% আকারের কলাম তৈরি করুন।