შიგთავსის გასწორება ორივე ღერძზე CSS ღრიდში

ხშირად ღრიდში შეიძლება დაგვჭირდეს შიგთავსის ერთდროულად გასწორება ჰორიზონტალური და ვერტიკალური ღერძების გასწვრივ. ამ მიზნისთვის ჩვენ შეგვიძლია ერთობლივად გამოვიყენოთ ორი თვისება, რომელიც თქვენ გაეცანით წინა გაკვეთილში: justify-content და align-content.

ვერტიკალურის დასაწყისზე და ჰორიზონტალურის დასასრულზე

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

css#parent {
  display: grid;
  justify-content: flex-end;
  align-content: flex-start;
  grid-template-columns: 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;
}

Результат:

ვერტიკალურის დასასრულზე და ჰორიზონტალურის დასაწყისზე

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

css#parent {
  display: grid;
  justify-content: flex-start;
  align-content: flex-end;
  grid-template-columns: 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;
}

Результат:

ვერტიკალური ღერძის ცენტრში და ჰორიზონტალური

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

css#parent {
  display: grid;
  justify-content: flex-end;
  align-content: center;
  grid-template-columns: 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;
}

Результат:

პრაქტიკული ამოცანები