CSS гриддеги уячалардын ичиндеги элементтерди эки өлчөм боюнча тегиздөө үчүн кыскартылган касиет

place-items касиетинин жардамы менен гриддин уячаларындагы элементтерди эки өлчөм боюнча бир эле учурда тегиздей аласыз. Касиет боштук менен бөлүнгөн эки маанини кабыл алат. Биринчи маани менен биз элементтин тик өлчөмдө, экинчиси менен - горизонталдык өлчөмдө орношуун белгилейбиз. Касиет ата-эне элементке коюлат.

Келгиле, бул касиеттин ишин мисалдар аркылы карап көрөлү.

Тик өлчөм боюнча борборго, горизонталдык өлчөм боюнча башына

<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;
	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;
}

Келгиле, биздин гридди debugger'де карап көрөлү:

Тик өлчөм боюнча аягына, горизонталдык өлчөм боюнча борборго

<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;
	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;
}

Келгиле, биздин гридди debugger'де карап көрөлү:

Тик өлчөм боюнча башына, горизонталдык өлчөм боюнча аягына

<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;
	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;
}

Келгиле, биздин гридди debugger'де карап көрөлү:

Практикалык тапшырмалар

Алты элементтен турган грид түзүңүз жана аларды эки тилкеге жайгаштырыңыз. Гриддин горизонталдык өлчөмү боюнча башына, тик өлчөмү боюнча борборго элементтерди тегиздеңиз.

Эми гриддин элементтерин үч тилкеге жайгаштырыңыз жана гриддин горизонталдык жана тик өлчөмдөрү боюнча борборго элементтерди тегиздөөнү белгилеңиз.

Мурунку тапшырманы өзгөртүп, элементтердин тегиздөөсү гриддин горизонталдык өлчөмү боюнча аягына, тик өлчөмү боюнча башына болсун.