Eienskap place-items

Die eienskap place-items spesifiseer die gelyktydige belyning van kolomme en rye, wat die kode wat ons gebruik aansienlik verminder. Met die eerste waarde spesifiseer ons die plasing van die element langs die vertikale as, en met die tweede - langs die horisontale as. Die eienskap place-items word in die ouer element gespesifiseer. Die uitvoering van werk met place-items is gerieflik om deur die blaaier se debugger te bekyk.

Sintaksis

cssselektor {
  place-items: horisontale belyning waarde vertikale belyning waarde;
}

Voorbeeld . Belyning in die middel van die vertikale as en die begin van die horisontale as

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;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Kom ons kyk na ons grid deur die blaaier se debugger:

Voorbeeld . Belyning by die einde van die vertikale as en die middel van die horisontale asse

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;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

En nou kyk ons na die debugger-paneel:

Voorbeeld . Belyning by die begin van die vertikale as en die einde van die horisontale asse

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;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Kom ons kyk na die belyning van elemente in selle met behulp van die blaaier se debugger:

Sien ook