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

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

Una Kravets

เลย์เอาต์ 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. แพนเค้กที่แยกส่วน: 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 ทั้ง 2 รายการจะย่อและขยาย

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 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 เครื่องหมายทับระหว่างรายการที่คั่นด้วยช่องว่างรายการแรกและรายการที่สองคือการแบ่งระหว่างแถวและคอลัมน์

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

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

06. กริด 12 คอลัมน์: grid-template-columns: repeat(12, 1fr)

ต่อไปเรามีอีกหนึ่งเลย์เอาต์คลาสสิก นั่นคือ Grid แบบ 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 (ทำซ้ำ อัตโนมัติ ต่ำสุด/สูงสุด): 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. Line Up: 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 ที่ปรับเปลี่ยนตามพื้นที่ ในการสาธิตนี้ คุณกำลังตั้งค่าความกว้างโดยใช้ฟังก์ชัน Clamp ดังนี้ width: clamp(<min>, <actual>, <max>)

ซึ่งจะกำหนดขนาดต่ำสุดและสูงสุดที่แน่นอน รวมถึงขนาดจริง โดยค่าอาจมีลักษณะดังนี้

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

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

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