CSS গ্রিডে কলাম এবং সারির মধ্যে দূরত্ব

gap প্রপার্টি ব্যবহার করে গ্রিডের কলাম এবং সারির মধ্যে দূরত্ব একই সাথে নির্ধারণ করা যায়।

একটি মান অথবা স্পেস দিয়ে আলাদা করা দুটি মান পাঠানো যেতে পারে। যদি একটি মান পাঠানো হয়, তা একই সাথে কলাম এবং সারির মধ্যে দূরত্ব নির্ধারণ করে। আর যদি দুটি মান পাঠানো হয়, তাহলে প্রথমটি সারির মধ্যে দূরত্ব নির্ধারণ করে, এবং দ্বিতীয়টি - কলামের মধ্যে দূরত্ব নির্ধারণ করে।

উদাহরণ

কলাম এবং সারির মধ্যে একই দূরত্ব নির্ধারণ করা যাক:

<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;
	gap: 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#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;
	gap: 20px 10px;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	padding: 10px;
	border: 2px solid #696989;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

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

একটি টেবিল তৈরি করুন, যেখানে কলাম এবং সারির মধ্যে দূরত্ব 10px হবে।

একটি টেবিল তৈরি করুন, যেখানে কলাম এবং সারির মধ্যে দূরত্ব যথাক্রমে 10px এবং 5% হবে।