ตัวสร้าง CSS Grid

CSS Grid เป็นระบบเลย์เอาต์สองมิติใน CSS ที่ให้คุณสร้างเลย์เอาต์เว็บที่ซับซ้อนด้วยแถวและคอลัมน์ มีประสิทธิภาพมากกว่า Flexbox สำหรับเลย์เอาต์เต็มหน้าเพราะทำงานในทั้งสองมิติพร้อมกัน

กำหนดจำนวนคอลัมน์และแถว กำหนดขนาดโดยใช้หน่วยเช่น px, fr หรือเปอร์เซ็นต์ ปรับช่องว่างระหว่างรายการ และดูเลย์เอาต์อัปเดตแบบเรียลไทม์ จากนั้นคัดลอกโค้ด CSS ที่สร้างขึ้นไปยังโปรเจกต์ของคุณโดยตรง

px กำหนดขนาดคงที่, fr (เศษส่วน) กระจายพื้นที่ที่มีอยู่ตามสัดส่วน และ % กำหนดขนาดสัมพัทธ์เทียบกับคอนเทนเนอร์ แนะนำให้ใช้ fr สำหรับการออกแบบที่ตอบสนองเพราะปรับตัวเข้ากับพื้นที่ที่มีอยู่โดยอัตโนมัติ

คุณสมบัติ gap กำหนดระยะห่างระหว่างรายการกริด คุณสามารถตั้งค่า row-gap และ column-gap แยกกันได้ มันแทนที่คุณสมบัติ grid-gap เก่าและตอนนี้คือวิธีมาตรฐานในการเพิ่มช่องว่างใน CSS Grid

ได้ ใช้หน่วย fr สำหรับคอลัมน์ยืดหยุ่นและรวมกับ media query CSS ในโปรเจกต์ของคุณ โค้ดที่สร้างขึ้นทำงานได้อย่างสมบูรณ์แบบกับเทคนิคการออกแบบที่ตอบสนอง

แต่ละอันมีวัตถุประสงค์ต่างกัน CSS Grid เหมาะกับเลย์เอาต์สองมิติ (แถวและคอลัมน์ร่วมกัน) ในขณะที่ Flexbox เด่นในเลย์เอาต์หนึ่งมิติ (แถวหรือคอลัมน์) เลย์เอาต์สมัยใหม่จำนวนมากใช้ทั้งสองอย่างร่วมกัน

CSS Grid รองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมดรวมถึง Chrome, Firefox, Safari และ Edge ตามข้อมูลจาก Can I Use การรองรับเบราว์เซอร์ทั่วโลกเกิน 97%

ได้ CSS Grid รองรับการซ้อน คุณสามารถวางคอนเทนเนอร์กริดภายในรายการกริดเพื่อสร้างเลย์เอาต์ที่ซับซ้อนมากขึ้น

grid-template-areas ช่วยให้คุณตั้งชื่อพื้นที่ของกริดและกำหนดรายการตามชื่อ ทำให้เลย์เอาต์ที่ซับซ้อนอ่านได้ง่ายขึ้น

ใช้ justify-items และ align-items สำหรับจัดกึ่งกลางภายในเซลล์ หรือใช้ justify-content และ align-content สำหรับจัดกึ่งกลางกริดทั้งหมด

ได้ โค้ด CSS ที่สร้างขึ้นเป็นไปตามมาตรฐานสมัยใหม่และแนวทางปฏิบัติที่ดีที่สุด คุณสามารถคัดลอกไปยังโปรเจกต์ได้โดยตรงโดยไม่ต้องแก้ไข

เวอร์ชันปัจจุบันเน้นที่นิยามคอลัมน์และแถวคงที่ สำหรับ auto-fit และ auto-fill กับ minmax() คุณสามารถเพิ่มค่าเหล่านี้ด้วยตนเองลงใน CSS ที่สร้างขึ้นสำหรับกริดที่ตอบสนองอย่างยืดหยุ่นอย่างแท้จริง