Egenskaben place-items

Egenskaben place-items angiver samtidig justering af kolonner og rækker, hvilket betydeligt reducerer den kode, vi bruger. Med den første værdi angiver vi placeringen af elementet langs den vertikale akse, og med den anden - langs den horisontale akse. Egenskaben place-items angives i forælderelementet. Det er praktisk at gennemgå arbejdet med place-items via browserens debugger.

Syntaks

cssselector {
  place-items: horisontal justeringsværdi vertikal justeringsværdi;
}

Eksempel . Justering i midten af den vertikale akse og starten af den horisontale akse

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

Результат:

Lad os se på vores grid via browserens debugger:

Eksempel . Justering i slutningen af den vertikale akse og midten af den horisontale akse

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

Результат:

Og lad os nu kigge i debuggerens panel:

Eksempel . Justering i starten af den vertikale akse og slutningen af den horisontale akse

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

Результат:

Lad os se på justeringen af elementer i cellerne ved hjælp af browserens debugger:

Se også