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

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

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

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

#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

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

#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

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

#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

die eienskap justify-items,
wat die belyning van elemente binne grid-selle langs die horisontale as spesifiseer
die eienskap align-items,
wat die belyning langs die dwarwas spesifiseer