CSS ජාල වල පේළි සහ තීරු ඒකාබද්ධ කිරීමේ සංයෝජන

පේළි සහ තීරු ඒකාබද්ධ කිරීමේ විවිධ වර්ග අපි සලකා බලමු.

උදාහරණය

අපි grid-column සහ grid-row ගුණාංග ඒකාබද්ධ කරමින් වගුවක් සාදමු:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

උදාහරණය

දැන් අපි පළමු සහ හතරවන බ්ලොක් සම්පූර්ණ පේළිය දරාගන්නා ලෙසත්, දෙවන බ්ලොක් පේළි දෙකක් සහ තීරු දෙකක් දරාගන්නා ලෙසත්, තෙවන සහ හතරවන බ්ලොක් එක් පේළියක් සහ තීරු දෙකක් දරාගන්නා ලෙසත් කරමු:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

උදාහරණය

පළමු මූලද්රව්යය පළමු පේළියේ සියලුම තීරු දරාගන්නා ලෙසත්, ඉතිරි මූලද්රව්ය දෙවන පේළියේ සමාන පළලින් යුත් තීරු වලට ස්ථානගත වන ලෙසත් කරමු:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 2 / 3;
}
#elem4 {
	grid-row: 2 / 3;
}

උදාහරණය

පෙර උදාහරණය වෙනස් කරමු, දෙවන මූලද්රව්යය තෙවන සහ හතරවන මූලද්රව්යවල තීරුවලට වඩා පළලින් තුන් ගුණයක් විශාල තීරුවක් දරාගන්නා ලෙස:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	height: 300px;
	width: 400px;
	display: grid;
	grid-template-columns: 3fr 1fr 1fr;
	
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 2 / 3;
}
#elem4 {
	grid-row: 2 / 3;
	
}

උදාහරණය

දැන් අපි පළමු පේළියේ මූලද්රව්ය දෙකක් ස්ථානගත කරමු, එක් එක් සඳහා විවිධ පළල් තීරු නියම කරමින්:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 1 / 2;
	grid-column: 4 / 5;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 1 / 3;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 3 / 5;
}

උදාහරණය

දැන් අපට මූලද්රව්ය පහකින් සමන්විත වගුවක් ඇති යුතුය. අපි පළමු මූලද්රව්යය ඉහළ පේළියේ සහ අනෙක් සියලු මූලද්රව්ය දෙවන පේළියේ ස්ථානගත කරමු:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 5;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 3 / 4;
}
#elem5 {
	grid-row: 2 / 3;
	grid-column: 4 / 5;
}

ප්‍රායෝගික කාර්යයන්

පහත උදාහරණයට අනුව සියලුම මූලද්රව්ය ස්ථානගත කරන්න: