การออกแบบภายใน: การกำหนดขนาดตามเนื้อหา

การออกแบบตามขนาดเนื้อหา ซึ่ง Jen Simmons เป็นผู้บัญญัติคำนี้ หมายถึงการปล่อยให้เนื้อหาเป็นตัวกำหนดขนาดของตัวเอง แทนการกำหนดขนาดพิกเซลแบบตายตัว CSS มีคีย์เวิร์ดสำหรับกำหนดขนาดตามเนื้อหา ซึ่งช่วยให้การจัดวางปรับตามขนาดหน้าจอได้อย่างเป็นธรรมชาติ โดยไม่ต้องใช้การแก้ไขตามจุดแบ่งช่วง

min-content: ขนาดเล็กที่สุดที่พอดีกับเนื้อหาโดยไม่ล้น (สำหรับข้อความจะตัดบรรทัดที่ขอบเขตของทุกคำ) max-content: ขนาดที่ต้องใช้เพื่อแสดงเนื้อหาในบรรทัดเดียวโดยไม่ตัดบรรทัด ทั้งสองแบบสะท้อนขนาดจริงของเนื้อหา

fit-content เทียบเท่ากับ min(max-content, max(min-content, available)) โดยจะขยายตามเนื้อหาจนถึงพื้นที่ว่างที่มีอยู่ จากนั้นจึงตัดบรรทัด เหมาะอย่างยิ่งสำหรับปุ่มและป้ายข้อความที่ควรกว้างเท่ากับข้อความ แต่ไม่กว้างเกินพื้นที่บรรจุ

minmax(min, max) ใน grid-template-columns ใช้กำหนดขนาดต่ำสุดและสูงสุดของช่องตาราง minmax(200px, 1fr) สร้างคอลัมน์ที่มีขนาดอย่างน้อย 200px แต่สามารถขยายได้ เมื่อใช้ร่วมกับ auto-fill จะสร้างตารางกริดที่ปรับตามขนาดเนื้อหาได้โดยธรรมชาติ

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

clamp(min, preferred, max) จำกัดค่าให้อยู่ระหว่างขอบเขตที่กำหนด font-size: clamp(1rem, 2.5vw, 1.5rem) ปรับขนาดระหว่าง 1rem ถึง 1.5rem ตามความกว้างของพื้นที่แสดงผล ทำให้ตัวอักษรปรับขนาดได้อย่างลื่นไหลโดยไม่ต้องใช้คิวรีสื่อ

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) สร้างตารางกริดที่ปรับตามขนาดหน้าจอ โดยจะแสดงเป็นคอลัมน์เดียวบนพื้นที่แสดงผลที่แคบมาก และเพิ่มคอลัมน์โดยอัตโนมัติเมื่อมีพื้นที่เพียงพอ ไม่ต้องใช้คิวรีสื่อ ไม่ต้องใช้ JavaScript

aspect-ratio: 16/9 ทำให้องค์ประกอบรักษาสัดส่วนไว้เมื่อความกว้างเปลี่ยนแปลง เมื่อใช้ร่วมกับ width: 100% พื้นที่บรรจุวิดีโอจะเต็มพื้นที่แม่และรักษาสัดส่วน 16:9 ได้เสมอ โดยไม่ต้องใช้ JavaScript หรือเทคนิคการกำหนดระยะห่างด้วยเปอร์เซ็นต์

การออกแบบตามขนาดเนื้อหาใช้คู่กับคุณสมบัติเชิงตรรกะของ CSS (inline-size, block-size, margin-inline) เพื่อสร้างการจัดวางที่ทำงานได้ทั้งในโหมดการเขียนแนวนอนและแนวตั้ง การกำหนดขนาดตามเนื้อหาจะปรับตามทิศทางการเขียนโดยอัตโนมัติ

แบบตายตัว: width: 300px — กว้าง 300px เสมอโดยไม่ขึ้นกับเนื้อหา แบบตามเนื้อหา: width: fit-content — กว้างเท่ากับเนื้อหา แต่ไม่เกินข้อจำกัด การจัดวางแบบตายตัวต้องใช้จุดแบ่งช่วงเพื่อปรับขนาด ส่วนการจัดวางแบบตามเนื้อหาจะปรับตัวเองตามเนื้อหาและบริบท

การออกแบบตามขนาดเนื้อหามีพลังมากที่สุดเมื่อเนื้อหามีขนาดแตกต่างกันตามธรรมชาติ การบังคับใช้การกำหนดขนาดตามเนื้อหากับเนื้อหาที่ทราบขนาดและมีรูปแบบเหมือนกันจะเพิ่มความซับซ้อนโดยไม่เกิดประโยชน์ ใช้ขนาดที่กำหนดตายตัวสำหรับส่วนโครงอินเทอร์เฟซที่คงที่ (การนำทาง แถบเครื่องมือ) และใช้การกำหนดขนาดตามเนื้อหาสำหรับพื้นที่เนื้อหา

auto-fit ทำงานแตกต่างจาก auto-fill ใน grid-template-columns อย่างไร

การออกแบบตามขนาดเนื้อหาใช้คีย์เวิร์ดการกำหนดขนาดของ CSS (min-content, max-content, fit-content), minmax() ร่วมกับ auto-fit, clamp() สำหรับการปรับขนาดแบบไหลลื่น และ aspect-ratio เพื่อสร้างการจัดวางที่ขับเคลื่อนด้วยขนาดเนื้อหาแทนจุดแบ่งช่วงของพื้นที่แสดงผล ผลลัพธ์คือการจัดวางที่ปรับตามขนาดหน้าจอได้อย่างเป็นธรรมชาติ โดยใช้ CSS น้อยลงและใช้คิวรีสื่อน้อยลง