Babel Coder

การใช้ Gap ใน Flexbox และ CSS Grid Layout

beginner

Flexbox และ CSS Grid Layout เป็นสองวัตถุดิบของ CSS ที่ช่วยรังสรรค์งานจัดหน้าเพจให้ดูดีมีชาติตระกูล ที่สำคัญคือช่วยให้ชีวิต Developer ตัวน้อยนั้นง่ายขึ้นด้วย

บางสถานการณ์ที่เราต้องการจัดรูปแบบด้วย Flexbox ให้แต่ละกล่องของเรามีความอวบอ้วน (width) มากสุดเท่าที่จะเป็นไปได้ โดยแต่ละกล่องถ้าอยู่ในแถวเดียวกันแล้วจะมีขนาดเท่ากัน สามารถใช้ flex: 1 เข้าช่วย หน้าตาก็จะออกมาบ้าน ๆ ประมาณนี้

Flex Grow

และนี่คือหน้าตาของ HTML

<div class="container">
  <div class="card">Card#1</div>
  <div class="card">Card#2</div>
  <div class="card">Card#3</div>
  <div class="card">Card#4</div>
  <div class="card">Card#5</div>
</div>

และนี่คือ CSS

.container {
  display: flex;
  flex-flow: wrap;
}

.card {
  flex: 1;
  padding: 2rem;
  border: 1px solid rgb(210, 210, 210);
  margin-right: 1rem;
  margin-top: 1rem;
}

คำถาม: ถ้าเราอยากจะเพิ่มช่องว่างข้าง ๆ กล่องและข้างบนกล่องซัก 1 rem จะทำอย่างไร ?

แหมมันจะไปยากอะไร ก็เติม margin เข้าไปแบบนี้ซะก็สิ้นเรื่อง

.card {
  flex: 1;
  padding: 2rem;
  border: 1px solid rgb(210, 210, 210);
  margin-right: 1rem;
  margin-top: 1rem;
}

margin อาจจะช่วยเราได้ แต่เราจะมารู้จักมาตรฐานสำหรับการจัดการเรื่องนี้กันนั่นก็คือ gap properties นั่นเอง

สารบัญ

การใช้งาน row-gap และ column-gap กับ Flexbox

CSS มีมาตรฐานสำหรับการเพิ่มร่องกว้างระหว่างไอเทม (gutter) ด้วยการใช้ row-gap สำหรับช่องว่างระหว่างแถว และ column-gap สำหรับคอลัมภ์ ดังนั้นเราจึงสามารถตั้งค่าทั้งสองสิ่งนี้แทน margin ที่เราใช้กันก่อนหน้าได้ดังนี้

.container {
  display: flex;
  flex-flow: wrap;
  row-gap: 1rem;
  column-gap: 1rem;
}

เมื่อเพิ่มสองบรรทัดนี้ Flexbox ของเราก็จะชมดชม้อยน่าชายตามองเช่นข้างล่าง

Flexbox Gap

ผลลัพธ์ของ margin-top นั้นจะแตกต่างจากการใช้ row-gap หน่อยตรงที่ margin-top นั้นจะเพิ่มช่องว่างข้างบนของทุกแถวรวมแถวแรกด้วย ในขณะที่ row-gap นั้นต่างออกไป เมื่อแถวแรกไม่มีแถวก่อนหน้านั้น จึงไม่มีเหตุต้องเพิ่มช่องว่างคั่นกลางระหว่างแถวลงไป เหตุนี้แถวแรกเมื่อใช้ row-gap จึงไม่มีช่องว่างเกิดขึ้น

การใช้ row-gap และ column-gap กับ CSS Grid Layout

มาตรฐานของ CSS Grid Layout นั้นมี grid-row-gap สำหรับช่องว่างระหว่างแถว และมี grid-column-gap สำหรับช่องว่างระหว่างคอลัมภ์ เมื่อเราเปลี่ยนการแสดงผลจากตัวอย่างก่อนหน้าด้วยการใช้ CSS Grid Layout พบว่า CSS จะเป็นเช่นนี้

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
}

.card {
  padding: 2rem;
  border: 1px solid rgb(210, 210, 210);
}

ด้วย CSS ข้างต้น ผลลัพธ์ที่ออกมาจะเป็นเช่นภาพล่าง

Grid Column / Row Gap

grid-gap เป็นรูปย่อของการใช้งานแทน grid-row-gap และ grid-column-gap กรณีที่ช่องว่างทั้งแนวแถวและแนวหลักเท่ากัน เราสามารถลดรูปด้วยการใช้เพียง grid-gap ได้ดังนี้

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

จากทั้งสองตัวอย่างของเรา ไม่ว่าจะเป็น Flexbox หรือ CSS Grid Layout ทั้งคู่ต่างก็มีช่องว่างระหว่างแถวและคอลัมภ์ได้ทั้งสิ้น จะดีกว่าไหมถ้าจะมีเพียงกฎเดียวแต่ใช้ได้ทั้งสอง

สำหรับ CSS Grid Layout นั้น grid-row-gap และ grid-column-gap กำลังจะถูกแทนที่ด้วย row-gap และ column-gap เราจึงสามารถใช้สองกฎใหม่นี้สำหรับ Grid ได้

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  row-gap: 1rem;
  column-gap: 1rem;
}

เว็บเบราว์เซอร์ไหนสนับสนุนการใช้งานบ้าง

ช่างน่าขายหน้ายิ่งนักที่ของใหม่ใน CSS ก็ใช่ว่าจะได้รับการสนับสนุนจากทุกเบราว์เซอร์

Browser Support

ข้อมูลจาก MDN แสดงให้เห็นว่า gap properties นั้นถ้าเป็นใน CSS Grid Layout จะมีเพียงเบราว์เซอร์ที่โลกลืมอย่าง IE ที่ไม่สนับสนุน ทว่าที่น่าบัดซบคือ gap properties แถมไม่จะรองรับในเบราว์เซอร์ไหนเลยเมื่อใช้งานกับ Flexbox… เพลีย

สรุป

เคลียร์แล้ว ไม่สรุป เปลืองบรรทัด!


แสดงความคิดเห็นของคุณ


No any discussions