Eigenschaft place-items

Die Eigenschaft place-items legt gleichzeitig die Ausrichtung von Spalten und Reihen fest, was unseren Code erheblich verkürzt. Mit dem ersten Wert legen wir die Positionierung des Elements entlang der vertikalen und mit dem zweiten entlang der horizontalen Achse fest. Die Eigenschaft place-items wird im übergeordneten Element definiert. Die Funktionsweise von place-items lässt sich bequem über den Browser-Debugger verfolgen.

Syntax

cssSelector {
  place-items: horizontaler Ausrichtungswert vertikaler Ausrichtungswert;
}

Beispiel . Ausrichtung an der vertikalen Mitte und am Anfang der horizontalen Achse

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

Результат:

Schauen wir uns unser Grid im Browser-Debugger an:

Beispiel . Ausrichtung am Ende der vertikalen und in der Mitte der horizontalen Achse

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

Результат:

Werfen wir nun einen Blick in die Debugger-Konsole:

Beispiel . Ausrichtung am Anfang der vertikalen und am Ende der horizontalen Achse

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

Результат:

Schauen wir uns die Ausrichtung der Elemente in den Zellen mit dem Browser-Debugger an:

Siehe auch