CSS тордорунда тизмектер жана катарлар аралыгындагы аралык

gap касиетинин жардамы менен тордун тизмектери жана катарлары аралыгындагы аралыкты бир эле учурда белгилөөгө болот.

Жалгыз гана маани же эки маани бос орун менен ажыратылып берилиши мүмкүн. Эгер жалгыз маани берилсе, ал тизмектер жана катарлар аралыгындагы аралыкты бир эле учурда белгилейт. Эгер эки маани берилсе, анда биринчиси катарлар, экинчиси тизмектер ортосундагы аралыкты белгилейт.

Мисал

Тизмектер жана катарлар аралыгындагы аралыкты бирдей кылып белгилейли:

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

Результат:

Практикалык тапшырмалар