LibraTool logoLibraTool

Ẹ̀rọ Àṣẹ̀dá CSS Grid Ọ̀fẹ́

Ṣe àpẹrẹ CSS grid lọ́nà àwòrán — àwọn ọ̀nà, ìwọ̀n àti àlàfo — kí o sì dà́kọ CSS àti HTML tí a dá.

Ó ń ṣiṣẹ́ láìsí ìsopọ̀ ní kété tí a bá kó wọlé
Àwọn ìṣètò
Ọ̀wọ̀n (3)
Ẹ̀ka (2)
Àwòrán àkọ́kọ́ tààrà
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>

🔒 Ohun gbogbo ń ṣiṣẹ́ nínú browser rẹ — kò sí ohun tí a gbé sí orí ayélujára.

Bí Ó Ṣe Ń Ṣiṣẹ́

Ṣe àṣàrò CSS grid kan wíwo: fi ọ̀wọ̀n 8 àti ìlà 8 kún un, ṣètò itẹ kọ̀ọ̀kan sí fr, px, auto tàbí min/max-content, kí o sì ṣàtúnṣe àwọn àyè ìlà/ọ̀wọ̀n. Àkíyèsí láàyè tí a fi nọ́mbà sí ń yí padà lẹ́sẹ̀kẹsẹ̀, CSS grid-template àti HTML tí ó bára mu ni a ó tẹ̀ sí clipboard rẹ ní ìtẹ̀ kan.

  1. 1
    Ṣe àpẹẹrẹ grid náà
    Fi kún un/yọ àwọn ọ̀wọ̀n àti ìlà kúrò pẹ̀lú + àti −.
  2. 2
    Ṣètò àwọn itẹ náà
    Ọ̀wọ̀n àti ìlà kọ̀ọ̀kan ń ní ẹyọ tirẹ̀ (1fr, 100px, auto…).
  3. 3
    Ṣàtúnṣe àwọn àyè náà
    Àwọn ìtọ́ka row-gap àti column-gap ọ̀tọ̀ọ̀tọ̀.
  4. 4
    Dàkọ kóòdù náà
    CSS tí ó ti ṣetán fún iṣẹ́ àti ẹ̀rọ HTML tí ó bára mu.

Ohun gbogbo ń ṣiṣẹ́ nínú aṣàwákiri rẹ — kò sí ohunkóhun tí a gbé sókè.

Àwọn Irinṣẹ Tó Jọra

↔️

Ẹ̀rọ Àṣẹ̀dá CSS Flexbox

Dán ìtọ́ni flex, wíwú, ìdọ́gba àti ìlàjọpọ̀ wò lórí àwọn nǹkan tààrà — kí o sì dàkọ CSS.

Gbìyànjú rẹ̀
📐

Olùmúdásílẹ̀ CSS clamp()

Ṣẹ̀dá iye CSS clamp() tí ó ṣàn fún fóńtì àti àyè tí ó ń bára ẹrọ mu. Ṣètò ìwọ̀n kékeré/ńlá àti ààlà viewport, wo àyẹ̀wò lákòókò gidi, kí o sì dàkọ CSS ìlà-kan náà.

Gbìyànjú rẹ̀
🧾

Aṣẹ̀dá Invoice

Dá invoice tí ó ní ìwà iṣẹ́ tí o sì gba PDF tí ó mọ́ — àwọn ẹ̀yà ọjà, owó-orí, àdín, owó púpọ̀. Kò sí ìforúkọsílẹ̀, kò sí gígòkè, àkọsílẹ̀-àkọ́kọ́ tí a fi pamọ́ ní agbègbè rẹ.

Gbìyànjú rẹ̀

Àwọn Ìbéèrè Tí A Máa Ń Béèrè