Atstumas tarp stulpelių ir eilučių CSS garduose

Naudojant savybę gap galima vienu metu nustatyti atstumą tarp stulpelių ir eilučių gardo.

Galima perduoti vieną reikšmę arba dvi atskirtus tarpu. Jei perduota viena reikšmė, ji vienu metu nustato atstumą tarp stulpelių ir eilučių. Jei perduotos dvi reikšmės, tai pirmoji nustato atstumą tarp eilučių, o antroji - tarp stulpelių.

Pavyzdys

Nustatykime vienodą atstumą tarp stulpelių ir eilučių:

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

Результат:

Pavyzdys

Nustatykime skirtingus atstumus tarp stulpelių ir eilučių:

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

Результат:

Praktinės užduotys