เลย์เอาต์ทันสมัย 10 แบบใน CSS บรรทัดเดียว

โพสต์นี้จะไฮไลต์ CSS ที่มีประสิทธิภาพไม่กี่บรรทัดซึ่งช่วยให้คุณสร้างเลย์เอาต์ที่ทันสมัยและมีประสิทธิภาพได้

Una Kravets

เผยแพร่เมื่อวันที่ 7 กรกฎาคม 2020 อัปเดตล่าสุดเมื่อวันที่ 15 ธันวาคม 2025

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

หมายเหตุ: คุณสมบัติทั้งสิบประการที่กล่าวถึงในบทความนี้มี ใช้งานได้ทั่วไป

หากต้องการทำตามหรือลองเล่นเดโมเหล่านี้ด้วยตนเอง โปรดดูเว็บไซต์ที่ฝังไว้ด้านบน หรือไปที่ 1linelayouts.com

01. Super Centered: place-items: center

สำหรับเลย์เอาต์ "บรรทัดเดียว" แบบแรก เรามาไขปริศนาที่ยิ่งใหญ่ที่สุดในโลก CSS ทั้งหมดกัน นั่นคือการจัดสิ่งต่างๆ ให้อยู่กึ่งกลาง เราอยากให้คุณทราบว่าการดำเนินการดังกล่าวทำได้ง่ายกว่าที่คุณคิดด้วย place-items: center

ก่อนอื่นให้ระบุ grid เป็นเมธอด display แล้วเขียน place-items: center ในองค์ประกอบเดียวกัน place-items เป็นชวเลขเพื่อตั้งค่าทั้ง align-items และ justify-items พร้อมกัน การตั้งค่าเป็น center จะทำให้ทั้ง align-items และ justify-items ได้รับการตั้งค่าเป็น center

.parent {
  display: grid;
  place-items: center;
}

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

02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>

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

การใช้ Flexbox สำหรับเอฟเฟกต์นี้จะทำให้คุณไม่จำเป็นต้องใช้การค้นหาสื่อเพื่อปรับตำแหน่งขององค์ประกอบเหล่านี้เมื่อหน้าจอปรับขนาด

flex ย่อมาจาก flex: <flex-grow> <flex-shrink> <flex-basis>

ด้วยเหตุนี้ หากคุณต้องการให้กล่องมีขนาด <flex-basis> ย่อขนาดลงเมื่อมีขนาดเล็กลง แต่ไม่ขยายเพื่อเติมพื้นที่เพิ่มเติม ให้เขียนว่า flex: 0 1 <flex-basis> ในกรณีนี้ <flex-basis> ของคุณคือ 150px ดังนั้นจึงมีลักษณะดังนี้

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

หากคุณต้องการให้กล่องยืดและเติมเต็มพื้นที่เมื่อตัดขึ้นบรรทัดใหม่ ให้ตั้งค่า <flex-grow> เป็น 1 ซึ่งจะมีลักษณะดังนี้

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

ตอนนี้เมื่อคุณเพิ่มหรือลดขนาดหน้าจอ รายการ Flex เหล่านี้จะย่อและขยายตาม

03. แถบด้านข้างระบุว่า grid-template-columns: minmax(<min>, <max>) …)

การสาธิตนี้ใช้ประโยชน์จากฟังก์ชัน minmax สำหรับเลย์เอาต์ตารางกริด สิ่งที่เรากำลังทำอยู่คือการตั้งค่าขนาดแถบด้านข้างขั้นต่ำเป็น 150px แต่ในหน้าจอขนาดใหญ่ ให้ขยายเป็น 25% แถบด้านข้างจะใช้พื้นที่แนวนอนขององค์ประกอบหลัก 25% เสมอจนกว่า 25% จะมีขนาดเล็กกว่า 150px

เพิ่มค่านี้เป็นค่าของ grid-template-columns โดยมีค่าต่อไปนี้ minmax(150px, 25%) 1fr รายการในคอลัมน์แรก (แถบด้านข้างในกรณีนี้) จะได้รับ minmax เป็น 150px ที่ 25% และรายการที่ 2 (ส่วน main ที่นี่) จะใช้พื้นที่ที่เหลือเป็นแทร็ก 1fr แทร็กเดียว

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. Pancake Stack: grid-template-rows: auto 1fr auto

ตัวอย่างนี้ไม่เหมือนกับ Deconstructed Pancake ตรงที่จะไม่ตัดบรรทัดองค์ประกอบย่อยเมื่อขนาดหน้าจอเปลี่ยนไป เลย์เอาต์นี้มักเรียกกันว่าส่วนท้ายแบบติดหนึบ และมักใช้กับทั้งเว็บไซต์และแอปในแอปพลิเคชันบนมือถือ (ส่วนท้ายมักเป็นแถบเครื่องมือ) และเว็บไซต์ (แอปพลิเคชันหน้าเว็บเดียวมักใช้เลย์เอาต์ส่วนกลางนี้)

การเพิ่ม display: grid ลงในคอมโพเนนต์จะทำให้คุณได้ตารางกริดคอลัมน์เดียว อย่างไรก็ตาม พื้นที่หลักจะมีความสูงเท่ากับเนื้อหาที่มีส่วนท้ายอยู่ด้านล่างเท่านั้น

หากต้องการให้ส่วนท้ายอยู่ด้านล่าง ให้เพิ่มโค้ดต่อไปนี้

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

ซึ่งจะตั้งค่าเนื้อหาส่วนหัวและส่วนท้ายให้ใช้ขนาดขององค์ประกอบย่อยโดยอัตโนมัติ และใช้พื้นที่ที่เหลือ (1fr) กับพื้นที่หลัก ในขณะที่แถวขนาด auto จะใช้ขนาดของเนื้อหาขั้นต่ำขององค์ประกอบย่อย ดังนั้นเมื่อเนื้อหานั้นมีขนาดเพิ่มขึ้น แถวก็จะขยายเพื่อปรับตาม

05. เลย์เอาต์ Holy Grail แบบคลาสสิก: grid-template: auto 1fr auto / auto 1fr auto

เลย์เอาต์แบบคลาสสิกที่สมบูรณ์แบบนี้มีส่วนหัว ส่วนท้าย แถบด้านซ้าย แถบด้านขวา และเนื้อหาหลัก ซึ่งคล้ายกับเลย์เอาต์ก่อนหน้า แต่ตอนนี้มีแถบด้านข้างแล้ว

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

คู่พร็อพเพอร์ตี้และค่าคือ grid-template: auto 1fr auto / auto 1fr auto เครื่องหมายทับระหว่างรายการที่คั่นด้วยเว้นวรรครายการแรกและรายการที่ 2 คือตัวแบ่งระหว่างแถวและคอลัมน์

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

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

06. ตารางกริด 12 ช่วง: grid-template-columns: repeat(12, 1fr)

ถัดไปคืออีกหนึ่งคลาสสิก: ตารางกริด 12 ช่วง คุณสามารถเขียนตารางกริดใน CSS ได้อย่างรวดเร็วด้วยฟังก์ชัน repeat() การใช้ repeat(12, 1fr); สำหรับคอลัมน์เทมเพลตตารางกริดจะทำให้คุณมี 12 คอลัมน์ โดยแต่ละคอลัมน์มีขนาด 1fr

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

ตอนนี้คุณมีตารางกริดแบบ 12 คอลัมน์แล้ว เราสามารถวางองค์ประกอบย่อยบนตารางกริดได้ วิธีหนึ่งในการดำเนินการนี้คือการวางองค์ประกอบโดยใช้เส้นตาราง เช่น grid-column: 1 / 13 จะครอบคลุมตั้งแต่บรรทัดแรกไปจนถึงบรรทัดสุดท้าย (บรรทัดที่ 13) และครอบคลุม 12 คอลัมน์ grid-column: 1 / 5; จะครอบคลุม 4 รายการแรก

อีกวิธีหนึ่งในการเขียนคือการใช้คีย์เวิร์ด span เมื่อใช้ span คุณจะกำหนดเส้นเริ่มต้นและจำนวนคอลัมน์ที่จะขยายจากจุดเริ่มต้นนั้น ในกรณีนี้ grid-column: 1 / span 12 จะเทียบเท่ากับ grid-column: 1 / 13 และ grid-column: 2 / span 6 จะเทียบเท่ากับ grid-column: 2 / 8

.child-span-12 {
  grid-column: 1 / span 12;
}

07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))

สำหรับตัวอย่างที่ 7 นี้ ให้รวมแนวคิดบางอย่างที่คุณได้เรียนรู้ไปแล้วเพื่อสร้างเลย์เอาต์ที่ปรับเปลี่ยนตามพื้นที่โฆษณาซึ่งมีองค์ประกอบย่อยที่ยืดหยุ่นและจัดวางโดยอัตโนมัติ เจ๋งดีนะ คำสำคัญที่ควรจำในที่นี้คือ repeat, auto-(fit|fill) และ minmax()' ซึ่งคุณจำได้จากตัวย่อ RAM

เมื่อรวมทั้งหมดเข้าด้วยกันแล้วจะมีลักษณะดังนี้

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

คุณกำลังใช้ repeat อีกครั้ง แต่คราวนี้ใช้คีย์เวิร์ด auto-fit แทนค่าตัวเลขที่ชัดเจน ซึ่งจะเปิดใช้การวางองค์ประกอบย่อยเหล่านี้โดยอัตโนมัติ องค์ประกอบย่อยเหล่านี้ยังมีค่าต่ำสุดพื้นฐานเป็น 150px และค่าสูงสุดเป็น 1fr ซึ่งหมายความว่าในหน้าจอขนาดเล็ก องค์ประกอบย่อยจะใช้ความกว้าง 1fr เต็ม และเมื่อแต่ละองค์ประกอบมีความกว้างถึง 150px องค์ประกอบเหล่านั้นจะเริ่มไหลไปอยู่ในบรรทัดเดียวกัน

เมื่อใช้ auto-fit กล่องจะขยายออกเมื่อขนาดแนวนอนเกิน 150 พิกเซลเพื่อเติมพื้นที่ที่เหลือทั้งหมด อย่างไรก็ตาม หากคุณเปลี่ยนค่านี้เป็น auto-fill คอลัมน์จะไม่ยืดออกเมื่อขนาดพื้นฐานในฟังก์ชัน minmax เกินขีดจำกัด

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

08. รายการ: justify-content: space-between

สำหรับเลย์เอาต์ถัดไป ประเด็นหลักที่ต้องการแสดงให้เห็นคือ justify-content: space-between ซึ่งจะวางองค์ประกอบย่อยรายการแรกและรายการสุดท้ายไว้ที่ขอบของกรอบล้อมรอบ โดยมีพื้นที่ที่เหลือกระจายเท่าๆ กันระหว่างองค์ประกอบต่างๆ สำหรับการ์ดเหล่านี้ ระบบจะวางการ์ดไว้ในโหมดการแสดงผล Flexbox โดยกำหนดทิศทางเป็นคอลัมน์โดยใช้ flex-direction: column

ซึ่งจะวางชื่อ คำอธิบาย และบล็อกรูปภาพในคอลัมน์แนวตั้งภายในบัตรหลัก จากนั้น การใช้ justify-content: space-between จะยึดองค์ประกอบแรก (ชื่อ) และองค์ประกอบสุดท้าย (บล็อกรูปภาพ) ไว้ที่ขอบของ Flexbox และข้อความอธิบายระหว่างองค์ประกอบเหล่านั้นจะวางโดยมีระยะห่างเท่ากันจากปลายแต่ละด้าน

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

09. Clamping My Style: clamp(<min>, <actual>, <max>)

นี่คือจุดที่เราจะเข้าสู่เทคนิคบางอย่างที่มีผลลัพธ์ที่น่าตื่นเต้นอย่างมากสำหรับเลย์เอาต์และการออกแบบ UI ที่ปรับเปลี่ยนตามอุปกรณ์ ในการสาธิตนี้ คุณกำลังตั้งค่าความกว้างโดยใช้ clamp ดังนี้ width: clamp(<min>, <actual>, <max>)

ซึ่งจะกำหนดขนาดต่ำสุดและสูงสุดแบบสัมบูรณ์ รวมถึงขนาดจริง เมื่อใช้ค่า ตัวอย่างเช่น

.parent {
  width: clamp(23ch, 60%, 46ch);
}

ขนาดขั้นต่ำที่นี่คือ 23ch หรือ 23 หน่วยอักขระ และขนาดสูงสุดคือ 46ch หรือ 46 อักขระ หน่วยความกว้างของอักขระจะขึ้นอยู่กับขนาดแบบอักษรขององค์ประกอบ (โดยเฉพาะความกว้างของสัญลักษณ์ 0) ขนาด "จริง" คือ 50% ซึ่งหมายถึง 50% ของความกว้างขององค์ประกอบหลักขององค์ประกอบนี้

สิ่งที่ฟังก์ชัน clamp() ทำในที่นี้คือการเปิดใช้ให้องค์ประกอบนี้คงความกว้าง 50% ไว้จนกว่า 50% จะมากกว่า 46ch (ในวิวพอร์ตที่กว้างขึ้น) หรือน้อยกว่า 23ch (ในวิวพอร์ตที่เล็กลง) คุณจะเห็นว่าเมื่อฉันยืดและย่อขนาดขององค์ประกอบหลัก ความกว้างของการ์ดนี้จะเพิ่มขึ้นจนถึงจุดสูงสุดที่จำกัดไว้ และลดลงจนถึงจุดต่ำสุดที่จำกัดไว้ จากนั้นจะยังคงอยู่ตรงกลางในองค์ประกอบหลักเนื่องจากเราได้ใช้พร็อพเพอร์ตี้เพิ่มเติมเพื่อจัดให้อยู่ตรงกลาง ซึ่งจะช่วยให้เลย์เอาต์อ่านง่ายขึ้น เนื่องจากข้อความจะไม่กว้างเกินไป (มากกว่า 46ch) หรือบีบอัดและแคบเกินไป (น้อยกว่า 23ch)

นอกจากนี้ยังเป็นวิธีที่ยอดเยี่ยมในการใช้การจัดพิมพ์ที่ปรับเปลี่ยนตามอุปกรณ์ด้วย เช่น คุณอาจเขียนว่า font-size: clamp(1.5rem, 20vw, 3rem) ในกรณีนี้ ขนาดแบบอักษรของบรรทัดแรกจะถูกจำกัดให้อยู่ระหว่าง 1.5rem ถึง 3rem เสมอ แต่จะขยายและย่อตามค่าจริง 20vw เพื่อให้พอดีกับความกว้างของวิวพอร์ต

เทคนิคนี้เหมาะอย่างยิ่งสำหรับการตรวจสอบความสามารถในการอ่านด้วยค่าขนาดต่ำสุดและสูงสุด

10. การคงสัดส่วนภาพ: aspect-ratio: <width> / <height>

และสุดท้าย เลย์เอาต์นี้จะช่วยแก้ปัญหาที่พบบ่อยเกี่ยวกับการคงสัดส่วนภาพไว้

เมื่อใช้พร็อพเพอร์ตี้ aspect-ratio ขณะที่ฉันปรับขนาดการ์ด บล็อกภาพสีเขียวจะคงสัดส่วนภาพ 16 x 9 นี้ไว้ เรากำลังปรับสัดส่วนภาพให้เหมาะสมกับ aspect-ratio: 16 / 9

.video {
  aspect-ratio: 16 / 9;
}

หากต้องการรักษาสัดส่วนภาพ 16 x 9 โดยไม่มีพร็อพเพอร์ตี้นี้ คุณจะต้องใช้แฮ็ก padding-top และกำหนดระยะห่างจากขอบเป็น 56.25% เพื่อตั้งค่าอัตราส่วนความสูงต่อความกว้าง ในเร็วๆ นี้ เราจะมีพร็อพเพอร์ตี้สำหรับกรณีนี้เพื่อหลีกเลี่ยงการแฮ็กและความจำเป็นในการคำนวณเปอร์เซ็นต์ คุณสามารถสร้างสี่เหลี่ยมจัตุรัสที่มีสัดส่วน 1 / 1, สัดส่วน 2 ต่อ 1 ที่มี 2 / 1 และทุกอย่างที่คุณต้องการเพื่อให้รูปภาพนี้ปรับขนาดตามสัดส่วนขนาดที่กำหนดไว้

.square {
  aspect-ratio: 1 / 1;
}

ฟีเจอร์นี้เป็นฟีเจอร์ที่ควรทราบเนื่องจากช่วยแก้ปัญหาความขัดแย้งของนักพัฒนาซอฟต์แวร์จำนวนมากที่ฉันเคยพบมาหลายครั้ง โดยเฉพาะอย่างยิ่งเมื่อพูดถึงวิดีโอและ iframe

บทสรุป

ขอขอบคุณที่ติดตามเส้นทางนี้ผ่าน CSS 10 บรรทัดที่ทรงพลัง ดูข้อมูลเพิ่มเติมได้จากวิดีโอฉบับเต็ม