CSS režģa šūnu iekšējā vertikālā izlīdzināšana

Lai izlīdzinātu elementus režģa šūnās pa vertikālo asi, mēs izmantojam īpašību align-items, kas tiek iestatīta vecāka elementā. Šīs īpašības darbību var redzēt, skatot režģi pārlūkprogrammas atkļūdotājā.

Pār ass sākumu

Izlīdzināsim mūsu elementus šūnās pār vertikā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;
	align-items: flex-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;
}

Apskatīsim mūsu režģi pārlūkprogrammas atkļūdotājā:

Pār ass centru

Tagad izlīdzināsim mūsu elementus šūnās pār vertikā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;
	align-items: 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;
}

Apskatīsim mūsu režģi pārlūkprogrammas atkļūdotājā:

Pār ass beigām

Vēlreiz mainīsim elementu izlīdzināšanu, šoreiz pār vertikālās ass beigām:

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

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

Apskatīsim mūsu režģi pārlūkprogrammas atkļūdotājā:

Praktiskie uzdevumi

Izveidojiet režģi, kas sastāv no sešiem elementiem, kas izvietoti divās kolonnās. Veiciet elementu izlīdzināšanu šūnās pār vertikālās ass sākumu.

Tagad izvietojiet režģa elementus trīs kolonnās un iestatiet elementu izlīdzināšanu šūnās pār režģa vertikālās ass centru.

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