Satura izlīdzināšana pa horizontālo asi CSS režģī

Režģī var būt nepieciešams ne tikai izvietot, bet arī izlīdzināt saturu pa horizontālo režģa asi. Šajā gadījumā mēs izmantojam īpašību justify-content, kas tiek iestatīta vecākelementā. Apskatīsim ar piemēriem, kā šī īpašība darbojas.

Pa ass sākumu

Iestatīsim izlīdzināšanu mūsu elementiem 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-content: start;
	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;
}

Pa ass centru

Tagad iestatīsim izlīdzināšanu mūsu elementiem 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-content: 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;
}

Pa ass beigām

Iestatīsim izlīdzināšanu mūsu elementiem 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-content: 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;
}

Praktiskie uzdevumi

Izveidojiet režģi, kas sastāv no sešiem elementiem, kas izvietoti divās kolonnās. Veiciet elementu izlīdzināšanu pa horizontālās režģa ass sākumu.

Tagad izvietojiet režģa elementus trīs kolonnās un iestatiet elementu izlīdzināšanu pa horizontālās režģa ass centru.

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