grid-template ගුණය

grid-template ගුණය මගින් ග්‍රිඩයේ හෝ දැලිසක මූලද්‍රව්‍යයක් අල්ලා ගන්නා පේළි සහ තීරු වල ප්‍රමාණය සහ පළල සකස් කරයි සහ එය grid-template-rows සහ grid-template-columns යන ගුණ සඳහා කෙටි ආකාරයකි. මූලද්‍රව්‍යය තබන පේළි සහ තීරු කොටස් කිරීමේ ලකුණක් මගින් දක්වනු ලැබේ. grid-template ගුණය දෙන්නේ ආම්පන්න මූලද්‍රව්‍යයෙහි සහ එය අනුඅංග මූලද්‍රව්‍ය වල සැකැස්ම නිර්වචනය කරයි. ගුණයේ අගයෙහි අපි පේළි හෝ තීරු වල පළල දක්වන්නෙමු ඕනෑම ප්‍රමාණය සඳහා ඒකක වලින්.

ගුණ වලට පික්සල් වලින් අගයන් දක්වන විට මූලද්‍රව්‍ය වල ප්‍රමාණය හරියටම ඒවාට අනුරූප වේ. අපි auto යන වචනය දක්වන්නේ නම්, තීරු සහ පේළි ලබා ගත හැකි සියලුම අවකාශය පුරවනු ඇත. fr (කොටස) ඒකකය භාවිතා කිරීම යන්නෙහි අර්ථය වන්නේ, සියලුම අවකාශය සමාන කොටස් වලට වෙන් කරනු ලැබීමයි. fr හි වාසිය වන්නේ එහි විවිධ පටිගත කරන්නන් හෝ තිර විභේදන වලට අනුවර්තනය වීමේ හැකියාවයි, මන්ද යත් fr යනු පික්සල් වල නිශ්චිත ප්‍රමාණයකට බැඳී සිටීමකින් තොරව දැක්වූ කොටස් ගණනකට ඒවා සරලව බෙදීම වේ.

වාග් රීතිය

තේරුම් ගන්නා {
	grid-template: පේළි වල පළල සහ ප්‍රමාණය / තීරු වල පළල සහ ප්‍රමාණය;
}

උදාහරණය

grid-template ගුණය භාවිතා කරමින් අපි වගුවක් සාදමු:

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

උදාහරණය

දැන් අපි දෙවන සහ තෙවන පේළි වලට සමාන පළලක් දෙමු, සහ සෑම තීරුවකටම - වෙනස් පළලක් දෙමු:

<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-template: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

උදාහරණය

දැන් පෙර උදාහරණයේ වගුවේ ඉහළම පේළියේ පළල කොටස් දෙකක් කරමු, සහ පළමු තීරුව - කොටස් භාගයක් කරමු:

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

මෙයද බලන්න

grid ගුණය,
එය තීරු සහ පේළි වල ගුණ සඳහා කෙටි අංකනය සපයයි
grid-template-rows ගුණය,
එය ග්‍රිඩයේ පේළි වල ප්‍රමාණය සහ පළල සකස් කරයි
grid-template-columns ගුණය,
එය ග්‍රිඩයේ තීරු වල ප්‍රමාණය සහ පළල සකස් කරයි