LibraTool logoLibraTool

Kyauta Mai Ƙirƙirar CSS Grid

Ƙirƙiri grid ɗin CSS ta hanyar gani — hanyoyi, raka'o'i da gibi — sannan ka kwafi CSS da HTML da aka ƙirƙira.

Yana aiki babu haɗi da zarar an loda shi
Saitattun tsari
Ginshiƙai (3)
Layuka (2)
Gani kai tsaye
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>

🔒 Komai yana gudana a burauzarka — ba a loda komai.

Yadda Yake Aiki

Tsara wani CSS grid a gani: ƙara har zuwa shafuka 8 da layuka 8, saita kowace hanya zuwa fr, px, auto ko min/max-content, kuma daidaita gibin layi/shafi. Dubawar rai mai lamba tana sabuntawa nan take kuma an ƙirƙira CSS na grid-template tare da HTML mai dacewa dannawa guda daga clipboard ɗinka.

  1. 1
    Tsara grid din
    Ƙara/cire shafuka da layuka da + da −.
  2. 2
    Saita hanyoyin
    Kowace shafi da layi suna samun naúrarsu (1fr, 100px, auto…).
  3. 3
    Daidaita gibin
    Masu zamewar row-gap da column-gap daban.
  4. 4
    Kwafi lambar
    CSS a shirye don samarwa da tsarin HTML mai dacewa.

Komai yana gudana a burauzarka — babu wani da ake loda shi.

Kayan Aiki Masu Alaƙa

↔️

Mai Ƙirƙirar CSS Flexbox

Gwada shugabanci na flex, nadewa, daidaitawa da tsari akan abubuwa masu rai — sannan ka kwafi CSS.

Gwada shi
📐

Mai Ƙirƙirar CSS clamp()

Ƙirƙiri ƙimar CSS clamp() mai sassauci don rubutu da tazara masu amsa. Saita girman min/max da zangon viewport, duba preview mai rai, ka kwafi layin CSS guda ɗaya.

Gwada shi
🧾

Mai Ƙirƙirar Bill

Ƙirƙiri takardar biya ta ƙwararru kuma sauke PDF mai tsafta — kayayyakin layi, haraji, rangwame, kuɗaɗe da yawa. Babu shigar da asusu, babu lodawa, ana ajiye zane a gida.

Gwada shi

Tambayoyin Da Ake Yi Sau Da Dama