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

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

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

উদাহরণ

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

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;
  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;
}

Результат:

উদাহরণ

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

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;
  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;
}

Результат:

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