Place-items касиети

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

Синтаксис

селектор {
	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;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Келгиле, биздин тортту браузердин дебаггери аркылуу көрөлү:

Мисал . Тик огу боюнча аягына, горизонталдык огу боюнча борборго тегиздөө

<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;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Эми дебаггердин панелине көз салалы:

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

<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;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Келгиле, торт тизмелериндеги элементтердин тегиздөөсүн браузердин дебаггери аркылуу көрөлү:

Дагы караңыз

justify-items касиети,
торттун горизонталдык огу боюнча тизмелериндеги элементтердин тегиздөөсүн белгилейт
align-items касиети,
кайсыл огу боюнча тегиздөөнү белгилейт