CSS Grid-də sıra sayı və eni

Grid elementlərini həmçinin sıralar üzrə yerləşdirmək olar. Bunun üçün grid-template-rows xassəsi nəzərdə tutulub. Bu xassə boşluqla ayrılmış sıra ölçülərini qəbul edir. Onda sütunlar üçün öyrəndiyimiz eyni dəyərləri tətbiq etmək olar.

Nümunə

Nümunə üçün gəlin blokları dörd sırada yerləşdirək:

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

Результат:

Nümunə

Birinci və üçüncü sıralar üçün piksel ilə sabit en təyin edək, ikinci sıra isə qalan yeri tutsun:

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

Результат:

Nümunə

Sıra ölçülərini təyin etmək üçün repeat funksiyasından istifadə edək:

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

Результат:

Nümunə

Sıralara 50px hündürlük təyin edək, sıra sayını isə auto-fill dəyəri ilə avtomatik təyin edək:

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

Результат:

Praktiki tapşırıqlar