ตัวสร้าง CSS Grid

สร้างเลย์เอาต์ CSS Grid แบบเห็นภาพ แล้วคัดลอก CSS และ HTML ที่สะอาด

ตัวอย่าง

ผลลัพธ์

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 16px;
}

ตัวเลือก

ระยะห่างคอลัมน์16px

ระยะห่างแถว16px

รายการที่เลือก

เลือกรายการในตัวอย่างเพื่อกำหนดจำนวนคอลัมน์และแถวที่ครอบคลุม

รายการแนวนอน

รายการแนวตั้ง

ขั้นสูง

แทร็กแนวนอน

แทร็กแนวตั้ง

ความสูงต่ำสุด

0 คือไม่ตั้งค่า min-height แถวที่ใช้ fr ต้องมีความสูงจึงจะขยายได้

ตัวอย่างและโค้ดอัปเดตขณะที่คุณแก้ไข

ตัวสร้าง CSS Flexboxสร้างเลย์เอาต์ Flexbox แบบเห็นภาพแล้วคัดลอก CSS, HTML หรือ Tailwind ตัวสร้างไล่สีสำรวจไล่สี CSS ที่คัดสรร หรือสร้างไล่สีเชิงเส้น รัศมี และกรวย CSS ตัวจัดโค้ด & ตัวย่อจัดรูปแบบ เพิ่มประสิทธิภาพ และบีบอัดโค้ด CSS สนามทดลอง HTML CSS JSเขียนโค้ดฟรอนต์เอนด์ เรียกใช้อย่างปลอดภัย และดีบักผลลัพธ์ในเบราว์เซอร์

ตัวสร้าง CSS Grid คืออะไร?

เครื่องมือสร้างเลย์เอาต์ CSS Grid แบบเห็นภาพ กำหนดขนาดคอลัมน์และแถวด้วย fr, px, %, auto, minmax() หรือค่ากำหนดเองที่ผ่านการตรวจสอบ ระบายพื้นที่ตั้งชื่อ หรือสร้างกริดการ์ดแบบ auto-fit ที่รองรับทุกจอ ตัวอย่างคือคอนเทนเนอร์ CSS Grid จริงที่ใช้การประกาศชุดเดียวกับโค้ดที่สร้างขึ้น สิ่งที่เห็นจึงตรงกับสิ่งที่คัดลอก

วิธีใช้

1.เลือกโหมด: แทร็ก พื้นที่ตั้งชื่อ หรือรองรับทุกจอ หรือโหลดพรีเซ็ต
2.กำหนดขนาดคอลัมน์และแถว ระยะห่าง และการจัดแนว
3.ในโหมดแทร็ก คลิกรายการในตัวอย่างเพื่อให้ครอบคลุมหลายคอลัมน์หรือหลายแถว
4.ในโหมดพื้นที่ตั้งชื่อ พิมพ์ชื่อแล้วคลิกเซลล์เพื่อระบายแต่ละพื้นที่
5.คัดลอกหรือดาวน์โหลด CSS หรือหน้า HTML แบบสแตนด์อโลน

พื้นที่ตั้งชื่อและการตรวจสอบ

พื้นที่ตั้งชื่อแต่ละพื้นที่ต้องเป็นสี่เหลี่ยมผืนผ้าที่เต็ม มิฉะนั้นเบราว์เซอร์จะละเว้นการประกาศ grid-template-areas ทั้งหมด เครื่องมือนี้อธิบายว่าพื้นที่ใดผิดกฎ และคงเลย์เอาต์ที่ถูกต้องล่าสุดไว้ในตัวอย่างและโค้ดจนกว่าคุณจะแก้ไข ขนาดแทร็กกำหนดเองจะถูกตรวจสอบก่อนนำไปใช้

ข้อจำกัด

สูงสุด 12 คอลัมน์ 12 แถว และ 48 รายการ ขนาดกำหนดเองรองรับความยาว เปอร์เซ็นต์ fr, auto, min-content, max-content, minmax() และ fit-content() ไม่รองรับ calc(), var(), ชื่อเส้น และ repeat() ภายในแทร็กเดียว เลย์เอาต์จะบันทึกไว้ในเบราว์เซอร์นี้เท่านั้น

ตัวสร้าง CSS Grid

เลย์เอาต์

ขนาดคอลัมน์

ขนาดแถว

ตัวอย่าง

ผลลัพธ์

ตัวเลือก

รายการที่เลือก

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