CSS Grid ішіндегі ұяшықтарда екі ось бойынша туралау қысқартпасы

place-items қасиетінің қысқартпасын қолданып, Grid ішіндегі элементтерді бір уақытта екі ось бойынша туралауға болады. Қасиет бос орынмен бөлінген екі мәнді қабылдайды. Бірінші мәнмен біз элементтің орналасуын тік ось бойынша, ал екіншісімен - көлденең ось бойынша орнатамыз. Қасиет ата-ана элементте орнатылады.

Бұл қасиеттің жұмысын мысалдар арқылы қарастырайық.

Тік ось бойынша ортасына және көлденең ось бойынша басына

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-ті бақылаушіде қарастырайық:

Тік ось бойынша соңына және көлденең ось бойынша ортасына

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-ті бақылаушіде қарастырайық:

Тік ось бойынша басына және көлденең ось бойынша соңына

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-ті бақылаушіде қарастырайық:

Практикалық тапсырмалар