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

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

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. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>

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

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

ตัวย่อ 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

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

พฤษภาคม เลย์เอาต์ 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); สำหรับคอลัมน์เทมเพลตตารางกริดจะทำให้คุณมีคอลัมน์ 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;
}

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

คุณใช้การทําซ้ำอีกครั้ง แต่ครั้งนี้ใช้คีย์เวิร์ด 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. ยึดรูปแบบของฉัน: 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 บรรทัด ดูข้อมูลเพิ่มเติมได้โดยดูวิดีโอแบบเต็มและลองใช้เดโมด้วยตนเอง