ප්‍රධාන අන්තර්ගතයට පිවිසෙන්න
LibraTool logoLibraTool

නොමිලේ CSS ග්‍රිඩ් උත්පාදකය

CSS grid ඉතිරිවීමින් නිර්මාණ කරන්න — tracks, units සහ gaps — සහ generated CSS සහ HTML පිටපත් කරන්න।

load වූ පසු offline ක්‍රියා කරයි
පූර්ව සිටුවම්
තීරු (3)
පේළි (2)
සජීවී පෙරදසුන
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 සියල්ල ඔබේ බ්‍රවුසරයේ ධාවනය වේ — කිසිවක් උඩුගු නොකෙරේ।

එය ක්‍රියා කරන්නේ කෙසේද

CSS grid එකක් දෘශ්‍යමය ලෙස design කරන්න: columns 8ක් සහ rows 8ක් දක්වා එකතු කරන්න, එක් එක් track එක fr, px, auto, හෝ min/max-content වෙත සකසන්න, සහ row/column gaps සකසන්න. අංකගත සජීවී පෙරදසුන ක්ෂණිකව යාවත්කාලීන වන අතර ජනනය කළ grid-template CSS සහ ගැලපෙන HTML ඔබේ clipboard එකෙන් එක ක්ලික් එකකි.

  1. 1
    grid එක හැඩගස්වන්න
    + සහ − සමඟ columns සහ rows එකතු/ඉවත් කරන්න.
  2. 2
    tracks සකසන්න
    එක් එක් column එකට සහ row එකට එහිම unit එකක් ලැබේ (1fr, 100px, auto…).
  3. 3
    gaps tune කරන්න
    වෙන් වෙන් row-gap සහ column-gap sliders.
  4. 4
    කේතය පිටපත් කරන්න
    නිෂ්පාදනයට-සූදානම් CSS සහ ගැලපෙන HTML skeleton එක.

සියල්ල ඔබේ බ්‍රවුසරයේ ධාවනය වේ — කිසිවක් උඩුගත නොවේ.

සම්බන්ධ මෙවලම්

↔️

CSS ෆ්ලෙක්ස්බොක්ස් උත්පාදකය

flex direction, wrap, justify සහ align ට විෂ්‍යය කරන්න ලයිව් items වලට — සහ CSS පිටපත් කරන්න।

උත්සාහ කරන්න
📐

CSS clamp() සකසන්නා

Responsive typography සහ spacing සඳහා fluid CSS clamp() අගය සාදන්න. Min/max ප්‍රමාණය සහ viewport පරාසය සකසන්න, සජීව preview බලන්න, single-line CSS copy paste කරන්න.

උත්සාහ කරන්න
📓

මුද්‍රණය කළ හැකි කඩදාසි — ඉරි, ප්‍රස්තාර, තිත් දැල සහ සංගීත කඩදාසි (PDF)

ඔබේම කඩදාසි මුද්‍රණය කරන්න: ඉරි (පුළුල් හෝ විද්‍යාල ඉරි), ප්‍රස්තාර, තිත් දැල, සමමිතික, අත් අකුරු පුහුණුව, සංගීත පේළි හෝ Cornell සටහන්, A4, Letter, A5 හෝ Legal ප්‍රමාණයෙන්, ඕනෑම ඉරි වර්ණයකින්, ඔබට අවශ්‍ය තරම් පිටු ගණනකින්. ඔබේ බ්‍රවුසරයේ සාදන තියුණු දෛශික PDF එකක්.

උත්සාහ කරන්න

නිතර අසන ප්‍රශ්න