ข้ามไปยังเนื้อหาหลัก
LibraTool logoLibraTool

ตัวสร้าง CSS Grid ฟรี

ออกแบบ CSS grid ตามภาพ — tracks, units และ gaps — และคัดลอก 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 แถว กำหนดแต่ละแทร็กเป็น fr, px, auto หรือ min/max-content และปรับระยะห่างระหว่างแถว/คอลัมน์ ตัวอย่างแบบเรียลไทม์ที่มีหมายเลขกำกับจะอัปเดตทันที และโค้ด CSS grid-template พร้อม HTML ที่ตรงกันพร้อมคัดลอกได้ในคลิกเดียว

  1. 1
    กำหนดรูปทรงตาราง
    เพิ่ม/ลบคอลัมน์และแถวด้วยปุ่ม + และ −
  2. 2
    กำหนดแทร็ก
    แต่ละคอลัมน์และแถวมีหน่วยของตัวเอง (1fr, 100px, auto…)
  3. 3
    ปรับระยะห่าง
    สไลเดอร์แยกสำหรับ row-gap และ column-gap
  4. 4
    คัดลอกโค้ด
    CSS พร้อมใช้งานจริงและโครง HTML ที่ตรงกัน

ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดใดๆ

เครื่องมือที่เกี่ยวข้อง

↔️

ตัวสร้าง CSS Flexbox

ทดลองใช้ flex direction, wrap, justify และ align บนรายการสด — และคัดลอก CSS

ลองใช้
📐

สร้าง CSS clamp()

สร้างค่า CSS clamp() แบบ fluid สำหรับ typography และ spacing ที่ responsive กำหนดขนาดต่ำสุด/สูงสุดและช่วง viewport ดูตัวอย่างสดๆ และคัดลอก CSS บรรทัดเดียว

ลองใช้
📓

กระดาษสำหรับพิมพ์ — กระดาษมีเส้น กราฟ จุดตาราง และกระดาษโน้ตเพลง (PDF)

พิมพ์กระดาษของคุณเอง: มีเส้น (เส้นกว้างหรือเส้นแบบสมุดมหาวิทยาลัย) กราฟ จุดตาราง ไอโซเมตริก ฝึกเขียน บรรทัดห้าเส้นโน้ตเพลง หรือโน้ตแบบคอร์เนลล์ ขนาด A4, Letter, A5 หรือ Legal สีเส้นใดก็ได้ จำนวนหน้าตามต้องการ เป็น PDF เวกเตอร์คมชัดที่สร้างในเบราว์เซอร์

ลองใช้

คำถามที่พบบ่อย