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

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

Una Kravets

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

หากต้องการติดตามหรือเล่นกับเดโมเหล่านี้ด้วยตนเอง โปรดดูการฝัง Glitch ด้านบน หรือไปที่ 1linelayouts.glitch.me

01. กึ่งกลางซูเปอร์: 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. แพนเค้กที่แยกโครงสร้างแล้ว: 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;
}

ตอนนี้เมื่อคุณเพิ่มหรือลดขนาดหน้าจอ รายการที่พับอยู่จะทั้งหดและขยายใหญ่ขึ้น

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. ชุดแพนเค้ก: grid-template-rows: auto 1fr auto

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

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

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

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

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

พฤษภาคม รูปแบบจอกศักดิ์สิทธิ์สุดคลาสสิก: grid-template: auto 1fr auto / auto 1fr auto

สำหรับเลย์เอาต์ภาพศักดิ์สิทธิ์แบบคลาสสิกนี้ จะมีส่วนหัว ส่วนท้าย แถบด้านข้างทางซ้าย แถบด้านข้างทางขวา และเนื้อหาหลัก ซึ่งคล้ายกับเลย์เอาต์ก่อนหน้านี้ แต่ตอนนี้มีแถบด้านข้าง

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

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

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

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

ธันวาคม ตารางกริดช่วง 12: grid-template-columns: repeat(12, 1fr)

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

.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;
}

ธันวาคม RAM (เล่นซ้ำ, อัตโนมัติ, 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));
}

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

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

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

ธันวาคม รายชื่อผู้เล่น: 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. ยึดรูปแบบของฉัน: clamp(<min>, <actual>, <max>)

ต่อไปนี้คือเทคนิคที่เราจะอธิบายเกี่ยวกับการรองรับเบราว์เซอร์ที่น้อยลง แต่การมีนัยสำคัญบางอย่างที่น่าสนใจสำหรับการออกแบบและการออกแบบ UI ที่ตอบสนองตามอุปกรณ์ ในการสาธิตนี้ คุณกำลังตั้งค่าความกว้างโดยใช้ตัวหนีบดังนี้: 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>

และสุดท้าย เครื่องมือเลย์เอาต์สุดท้ายนี้เป็นเวอร์ชันทดลองที่สุดในกลุ่ม เบราว์เซอร์นี้เพิ่งเปิดตัวใน Chrome Canary ใน Chromium 84 และ Firefox พยายามนำฟีเจอร์นี้มาใช้งานจริง แต่ก็ยังไม่มีให้บริการในเบราว์เซอร์รุ่นเสถียรใดๆ ในขณะนี้

แต่ฉันอยากพูดถึงเรื่องนี้ เนื่องจากเป็นปัญหาที่เราพบบ่อย หลักการง่ายๆ ก็คือการคงอัตราส่วนของรูปภาพไว้

เมื่อใช้พร็อพเพอร์ตี้ 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 บรรทัด หากต้องการดูข้อมูลเพิ่มเติม โปรดดูวิดีโอแบบเต็ม และลองใช้การสาธิตด้วยตัวคุณเอง