Vahede seadmine CSS võrede veergude ja ridade vahel

Omadusega gap saab samaaegselt määrata võre veergude ja ridade vahelise kauguse.

Saab edastada kas ühe väärtuse või kaks tühikuga eraldatud väärtust. Kui edastatakse üks väärtus, määrab see samaaegselt nii veergude kui ridade vahelise kauguse. Kui aga edastatakse kaks väärtust, siis esimene määrab ridade vahelise kauguse ja teine - veergude vahelise kauguse.

Näide

Määrame veergude ja ridade vahele sama kauguse:

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

Результат:

Näide

Määrame veergude ja ridade vahele erinevad kaugused:

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

Результат:

Praktilised ülesanded