ตัวสร้าง CSS Grid
ตัวสร้าง CSS Grid แบบภาพฟรีพร้อมตัวอย่างสด ออกแบบเลย์เอาต์กริดแบบตอบสนองเชิงโต้ตอบและส่งออกโค้ด CSS พร้อมใช้งานทันที
CSS Grid คืออะไร?
CSS Grid เป็นระบบเลย์เอาต์สองมิติใน CSS ที่ให้คุณสร้างเลย์เอาต์เว็บที่ซับซ้อนด้วยแถวและคอลัมน์ มีประสิทธิภาพมากกว่า Flexbox สำหรับเลย์เอาต์เต็มหน้าเพราะทำงานในทั้งสองมิติพร้อมกัน
ตัวสร้าง CSS Grid นี้ทำงานอย่างไร?
กำหนดจำนวนคอลัมน์และแถว กำหนดขนาดโดยใช้หน่วยเช่น px, fr หรือเปอร์เซ็นต์ ปรับช่องว่างระหว่างรายการ และดูเลย์เอาต์อัปเดตแบบเรียลไทม์ จากนั้นคัดลอกโค้ด CSS ที่สร้างขึ้นไปยังโปรเจกต์ของคุณโดยตรง
ความแตกต่างระหว่างหน่วย px, fr และ % คืออะไร?
px กำหนดขนาดคงที่, fr (เศษส่วน) กระจายพื้นที่ที่มีอยู่ตามสัดส่วน และ % กำหนดขนาดสัมพัทธ์เทียบกับคอนเทนเนอร์ แนะนำให้ใช้ fr สำหรับการออกแบบที่ตอบสนองเพราะปรับตัวเข้ากับพื้นที่ที่มีอยู่โดยอัตโนมัติ
คุณสมบัติ gap ทำอะไร?
คุณสมบัติ gap กำหนดระยะห่างระหว่างรายการกริด คุณสามารถตั้งค่า row-gap และ column-gap แยกกันได้ มันแทนที่คุณสมบัติ grid-gap เก่าและตอนนี้คือวิธีมาตรฐานในการเพิ่มช่องว่างใน CSS Grid
ฉันสามารถสร้างเลย์เอาต์ที่ตอบสนองด้วยเครื่องมือนี้ได้หรือไม่?
ได้ ใช้หน่วย fr สำหรับคอลัมน์ยืดหยุ่นและรวมกับ media query CSS ในโปรเจกต์ของคุณ โค้ดที่สร้างขึ้นทำงานได้อย่างสมบูรณ์แบบกับเทคนิคการออกแบบที่ตอบสนอง
CSS Grid ดีกว่า Flexbox หรือไม่?
แต่ละอันมีวัตถุประสงค์ต่างกัน CSS Grid เหมาะกับเลย์เอาต์สองมิติ (แถวและคอลัมน์ร่วมกัน) ในขณะที่ Flexbox เด่นในเลย์เอาต์หนึ่งมิติ (แถวหรือคอลัมน์) เลย์เอาต์สมัยใหม่จำนวนมากใช้ทั้งสองอย่างร่วมกัน
เบราว์เซอร์ใดรองรับ CSS Grid?
CSS Grid รองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมดรวมถึง Chrome, Firefox, Safari และ Edge ตามข้อมูลจาก Can I Use การรองรับเบราว์เซอร์ทั่วโลกเกิน 97%
ฉันสามารถซ้อนกริดภายในกริดอื่นได้หรือไม่?
ได้ CSS Grid รองรับการซ้อน คุณสามารถวางคอนเทนเนอร์กริดภายในรายการกริดเพื่อสร้างเลย์เอาต์ที่ซับซ้อนมากขึ้น
grid-template-areas คืออะไร?
grid-template-areas ช่วยให้คุณตั้งชื่อพื้นที่ของกริดและกำหนดรายการตามชื่อ ทำให้เลย์เอาต์ที่ซับซ้อนอ่านได้ง่ายขึ้น
ฉันจะจัดกึ่งกลางรายการใน CSS Grid ได้อย่างไร?
ใช้ justify-items และ align-items สำหรับจัดกึ่งกลางภายในเซลล์ หรือใช้ justify-content และ align-content สำหรับจัดกึ่งกลางกริดทั้งหมด
โค้ด CSS ที่สร้างขึ้นพร้อมใช้งานจริงหรือไม่?
ได้ โค้ด CSS ที่สร้างขึ้นเป็นไปตามมาตรฐานสมัยใหม่และแนวทางปฏิบัติที่ดีที่สุด คุณสามารถคัดลอกไปยังโปรเจกต์ได้โดยตรงโดยไม่ต้องแก้ไข
ฉันสามารถใช้ auto-fit และ auto-fill กับตัวสร้างนี้ได้หรือไม่?
เวอร์ชันปัจจุบันเน้นที่นิยามคอลัมน์และแถวคงที่ สำหรับ auto-fit และ auto-fill กับ minmax() คุณสามารถเพิ่มค่าเหล่านี้ด้วยตนเองลงใน CSS ที่สร้างขึ้นสำหรับกริดที่ตอบสนองอย่างยืดหยุ่นอย่างแท้จริง
วิธีใช้ ตัวสร้าง CSS Grid
ออกแบบเลย์เอาต์ CSS Grid แบบโต้ตอบ และส่งออกโค้ดที่ใช้ได้ทันที ตัวอย่างถูกคำนวณแบบโลคัลในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูล
- ตั้ง column-gap และ row-gap เพื่อควบคุมระยะห่างระหว่างแทร็ก
- เลือกค่า justify-items และ align-items เช่น stretch, start, end หรือ center เพื่อวางตำแหน่งไอเทมในเซลล์
- จัดกระจายทั้งกริดด้วย justify-content และ align-content เช่น space-between, space-around หรือ space-evenly
- สังเกตตัวอย่างแบบเรียลไทม์ขณะปรับค่าแต่ละตัว แล้วคัดลอก CSS ที่สร้างขึ้น
align-content จะเห็นผลก็ต่อเมื่อกริดเล็กกว่าคอนเทนเนอร์เท่านั้น ลองกำหนดความสูงคงที่ให้คอนเทนเนอร์เพื่อดูการจัดกระจาย
เครื่องมือที่เกี่ยวข้อง
- ตัวสร้าง CSS Flexbox ตัวสร้าง CSS Flexbox แบบภาพพร้อมตัวอย่างสด ปรับคุณสมบัติ flex และรับโค้ด CSS พร้อมใช้งาน
- ตัวสร้าง CSS Gradient สร้าง CSS gradient ที่สวยงามแบบภาพ สร้าง gradient เชิงเส้น รัศมี และกรวยด้วยจุดหยุดสีหลายจุด มุมและตำแหน่งที่กำหนดเอง คัดลอกโค้ด CSS ที่พร้อมใช้งานทันที
- ตัวสร้าง CSS Box Shadow ตัวสร้าง CSS box-shadow ออนไลน์ฟรี สร้างเงาสวยงามแบบภาพด้วยออฟเซ็ต เบลอ กระจาย สี และ inset ที่ปรับได้ ตัวอย่างแบบเรียลไทม์และคัดลอกโค้ดทันที
- ตัวสร้าง Border Radius CSS ตัวสร้าง border-radius CSS แบบภาพ ปรับแต่ละมุมอย่างอิสระพร้อมดูตัวอย่างแบบเรียลไทม์และคัดลอกโค้ด CSS ทันที
- ตัวสร้าง Border Radius ตัวสร้างขอบมนสร้างสรรค์ออนไลน์ฟรี ลากจุดจับทั้งแปดหรือเลือกรูปทรงบล็อบสำเร็จรูป เพื่อสร้างรูปทรง CSS อินทรีย์และคัดลอกโค้ดได้ทันที
- ตัวแปลงสี ตัวแปลงสีออนไลน์ฟรี แปลงรูปแบบ HEX, RGB, HSL, HSV ทันทีด้วยตัวเลือกภาพ 100% ส่วนตัว ทำงานในเบราว์เซอร์ของคุณ
- ตัวสร้าง CSS Easing ตัวสร้าง easing CSS ออนไลน์ฟรี ลากจุดควบคุม cubic-bezier บนเส้นโค้งอินเทอร์แอกทีฟ เลือกจากพรีเซ็ต 18 แบบ ดูตัวอย่างลูกบอลวนซ้ำ แล้วคัดลอกฟังก์ชันจังหวะเวลาทันที
- ตัวสร้าง Text Shadow CSS ตัวสร้าง text-shadow CSS ออนไลน์ฟรี ซ้อนหลายเลเยอร์เงาพร้อมปรับออฟเซ็ต เบลอ สี และความทึบ ลองพรีเซ็ตนีออน 3D เรโทร แล้วคัดลอกโค้ด CSS ทันที