Afstand tussen kolomme en rye in CSS roosters

Met die gap eienskap kan jy gelyktydig die afstand tussen 'n rooster se kolomme en rye spesifiseer.

Jy kan óf een waarde oorhandig, óf twee waardes met 'n spasie ertussen. As een waarde oorhandig word, spesifiseer dit gelyktydig die afstand tussen kolomme en rye. As twee waardes oorhandig word, spesifiseer die eerste een die afstand tussen die rye, en die tweede een - tussen die kolomme.

Voorbeeld

Kom ons spesifiseer dieselfde afstand tussen kolomme en rye:

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

Результат:

Voorbeeld

Kom ons spesifiseer verskillende afstande tussen kolomme en rye:

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

Результат:

Praktiese take