เลย์เอาต์แบบไมโคร

เมื่อนึกถึงเลย์เอาต์ เรามักนึกถึงการออกแบบระดับหน้าเว็บ แต่คอมโพเนนต์ขนาดเล็กในหน้าก็มีเลย์เอาต์ของตัวเองได้

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

เลย์เอาต์แบบ 2 คอลัมน์ โดยแบบกว้างและแคบ 1 คอลัมน์ วัตถุสื่อจะวางเรียงกันแตกต่างกันไป ขึ้นอยู่กับว่าวัตถุนั้นอยู่ในคอลัมน์กว้างหรือแคบ

GRid

ตารางกริด CSS ไม่ได้มีไว้สำหรับเลย์เอาต์ระดับหน้าเว็บเท่านั้น นอกจากนี้ยังทำงานได้ดีกับองค์ประกอบที่อยู่ภายในนั้นด้วย

ในตัวอย่างนี้ องค์ประกอบเทียม ::before และ ::after จะสร้างเส้นตกแต่งทั้งสองด้านของส่วนหัว ส่วนหัวจะเป็นคอนเทนเนอร์แบบตารางกริด เราจัดวางองค์ประกอบแต่ละองค์ประกอบให้เต็มพื้นที่ของเส้นที่มีอยู่เสมอ

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Firefox ที่แสดงเส้นตารางที่ซ้อนทับกัน เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome ที่แสดงการวางซ้อนตารางกริด
เบราว์เซอร์ในเดสก์ท็อป เช่น Firefox และ Chrome มีเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่แสดงให้เห็นเส้นตารางและพื้นที่ที่วางซ้อนอยู่บนการออกแบบของคุณ

ดูวิธีตรวจสอบเลย์เอาต์ตารางกริดในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เฟล็กซ์บ็อกซ์

อย่างที่ชื่อ flexbox ให้คุณทำให้คอมโพเนนต์มีความยืดหยุ่น คุณประกาศได้ว่าองค์ประกอบใดในคอมโพเนนต์ควรมีขนาดต่ำสุดหรือสูงสุด และให้องค์ประกอบอื่นๆ ปรับเปลี่ยนให้พอดีกับคอมโพเนนต์ได้

ในตัวอย่างนี้ รูปภาพใช้พื้นที่ว่าง 1 ใน 4 ส่วนข้อความจะใช้พื้นที่อีก 3 ใน 4 ส่วนที่เหลือ แต่รูปภาพจะไม่มีขนาดใหญ่กว่า 200 พิกเซล

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Firefox ที่แสดงการวางซ้อน Flexbox เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome ที่แสดงการวางซ้อน Flexbox
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Firefox และ Chrome จะช่วยให้คุณเห็นภาพรูปร่างของคอมโพเนนต์ Flexbox

ดูวิธีตรวจสอบเลย์เอาต์ Flexbox ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

การค้นหาคอนเทนเนอร์

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

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

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

หากต้องการรายงานมิติข้อมูลของคอนเทนเนอร์ ให้ใช้การค้นหาคอนเทนเนอร์

ในการเริ่มต้น ให้กำหนดองค์ประกอบที่จะทำหน้าที่เป็นคอนเทนเนอร์

main,
aside {
  container-type: inline-size;
}

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

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

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

หากออบเจ็กต์สื่ออยู่ในคอนเทนเนอร์ที่แคบกว่า 25em ระบบจะไม่ใช้รูปแบบ Flexbox รูปภาพและข้อความจะปรากฏตามลำดับแนวตั้ง

แต่หากองค์ประกอบที่มีอยู่กว้างกว่า 25em รูปภาพและข้อความจะปรากฏคู่กัน

การค้นหาคอนเทนเนอร์ช่วยให้คุณจัดรูปแบบคอมโพเนนต์ได้อย่างอิสระ ความกว้างของวิวพอร์ตไม่ใช่สิ่งสำคัญอีกต่อไป คุณจะเขียนกฎโดยอิงตามความกว้างขององค์ประกอบที่มีอยู่ได้

ภาชนะ 2 ขนาดแตกต่างกัน

การรวมข้อความค้นหา

คุณสามารถใช้คิวรี่สื่อสำหรับการออกแบบหน้าเว็บ และคำค้นหาคอนเทนเนอร์สำหรับคอมโพเนนต์ภายในหน้าเว็บ

ในตัวอย่างนี้ โครงสร้างโดยรวมของหน้าเว็บจะมีองค์ประกอบ main และองค์ประกอบ aside มีออบเจ็กต์สื่ออยู่ภายในองค์ประกอบทั้ง 2 รายการ

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

คิวรี่สื่อจะใช้เลย์เอาต์แบบตารางกริดกับองค์ประกอบ main และ aside เมื่อวิวพอร์ตกว้างกว่า 45em

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

กฎการค้นหาคอนเทนเนอร์สำหรับออบเจ็กต์สื่อจะยังคงเหมือนเดิม นั่นคือ ใช้เลย์เอาต์ Flexbox แนวนอนเฉพาะในกรณีที่องค์ประกอบที่มีความกว้างกว่า 25em

เลย์เอาต์แบบ 2 คอลัมน์ โดยแบบกว้างและแคบ 1 คอลัมน์ วัตถุสื่อจะวางเรียงกันแตกต่างกันไป ขึ้นอยู่กับว่าวัตถุนั้นอยู่ในคอลัมน์กว้างหรือแคบ

การค้นหาคอนเทนเนอร์เป็นตัวพลิกเกมสำหรับเลย์เอาต์ขนาดเล็ก คอมโพเนนต์สามารถอยู่ได้ในตัวเองโดยไม่ต้องอิงตามวิวพอร์ตของเบราว์เซอร์

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับเลย์เอาต์ขนาดเล็ก

ทั้งตารางกริดและ Flexbox ต่างก็มีประโยชน์สำหรับเลย์เอาต์ขนาดเล็กใช่ไหม

จริง
🎉
เท็จ
🎉 ทั้งตารางกริดและ Flexbox ต่างมีประโยชน์อย่างยิ่ง แม้แต่กับเลย์เอาต์ที่ "เล็กที่สุด"

ก่อนหน้านี้ คุณได้เรียนรู้เกี่ยวกับเลย์เอาต์มาโครระดับหน้าเว็บ ตอนนี้คุณก็รู้เกี่ยวกับเลย์เอาต์ขนาดเล็กระดับคอมโพเนนต์แล้ว ต่อไป คุณจะได้เจาะลึกรายละเอียดพื้นฐานต่างๆ ของเนื้อหา คุณจะได้เรียนรู้วิธีทำให้รูปภาพปรับเปลี่ยนตามอุปกรณ์ คราวนี้มาลองพิจารณาการออกแบบตัวอักษรที่ปรับเปลี่ยนตามอุปกรณ์กัน