เครื่องมือสร้าง CSS Grid Layout
ออกแบบเลย์เอาต์ CSS Grid ด้วยเครื่องมือแก้ไขแบบเห็นภาพ กำหนดคอลัมน์และแถวโดยใช้หน่วย fr, px หรือ auto, ตั้งค่าช่องว่าง, ขยายเซลล์ และส่งออก CSS ที่สะอาด
셀을 클릭하여 선택한 후 아래에서 span을 설정하세요.
เครื่องมือสร้าง CSS Grid คืออะไร
เครื่องมือสร้าง CSS Grid เป็นเครื่องมือแบบเห็นภาพที่ใช้สำหรับออกแบบเลย์เอาต์สองมิติโดยใช้ CSS Grid คุณสามารถกำหนดคอลัมน์, แถว และช่องว่าง จากนั้นคลิกที่เซลล์เพื่อกำหนดค่าการขยาย เครื่องมือจะสร้างโค้ด CSS ที่เกี่ยวข้อง ซึ่งคุณสามารถคัดลอกไปใช้ในโปรเจกต์ของคุณได้ ช่วยลดความจำเป็นในการจดจำไวยากรณ์ Grid ในขณะที่เรียนรู้หรือสร้างต้นแบบเลย์เอาต์
วิธีสร้าง CSS Grid Layout
- กำหนดคอลัมน์ — ป้อนคำจำกัดความของคอลัมน์โดยใช้ fr, px หรือ auto (เช่น
1fr 1fr 1fr) - กำหนดแถว — ป้อนคำจำกัดความของแถวในลักษณะเดียวกัน
- ตั้งค่าช่องว่าง — ปรับค่าช่องว่างระหว่างคอลัมน์และแถวเป็นพิกเซล
- คลิก Apply — Grid ตัวอย่างจะอัปเดตเพื่อแสดงเลย์เอาต์ของคุณ
- ขยายเซลล์ — คลิกเซลล์ใดก็ได้และตั้งค่าการขยายคอลัมน์/แถว
- คัดลอก CSS — คลิกปุ่มคัดลอกเพื่อรับโค้ดที่สร้างขึ้น
ทำไมต้องใช้เครื่องมือสร้าง CSS Grid นี้
- ผลตอบรับแบบเห็นภาพ — ดูเลย์เอาต์ Grid ของคุณอัปเดตแบบเรียลไทม์
- หน่วยที่ยืดหยุ่น — ใช้ fr, px, auto หรือความยาว CSS ที่ถูกต้องสำหรับคอลัมน์และแถว
- การขยายเซลล์ — คลิกเซลล์เพื่อขยายข้ามหลายคอลัมน์หรือแถว
- CSS ที่สะอาด — โค้ดที่สร้างขึ้นใช้คุณสมบัติ Grid มาตรฐานที่พร้อมสำหรับการใช้งานจริง
- ไม่ต้องมีบัญชี — ฟรีและทำงานทั้งหมดในเบราว์เซอร์ของคุณ
FreeToolbox เปรียบเทียบกับเครื่องมือสร้าง Grid อื่นๆ
| คุณสมบัติ | FreeToolbox | CSS Grid Generator | Layoutit |
|---|---|---|---|
| การขยายเซลล์ | ใช่ | ใช่ | ใช่ |
| หน่วยที่กำหนดเอง | fr, px, auto | fr, px | fr, px, % |
| แสดงตัวอย่างแบบเรียลไทม์ | ใช่ | ใช่ | ใช่ |
| โฆษณา | น้อยที่สุด | ไม่มี | ปานกลาง |
| ธีมสีเข้ม | ใช่ | ไม่ | ไม่ |
คำถามที่พบบ่อย
ฉันสามารถใช้หน่วยอะไรสำหรับคอลัมน์และแถว
คุณสามารถใช้ค่า CSS grid track ที่ถูกต้องใดก็ได้: fr (หน่วยเศษส่วน), px (พิกเซล), auto, เปอร์เซ็นต์, minmax() และอื่นๆ ตัวอย่างเช่น: 1fr 200px auto
ฉันจะทำให้เซลล์ขยายหลายคอลัมน์ได้อย่างไร
คลิกเซลล์ในตัวอย่างเพื่อเลือก จากนั้นตั้งค่า Column Span ในแผงด้านล่าง คลิก 'Set Span' เพื่อนำไปใช้
ฉันสามารถสร้างพื้นที่ Grid ที่มีชื่อได้หรือไม่
เครื่องมือนี้เน้นที่การกำหนด Grid แบบ track-based ด้วยไวยากรณ์ span สำหรับ grid-template-areas ที่มีชื่อ คุณจะต้องเพิ่มสิ่งเหล่านั้นลงใน CSS ที่สร้างขึ้นด้วยตนเอง
จะเกิดอะไรขึ้นเมื่อช่วงซ้อนทับกัน
อัลกอริทึมการจัดวางอัตโนมัติของ Grid ของเบราว์เซอร์จะจัดการช่วงที่ทับซ้อนกัน เซลล์บางเซลล์อาจเปลี่ยนตำแหน่ง รีเซ็ตช่วงหากเลย์เอาต์ดูไม่เป็นไปตามที่คาดไว้
เครื่องมือนี้ฟรีหรือไม่
ใช่ ฟรีอย่างสมบูรณ์โดยไม่มีข้อจำกัดหรือการลงทะเบียน