ຂ້າມໄປຫາເນື້ອຫາຫຼັກ
LibraTool logoLibraTool

ເຄື່ອງກໍາເນີດ CSS Grid ຟຣີ

ອອກແບບ CSS grid ທາງພາບ — ຕາມຮອຍ, ຫົວໜ່ວຍ ແລະ ຊ່ອງວ່າງ — ແລະ ສຳເນົາ CSS ໄປມາ ແລະ HTML.

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ
ການຕັ້ງຄ່າລ່ວງໜ້າ
ຖັນ (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 ດ້ວຍສາຍຕາ: ເພີ່ມເຖິງ 8 ຖັນ ແລະ 8 ແຖວ, ຕັ້ງແຕ່ລະ track ເປັນ fr, px, auto ຫຼື min/max-content, ແລະ ປັບຊ່ອງຫ່າງແຖວ/ຖັນ. ຕົວຢ່າງແບບສົດທີ່ນັບເລກອັບເດດທັນທີ ແລະ CSS grid-template ທີ່ສ້າງແລ້ວພ້ອມ HTML ທີ່ຕົງກັນຢູ່ຫ່າງແຕ່ການກົດຄັ້ງດຽວຈາກຄລິບບອດຂອງທ່ານ.

  1. 1
    ຈັດຮູບຮ່າງ grid
    ເພີ່ມ/ລົບຖັນ ແລະ ແຖວດ້ວຍ + ແລະ −.
  2. 2
    ຕັ້ງ track
    ແຕ່ລະຖັນ ແລະ ແຖວມີໜ່ວຍຂອງມັນເອງ (1fr, 100px, auto…).
  3. 3
    ປັບຊ່ອງຫ່າງ
    ແຖບເລື່ອນ row-gap ແລະ column-gap ແຍກກັນ.
  4. 4
    ສຳເນົາໂຄ້ດ
    CSS ພ້ອມໃຊ້ງານ ແລະ ໂຄງຮ່າງ HTML ທີ່ຕົງກັນ.

ທຸກຢ່າງເຮັດວຽກຢູ່ໃນບຣາວເຊີຂອງທ່ານ — ບໍ່ມີສິ່ງໃດຖືກອັບໂຫຼດ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

↔️

ເຄື່ອງກໍາເນີດ CSS Flexbox

ທົດລອງເອົາທິດທາງ flex, ກອບ, justify ແລະ align ເທິງລາຍການກ່ວາວ — ແລະ ສຳເນົາ CSS.

ລອງໃຊ້
📐

ຕົວສ້າງ CSS clamp()

ສ້າງ CSS clamp() fluid ສຳລັບ typography ແລະ spacing ທີ່ responsive. ຕັ້ງ min/max size ແລະ viewport range, ເບິ່ງຕົວຢ່າງ live ແລະ ຄັດລອກ CSS ເສັ້ນດຽວ.

ລອງໃຊ້
📓

ເຈ້ຍສຳລັບພິມ — ເຈ້ຍມີເສັ້ນ, ກຣາຟ, ຕາຕະລາງຈຸດ ແລະເຈ້ຍດົນຕີ (PDF)

ພິມເຈ້ຍຂອງທ່ານເອງ: ມີເສັ້ນ (ເສັ້ນກວ້າງ ຫຼືເສັ້ນແບບວິທະຍາໄລ), ກຣາຟ, ຕາຕະລາງຈຸດ, ໄອໂຊເມຕຣິກ, ຝຶກຂຽນດ້ວຍມື, ເສັ້ນຫ້າເສັ້ນສຳລັບດົນຕີ ຫຼືບັນທຶກແບບ Cornell, ໃນ A4, Letter, A5 ຫຼື Legal, ສີເສັ້ນໃດກໍໄດ້, ຈຳນວນໜ້າຕາມຕ້ອງການ. PDF ເວັກເຕີຄົມຊັດທີ່ສ້າງໃນບຣາວເຊີຂອງທ່ານ.

ລອງໃຊ້

ຄໍາຖາມທີ່ຖາມເລື້ອຍໆ