CSS Grid Playground

เครื่องมือทั้งหมด

จัดวางเทมเพลต CSS Grid ช่องว่าง และตำแหน่งแบบเห็นภาพ แล้วคัดลอก CSS เลย์เอาต์

ตัวอย่าง

คลิกรายการที่มีหมายเลขในกริดเพื่อเลือกและจัดตำแหน่งใหม่

grid-template-columns —
grid-template-rows —
CSS ที่สร้างขึ้น
—
—
คอลัมน์
แถว
ช่องว่าง
16px
16px
การจัดวาง
รายการในกริด
รายการ 1
ค่าที่ตั้งไว้

เกี่ยวกับ CSS Grid Playground

CSS Grid Playground ช่วยสร้างเลย์เอาต์ grid แบบเห็นภาพจริง เพิ่มและลบแทร็กคอลัมน์กับแถวเพื่อกำหนด grid-template-columns และ grid-template-rows ตั้งค่าระยะห่างคอลัมน์และแถว และปรับคุณสมบัติการจัดตำแหน่งทั้งสี่ตัว — justify-items, align-items, justify-content และ align-content — โดยพรีวิวจะแสดงผลทันทีทุกครั้งที่เปลี่ยนแปลง

การจัดวางไอเทมคือจุดที่ grid ทรงพลังที่สุด: เพิ่มไอเทม คลิกเลือกในพรีวิว แล้วกำหนดตำแหน่งด้วย column start, column span, row start และ row span นี่คือเทคนิคเบื้องหลังไซด์บาร์ ส่วนหัว และเซลล์ไฮไลต์ที่ครอบคลุมหลายแทร็ก ซึ่งใช้กันในเลย์เอาต์ grid จริงแทบทุกแบบ

พรีเซ็ตสามแบบ — holy grail, dashboard และ gallery — โหลดโครงสร้างหน้าคลาสสิกที่คุณสามารถแกะดูและปรับใช้ได้ เมื่อเลย์เอาต์ลงตัวแล้ว คัดลอก CSS ที่สร้างขึ้น ซึ่งมีทั้งกฎของ grid container ครบถ้วนและตำแหน่งของแต่ละไอเทม

วิธีใช้ CSS Grid Playground

  1. เพิ่มหรือลบแทร็กคอลัมน์และแถวเพื่อกำหนด grid template
  2. ตั้งค่าระยะห่างคอลัมน์ (column gap) และแถว (row gap)
  3. ปรับตัวควบคุมการจัดตำแหน่ง: justify-items, align-items, justify-content และ align-content
  4. เพิ่มไอเทม คลิกเลือกในพรีวิว แล้วตั้งค่า column/row start และ span เพื่อจัดวาง
  5. โหลดพรีเซ็ต holy grail, dashboard หรือ gallery เพื่อศึกษาเลย์เอาต์คลาสสิก
  6. คัดลอก CSS ที่สร้างขึ้นไปวางในสไตล์ชีตของคุณ

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

justify-items จัดตำแหน่งแต่ละไอเทมภายในเซลล์ของตัวเอง ส่วน justify-content จัดตำแหน่ง grid ทั้งหมดภายใน container เมื่อแทร็กไม่เต็มพื้นที่ หลักการเดียวกันนี้ใช้ในแนวตั้งกับ align-items เทียบกับ align-content

เลือกไอเทมแล้วเพิ่มค่า column span — ผลลัพธ์ CSS จะใช้ grid-column พร้อมค่า span เมื่อรวมกับ row span คุณสามารถสร้างแถบหัวเรื่อง ไซด์บาร์ และเซลล์ไฮไลต์ขนาดใหญ่ภายใน grid เดียวกันได้

โครงหน้าคลาสสิก: ส่วนหัวและท้ายเต็มความกว้าง พร้อมสามคอลัมน์ระหว่างกลาง — เมนูนำทาง เนื้อหาหลัก และแถบข้าง เดิมทีทำด้วย float ได้ยากมาก พรีเซ็ตนี้แสดงให้เห็นว่าการจัดวาง grid เพียงไม่กี่จุดก็แก้ปัญหาได้อย่างสะอาด

Grid เหมาะกับเลย์เอาต์สองมิติที่ต้องจัดแนวแถวและคอลัมน์ให้ตรงกัน เช่น โครงหน้า แดชบอร์ด แกลเลอรี ส่วน Flexbox เหมาะกับการไหลแบบมิติเดียว เช่น แถบเครื่องมือและเมนู ทั้งสองใช้ร่วมกันได้ดี: grid สำหรับหน้าเว็บ flex สำหรับภายในคอมโพเนนต์

ใช่ ฟรีและทำงานบนเบราว์เซอร์ทั้งหมด — ทดลองได้ตามต้องการ และสิ่งที่คุณสร้างจะไม่ถูกส่งออกจากเครื่องของคุณ
แชร์สิ่งนี้
เครื่องมือที่เกี่ยวข้อง
ตัวสร้างลายเซ็นอีเมล ออกแบบลายเซ็นอีเมล HTML แบบมืออาชีพจาก 30 แม่แบบ ปรับแต่งและบันทึกได้ตามต้องการ ฟรี
ไอคอนเป็น PNG แปลง Bootstrap Icons, Font Awesome และอื่นๆ เป็นรูปภาพ PNG ที่กำหนดเอง — ฟรี ในเบราว์เซอร์ของคุณ ฟรี
เครื่องสร้างไอคอนแอป สร้างชุดไอคอนแอปที่สมบูรณ์และพร้อมขึ้นสโตร์สำหรับ App Store และ Google Play — พื้นหลังแบบไล่ระดับสี mesh และลวดลายระดับพรีเมียม สร้างจากโลโก้ของคุณ ฟรี
เครื่องสร้าง Favicon สร้างแพ็กเกจ favicon ที่สมบูรณ์จากโลโก้ ไอคอนฟอนต์ หรืออักษรย่อ — favicon.ico, PNG สมัยใหม่, Apple touch icon, PWA icons, web manifest และโค้ด HTML ฟรี
ตัวสร้าง CSS Box Shadow สร้าง CSS box-shadow แบบหลายชั้นด้วยแถบเลื่อนแบบสดสำหรับ offset, blur, spread, สี, ความโปร่งใส และ inset — ดูตัวอย่างบนองค์ประกอบจริงและคัดลอก CSS พร้อมใช้งานทันที ฟรี
ตัวสร้าง CSS Border Radius สร้าง border-radius ของ CSS แบบเห็นภาพพร้อมตัวอย่างสด และคัดลอกโค้ดที่พร้อมใช้งานจริง ฟรี
การค้นหายอดนิยม
ตัวสร้าง css grid css grid playground ตัวสร้าง grid-template-columns ตัวสร้างเลย์เอาต์ css grid ตัวสร้าง grid-template-areas เครื่องมือ css grid gap ตัวแสดงภาพ css grid
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา
รายงานปัญหา

เพิ่มเครื่องมือฟรีนี้ลงในเว็บไซต์ของคุณเอง — คัดลอกและวางโค้ดด้านล่าง