CSS ග්‍රිඩ්වල තීරු ප්‍රමාණය සහ පළල

ග්‍රිඩ් එකක් සමඟ වැඩ කිරීම හඳුන්වා දීම අපි ආරම්භ කරන්නේ තීරු ප්‍රමාණය සහ පළල පවරා ගැනීමෙනි, ඒවා ඔස්සේ ළමා අංග ස්ථානගත වේ. මෙම අරමුණ සඳහා අපි භාවිතා කරන්නේ grid-template-columns ගුණයයි, එය නියම කරනු ලබන්නේ මව් අංගයේ සහ එය නිර්වචනය කරන්නේ ග්‍රිඩ් එකක පිහිටන ළමා අංග වලට ඇති තීරු ප්‍රමාණය සහ පළලය. ගුණයේ අගය තුළ අපි තීරු පළල පික්සල වලින් නියම කරමු.

උදාහරණය

පළමුව අපි මව් අංගයක් සාදා එය ග්‍රිඩ්-කන්ටේනරයක් බවට පත් කරමු. අප සතුව div එකක් ඇතැයි සිතමු, එහි ස්ථානගත වී ඇත්තේ ළමා අංග හතරකි. ඒ සඳහා අපි display ගුණයේ අගය grid ලෙසත්, grid-template-columns ගුණයේ තීරු දෙකක් සඳහා පළලත් ලියන්නෙමු:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 200px 400px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

දැන් අපි වගුවක් සාදමු විවිධ ප්‍රමාණයේ තීරු හතරක් සහිතව:

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>

css#parent {
  display: grid;
  grid-template-columns: 50px 100px 200px 250px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

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