สี & ดีไซน์

สร้าง CSS Grid ตั้งคอลัมน์ แถว ช่องว่าง ได้โค้ดทันที

ตั้งจำนวนคอลัมน์ แถว ช่องว่าง และลองขยายช่องแรก แล้วดูตัวอย่างที่ใช้ CSS Grid จริงของเบราว์เซอร์ พร้อมโค้ด CSS กับ HTML ให้คัดลอก ใช้กับ minmax(0, 1fr) เพื่อกันเนื้อหายาวดันจนล้น

วิธีใช้

  1. เลือกแบบคอลัมน์ เท่ากัน ปรับอัตโนมัติ หรือกำหนดเอง
  2. ใส่จำนวนแถว ช่องว่าง และขนาดช่องแรกที่อยากขยาย
  3. ดูผลในกรอบตัวอย่างแล้วกดคัดลอกโค้ด

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

ทำไมใช้ minmax(0, 1fr) แทน 1fr?

1fr หมายถึงอย่างน้อยเท่าเนื้อหา ข้อความยาวที่ตัดคำไม่ได้จะดันคอลัมน์ให้ล้นจอ minmax(0, 1fr) ป้องกันปัญหานี้

auto-fit ต่างจากจำนวนคอลัมน์ตายตัวอย่างไร?

auto-fit จะเพิ่มหรือลดจำนวนคอลัมน์ตามความกว้างจอโดยไม่ต้องเขียน media query

เจอปัญหา? แจ้งเครื่องมือนี้