Izlīdzināšana CSS režģa šūnu iekšpusē pa horizontālo asi

Elementu izlīdzināšanai režģa šūnu iekšpusē, t.i., apgabalos, kas rodas, krustojoties kolonnām un rindām, tiek izmantots īpašība justify-items, kas tiek iestatīta vecāka elementā. Izlīdzināšanu ir visvizuālāk pamanīt , skatot režģi pārlūkprogrammas atkļūdotājā.

Pa ass sākumu

Izlīdzināsim mūsu elementus šūnu iekšpusē pa horizontālās ass sākumu:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Tagad apskatīsim mūsu režģi atkļūdotājā:

Pa ass centru

Izlīdzināsim mūsu elementus šūnu iekšpusē pa horizontālās ass centru:

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

#parent {
	display: grid;
	justify-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Tagad apskatīsim mūsu režģi atkļūdotājā:

Pa ass beigām

Izlīdzināsim mūsu elementus pa horizontālās ass beigām:

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

#parent {
	display: grid;
	justify-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Tagad apskatīsim mūsu režģi atkļūdotājā:

Praktiskie uzdevumi

Izveidojiet režģi, kas sastāv no pieciem elementiem, kas izvietoti trīs rindās. Veiciet elementu izlīdzināšanu pa horizontālo asi.

Tagad izvietojiet režģa elementus divās rindās un iestatiet elementu izlīdzināšanu šūnu iekšpusē pa horizontālās ass centru.

Mainiet iepriekšējo uzdevumu tā, lai elementu izlīdzināšana notiktu pa horizontālās ass beigām.