CSS Grid xanaları içində hər iki ox üzrə düzülmə

Grid xanaları içindəki elementləri həm üfüqi, həm də şaquli oxlar üzrə eyni zamanda düzləmək mümkündür. Bu məqsədlə biz valideyn elementdə təyin olunan justify-items və align-items xassələrini birləşdirə bilərik.

Oxların mərkəzinə görə

Gəlin elementlərimizi üfüqi və şaquli oxların mərkəzinə görə düzləyək:

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

css#parent {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

İndi gridimizə debuggerdə baxaq:

Üfüqinin başlanğıcı və şaqulinin sonuna görə

Gəlin elementlərimizi xanalarda üfüqi oxun başlanğıcı və şaquli oxun sonuna görə yerləşdirək:

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

css#parent {
  display: grid;
  justify-items: start;
  align-items: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

İndi gridimizə debuggerdə baxaq:

Üfüqinin sonu və şaqulinin başlanğıcına görə

Gəlin elementlərimizi xanalarda üfüqi oxun sonu və şaquli oxun başlanğıcına görə yerləşdirək:

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

css#parent {
  display: grid;
  justify-items: end;
  align-items: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

İndi gridimizə debuggerdə baxaq:

Praktiki tapşırıqlar