Atstarpe starp kolonnām un rindām CSS režģos

Ar īpašības gap palīdzību var vienlaicīgi iestatīt atstarpi starp režģa kolonnām un rindām.

Var padot vai nu vienu vērtību, vai divas, atdalot tās ar atstarpi. Ja tiek padota viena vērtība, tā vienlaicīgi nosaka atstarpi starp kolonnām un rindām. Ja tiek padotas divas vērtības, tad pirmā nosaka atstarpi starp rindām, bet otrā - starp kolonnām.

Piemērs

Uzstādīsim vienādu atstarpi starp kolonnām un rindām:

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

Результат:

Piemērs

Uzstādīsim dažādas atstarpes starp kolonnām un rindām:

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

Результат:

Praktiskie uzdevumi