CSS Grid'de Hücre İçi Çift Eksen Hizalama Kısayolu

place-items kısayol özelliği kullanılarak grid hücreleri içindeki öğeler her iki eksende aynı anda hizalanabilir. Özellik, boşlukla ayrılmış iki değer alır. İlk değerle öğenin dikey eksendeki, ikinci değerle yatay eksendeki konumunu belirleriz. Özellik ebeveyn öğede tanımlanır.

Bu özelliğin çalışmasını örneklerle inceleyelim.

Dikeyde Ortada ve Yatayda Başta

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

css#parent {
  display: grid;
  place-items: center 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;
}

Результат:

Grid'imizi hata ayıklayıcıda inceleyelim:

Dikeyde Sonda ve Yatayda Ortada

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

css#parent {
  display: grid;
  place-items: end 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;
}

Результат:

Grid'imizi hata ayıklayıcıda inceleyelim:

Dikeyde Başta ve Yatayda Sonda

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

css#parent {
  display: grid;
  place-items: start 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;
}

Результат:

Grid'imizi hata ayıklayıcıda inceleyelim:

Pratik Görevler