CSS ග්රිඩ් වල පික්සල් සහ fr ඒකක
තීරුවල පළල නියම කළ හැක්කේ
පික්සල් සහ
fr එකවරයි:
html<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>css#parent {
display: grid;
grid-template-columns: 100px 1fr 50px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
Результат:
Задание 1
ඔබේ ග්රිඩයේ තීරු තුනක් ඇති යැයි සිතමු.
පළමු තීරුව
100px කාලයක් ගත කරන අතර ඉතිරි
තීරු දෙක එකම ප්රමාණයේ
කරන්න.
Задание 2
ඔබේ ග්රිඩයේ තීරු හතරක් ඇති යැයි සිතමු.
පළමු සහ අවසාන
තීරු 100px කාලයක් ගත කරන අතර,
ඉතිරි තීරු ඉතිරි කාලය බෙදා ගන්නා අතර,
තුන්වන තීරුව දෙවන තීරුවට වඩා 1.5
අගයකින් වැඩි වේ.