বৈশিষ্ট্য column-gap

বৈশিষ্ট্য column-gap মাল্টি-কলাম টেক্সটে কলামগুলির মধ্যে দূরত্ব, পাশাপাশি গ্রিডে কলামগুলির মধ্যে দূরত্ব নির্ধারণ করে। বৈশিষ্ট্যের মান হিসেবে যেকোনো আকারের একক বা normal কীওয়ার্ড (ডিফল্টরূপে) ব্যবহার করা হয়, যেখানে ব্রাউজার কলামগুলির মধ্যে সর্বোত্তম দূরত্ব নিজে থেকেই নির্ধারণ করে।

সিনট্যাক্স

cssসিলেক্টর {
  column-gap: মান;
}

উদাহরণ

এই উদাহরণে, কলামের সংখ্যা column-count (3টি) এবং তাদের মধ্যকার ফাঁক column-gap 50px নির্ধারণ করা হয়েছে। এবং কলামের প্রস্থ স্বয়ংক্রিয়ভাবে সেট করা হবে যাতে এই শর্তগুলি পূরণ হয় (কলামের সংখ্যা এবং তাদের মধ্যকার দূরত্ব):

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

উদাহরণ . normal মান

এই উদাহরণে, কলামের প্রস্থ column-width 150px, তাদের সংখ্যা column-count auto মানে সেট করা হয়েছে, এবং মধ্যকার ফাঁক column-gap - normal মানে সেট করা হয়েছে। সুতরাং, ব্রাউজার নিজে থেকেই প্রয়োজনীয় সংখ্যক কলাম এবং তাদের মধ্যকার ফাঁক নির্ধারণ করবে (তবে তাদের প্রস্থ হবে 150px):

html<div id="elem">
  some long text
</div>

css#elem {
  column-gap: normal;
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

উদাহরণ

গ্রিডে কলামগুলির মধ্যে দূরত্ব নির্ধারণ করা যাক:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  column-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}

Результат:

উদাহরণ

এবার কলামগুলির মধ্যে দূরত্ব % এ নির্ধারণ করা যাক:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  column-gap: 5%;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}

Результат:

আরও দেখুন