CSS grid හි තීරු සහ පේළි අතර දුර

gap ගුණාංගය භාවිතයෙන් grid හි තීරු සහ පේළි අතර දුර එකවරම අර්ථ දැක්විය හැකිය.

එක් අගයක් හෝ හිස් අවකාශයකින් වෙන් කරන ලද අගයන් දෙකක් ලබා දිය හැකිය. එක් අගයක් ලබා දුන්නේ නම්, එය තීරු සහ පේළි අතර දුර එකවරම අර්ථ දක්වයි. අගයන් දෙකක් ලබා දුන්නේ නම්, පළමු අගය පේළි අතර දුර අර්ථ දක්වන අතර, දෙවන අගය තීරු අතර දුර අර්ථ දක්වයි.

නිදර්ශනය

තීරු සහ පේළි අතර සමාන දුරයක් අර්ථ දක්වමු:

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

Результат:

ප්‍රායෝගික කාර්යයන්