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

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

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

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

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

และนี่คือ CSS

1.container {
2  display: flex;
3  flex-flow: wrap;
4}
5
6.card {
7  flex: 1;
8  padding: 2rem;
9  border: 1px solid rgb(210, 210, 210);
10  margin-right: 1rem;
11  margin-top: 1rem;
12}

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

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

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

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

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

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

1.container {
2  display: flex;
3  flex-flow: wrap;
4  row-gap: 1rem;
5  column-gap: 1rem;
6}

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

ผลลัพธ์ของ 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 จะเป็นเช่นนี้

1.container {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
4  grid-row-gap: 1rem;
5  grid-column-gap: 1rem;
6}
7
8.card {
9  padding: 2rem;
10  border: 1px solid rgb(210, 210, 210);
11}

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

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

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

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

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

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

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

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

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

สรุป

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