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

Satura izlīdzināšanai pa vertikālo asi režģī mēs izmantojam īpašību align-content, kas tiek iestatīta vecāka elementā.

Pēc ass sākuma

Iestatīsim mūsu elementu izlīdzināšanu režģī pēc vertikālās ass sākuma:

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

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	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;
}

Pēc ass centra

Tagad iestatīsim elementu izlīdzināšanu pēc vertikālās ass centra:

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

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	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;
}

Pēc ass beigām

Iestatīsim elementu izlīdzināšanu pēc vertikā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;
	align-content: end;
	grid-template-columns: 100px 100px;
	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 rindās. Veiciet elementu izlīdzināšanu pēc režģa vertikālās ass sākuma.

Tagad izvietojiet režģa elementus divās rindās un iestatiet elementu izlīdzināšanu pēc režģa vertikālās ass centra.

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