Sifa grid

Sifa grid inawakilisha muundo mfupi wa kuandika sifa zote za safu na safu mlalo za chombo cha gridi. Yote maadili huandikwa kwenye mstari mmoja kupitia kufyeka.

Kupitia grid kwenye mstari mmoja unaweza kuelezewa aina moja tu ya sifa - za wazi (grid-template-rows, grid-template-columns, grid-template-areas) au zisizo wazi (grid-auto-rows, grid-auto-columns, grid-auto-flow). Sifa ambazo zimebaki bila kutajwa, zinachukua thamani chaguomsingi.

Kisintaksia

kipengele {
	grid: sifa za gridi;
}

Mfano

Wacha tutengeneze jedwali kwa kutumia sifa grid:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}

#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mfano

Na sasa wacha tuweke safu mlalo ya pili na ya tatu upana sawa, na kila safu wima - upana tofauti:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mfano

Na sasa kwenye jedwali kutoka kwa mfano uliopita tufanye safu mlalo ya juu iwe na upana wa sehemu mbili, na safu wima ya kwanza - nusu ya sehemu:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Angalia pia

sifa grid-template,
ambayo inaweka idadi na upana wa safu wima na safu mlalo kwa kipengele
sifa grid-template-rows,
ambayo inaweka idadi na upana wa safu mlalo kwenye gridi
sifa grid-template-columns,
ambayo inaweka idadi na upana wa safu wima kwenye gridi
sifa grid-template-areas,
ambayo inaweka uwekaji wa vipengele kwenye gridi
sifa grid-auto-flow,
ambayo inaweka uwekaji wa kiotomatiki wa vipengele kwenye gridi