Egenskapen place-items

Egenskapen place-items angir samtidig justering av kolonner og rader, noe som betydelig reduserer koden vi bruker. Med den første verdien angir vi plassering av elementet langs den vertikale aksen, og med den andre - langs den horisontale aksen. Egenskapen place-items angis i foreldreelementet. Det er praktisk å se hvordan place-items fungerer via nettleserens debugger.

Syntaks

cssselector {
  place-items: horisontal justeringsverdi vertikal justeringsverdi;
}

Eksempel . Justering til senter av vertikalakse og start av horisontalakse

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;
}

Результат:

La oss se på grid-en vår via nettleserens debugger:

Eksempel . Justering til slutt av vertikalakse og senter av horisontalakse

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;
}

Результат:

La oss nå se i debugger-panelet:

Eksempel . Justering til start av vertikalakse og slutt av horisontalakse

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;
}

Результат:

La oss se på justeringen av elementer i celler ved hjelp av nettleserens debugger:

Se også