CSS Gap เพิ่มพื้นที่เพื่อปรับปรุงเค้าโครงเว็บอย่างไร

ลิงค์ด่วน

⭐ช่องว่างคืออะไร?

⭐ วิธีเขียนคุณสมบัติช่องว่าง CSS

⭐การใช้ช่องว่างด้วย Flexbox

⭐การใช้ช่องว่างกับกริด

⭐การใช้ช่องว่างด้วยเลย์เอาต์แบบหลายคอลัมน์

ประเด็นที่สำคัญ

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

แอตทริบิวต์"ช่องว่าง"เป็นวิธีที่สะดวกในการระบุระยะห่างทั้งแนวนอนและแนวตั้งโดยการกำหนดค่าแยกสำหรับแถวและคอลัมน์ตามลำดับ

การใช้องค์ประกอบ void เข้ากันได้กับระบบเค้าโครง CSS ต่างๆ เช่น Flexbox, Grid และการจัดเรียงแบบหลายคอลัมน์

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

ช่องว่างคืออะไร?

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

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

⭐ เค้าโครงกล่องแบบยืดหยุ่น (“Flexbox”)

⭐เค้าโครงตาราง

⭐ เค้าโครงหลายคอลัมน์

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

วิธีเขียนคุณสมบัติช่องว่าง CSS

โครงสร้างพื้นฐานของคุณสมบัติช่องว่างสามารถแสดงได้ดังนี้:

 gap: <row-gap> <column-gap>;

แต่ละค่าอาจประกอบด้วยการวัดหรือสัดส่วน และระยะห่างระหว่างแถวหรือคอลัมน์ (ไม่บังคับ) เมื่อไม่ได้ระบุช่องว่าง ตัวเลขเดี่ยวจะควบคุมทั้งจำนวนแถวและคอลัมน์ ดังนั้นอาจพบการกำหนดค่าต่อไปนี้:

 gap: 10em; 

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

 gap: 20px 10%; 

การใช้งานจะสร้างระยะห่าง 20 หน่วยในทิศทางแนวนอน (แถว) และการแยกเท่ากับหนึ่งในสิบของความกว้างขององค์ประกอบที่ปิดล้อมในทิศทางแนวตั้ง (คอลัมน์)

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

การใช้ช่องว่างกับ Flexbox

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

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

 .flex-layout {
    display: flex;
}

.flex-layout div {
    padding: 1em;
    margin: 10px;
    outline: 1px solid black;
} 

สร้างเค้าโครงนี้:

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

 .flex-layout { gap: 20px; } 

การเพิ่มระยะห่างระหว่างรายการ Flex จะทำให้เกิดช่องว่างระหว่างแต่ละรายการ โดยไม่เหลือพื้นที่เพิ่มเติมรอบๆ แต่ละรายการ

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

 .flex-layout {
    gap: 20px 40px;
    flex-wrap: wrap;
} 

คุณจะเห็นผลกระทบของช่องว่างทั้งสอง:

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

การใช้ช่องว่างกับกริด

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

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

 .grid-layout {
    display: grid;
    grid-template-columns: 100px 80px 100px;
}

.grid-layout div {
   padding: 1em;
   margin: 10px;
   outline: 1px solid black;
} 

ผลลัพธ์ที่ได้คือเค้าโครงตารางทั่วไป:

การเพิ่มช่องว่าง:

 €‹.grid-layout {
    gap: 80px 40px;
} 

จะแทรกช่องว่างระหว่างแต่ละรายการ:

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

การใช้ช่องว่างด้วยเค้าโครงแบบหลายคอลัมน์

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

 .column-layout {
    column-count: 3;
} 

การวัดขนาดตัวอักษรจะแสดงเป็นหน่วย em ซึ่งสัมพันธ์กับขนาดตัวอักษรขององค์ประกอบหลัก หน่วย em เท่ากับขนาดตัวอักษรปัจจุบันขององค์ประกอบหลักคูณด้วยหนึ่ง ดังนั้น หากองค์ประกอบหลักมีขนาดตัวอักษร 16 พิกเซล หน่วย em จะเท่ากับ 16 พิกเซลหรือประมาณ 0.375 นิ้ว

ปรากฏการณ์นี้จะเด่นชัดมากขึ้นเมื่อเปลี่ยนแบบอักษรและโดยเฉพาะอย่างยิ่งเมื่อจัดแนวเนื้อหาตามขอบ:

 .column-layout {
    font-size: 14pt;
    line-height: 1.4;
    text-align: justify;
} 

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

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

 .column-layout {
    gap: 2em;
} 

คุณอาจค้นพบว่าการใช้ขนาดแบบอักษร เช่น 2em หรือ 3em สามารถทำให้ได้ผลลัพธ์ที่ชัดเจนมากขึ้น โดยคำนึงถึงการพิจารณาเพิ่มเติม เช่น ขนาดของความกว้างคอลัมน์ของคุณ

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

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

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