Die Eigenschaft place-self

Die Eigenschaft place-self legt die Ausrichtung eines einzelnen Elements im Grid sowohl entlang der vertikalen als auch der horizontalen Achse fest. Im Wert der Eigenschaft wird zuerst die Ausrichtung entlang der Vertikale, danach - die Ausrichtung des einzelnen Elements im Grid entlang der horizontalen Achse angegeben. Die Eigenschaft wird in dem Element definiert, das wir ausrichten möchten.

Syntax

Element {
	place-self: Wert für Vertikale Wert für Horizontale;
}

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

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	place-self: center start;
}

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

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	place-self: start end;
}

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

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	place-self: end center;
}

Siehe auch

die Eigenschaft justify-self,
die die Ausrichtung eines einzelnen Elements im Grid entlang der horizontalen Achse festlegt
die Eigenschaft align-self,
die die Ausrichtung eines einzelnen Blocks festlegt