Uandishi Ufupi wa Sifa za Gridi ya CSS

Sifa grid inawakilisha aina fupi ya uandishi wa sifa zote za safu wima na safu mlalo za chombo kikuu cha gridi. Thamani zote zinaandikwa kwenye mstari mmoja kwa kutumia kistari mkato.

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

Mfano

Wacha tufanye 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: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mfano

Sasa wacha tuweke upana sawa kwa safu mlalo ya pili na ya tatu, na kila safu wima iwe na 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: 600px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Mfano

Sasa kwenye jedwali kutoka kwa mfano uliopita tufanye safu mlalo ya juu iwe na upana wa sehemu mbili (fr), na safu wima ya kwanza iwe na nusu ya sehemu (fr):

<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: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Kazi za Vitendo

Tekeleza mfano ufuatao: