เครื่องคำนวณเลย์เอาต์กริด (ความกว้างคอลัมน์ กัตเตอร์ กริด 8pt)

ใส่ความกว้างรวม จำนวนคอลัมน์ กัตเตอร์ และขอบด้านข้าง เพื่อหาความกว้างของคอลัมน์เดียวและของหลายคอลัมน์ที่ต่อกัน ใช้กับกริดเว็บ 12 คอลัมน์หรือการแบ่งหน้ากระดาษพิมพ์เป็นมิลลิเมตร

วิธีใช้

1. เลือก px หรือ mm ใน "หน่วย" แล้วเลือก "ความกว้างสำเร็จรูป" หรือพิมพ์ "ความกว้างรวม" เอง
2. ใส่ "จำนวนคอลัมน์" "กัตเตอร์" และ "ขอบ" หากขอบซ้ายขวาไม่เท่ากัน ให้ตั้ง "ขอบด้านข้าง" เป็น "ซ้ายและขวาแยกกัน"
3. อ่าน "ความกว้างคอลัมน์" และตาราง "ความกว้างรวมหลายคอลัมน์" แล้วดูป้ายว่าตรงกับกริดที่เลือกใน "หน่วยกริด" หรือไม่ หากไม่ตรง ลองใช้ความกว้างรวมที่แนะนำในหมายเหตุ
4. เปิด "เปรียบเทียบ 3 เบรกพอยต์" เพื่อดูสามความกว้างพร้อมกัน และกด "คัดลอก CSS" เพื่อนำโค้ดไปใช้

หลักการทำงาน

• ความกว้างคอลัมน์ = (ความกว้างรวม − ขอบซ้าย − ขอบขวา − กัตเตอร์ × (จำนวนคอลัมน์ − 1)) ÷ จำนวนคอลัมน์ ความกว้างของ n คอลัมน์ = ความกว้างคอลัมน์ × n + กัตเตอร์ × (n − 1)
• เมื่อกำหนด "ความกว้างเนื้อหาสูงสุด" หากความกว้างรวมมากกว่า เนื้อหาจะคงความกว้างนั้นและส่วนที่เหลือแบ่งให้ขอบสองข้าง
• ในโหมด mm หน่วยกริดเป็นพอยต์: 1 pt = 0.3528 mm และ 1 mm = 3.78 px ที่ 96 dpi
• ค่าที่ใส่จะถูกเก็บไว้ในเบราว์เซอร์ของอุปกรณ์นี้

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

กริด 1200 px 12 คอลัมน์ มีคอลัมน์กว้างเท่าไร

เมื่อกัตเตอร์ 24 px และไม่มีขอบ (1200 − 24 × 11) ÷ 12 = 78 px หากกัตเตอร์ 32 px จะได้ 70.67 px

ถ้าความกว้างคอลัมน์ไม่ตรงกริด 8 px ต้องทำอย่างไร

หมายเหตุจะบอกค่าพหุคูณที่ใกล้ที่สุดและความกว้างรวมที่ให้ค่านั้น เช่น คอลัมน์ 78 px จะเป็น 80 px เมื่อเนื้อหากว้าง 1224 px การปรับกัตเตอร์หรือขอบเล็กน้อยก็ใช้ได้

หน้า A4 ควรมีกี่คอลัมน์

ไม่มีคำตอบเดียว สองหรือสามคอลัมน์เหมาะกับข้อความ หกหรือสิบสองคอลัมน์ช่วยให้จัดภาพและตารางร่วมกันง่ายขึ้น ใส่ A4 210 mm ขอบ 15 mm และกัตเตอร์ 4 mm เพื่อเปรียบเทียบ

ใช้ CSS ที่คัดลอกอย่างไร

.container กำหนดความกว้างเนื้อหาและระยะขอบด้านข้าง .grid กำหนดจำนวนคอลัมน์และช่องว่าง องค์ประกอบที่กินหลายคอลัมน์ให้ใส่ grid-column: span 4 ในโหมด mm โค้ดยังมีขอบ @page สำหรับพิมพ์ด้วย