CSS тор торлорундагы катарлардын саны жана туурасы

Тор элементтери ошондой эле катарлар боюнча жайгаштырылышы мүмкүн. Бул үчүн grid-template-rows касиети арналган. Бул касиет боштук менен бөлүнгөн катарлардын өлчөмдөрүн кабыл алат. Анда биз тилкелер үчүн үйрөнгөн окшош маанилерди колдонсо болот.

Мисал

Мисалы, блокторду төрт катарга жайгаштыралы:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Мисал

Биринчи жана үчүнчү катарлар үчүн пикселде белгиленген туура берип, экинчи катар калган орунду ээлесин:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Мисал

Катарлардын өлчөмдөрүн көрсөтүү үчүн repeat функциясын колдонолу:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Мисал

Катарлардын бийиктигине 50px белгилеп, катарлардын санын auto-fill мааниси менен автоматтык түрдө белгилейли:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

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