การใช้ CSS Multi-Columns เพื่อแสดงผลหลายคอลัมน์แบบ Responsive

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

เราจะเริ่มต้นบทความของเราด้วยการสร้างการแสดงผลดังกล่าวผ่านก้อน HTML ดังนี้

1<div class="columns">
2  <h1>Lorem Ipsum คืออะไร?</h1>
3  <p>
4    <!-- ใส่เนื้อหาของกลุ่มคอลัมน์ด้านบนรูปภาพ -->
5  </p>
6  <img src="path/to/image" />
7  <p>
8    <!-- ใส่เนื้อหาของกลุ่มคอลัมน์ด้านล่างรูปภาพ -->
9  </p>
10</div>

และนี่คือหน้าตาของเพจเราก่อนแบ่งส่วนคอลัมน์

แบ่งคอลัมน์ด้วย column-count

โจทย์ของเราคือต้องการให้เนื้อหาในเพจแบ่งออกเป็นสามคอลัมน์ เราจึงเริ่มต้นด้วยการใส่ column-count: 3 ในคลาสของ columns เพียงเท่านี้เนื้อหาของเราก็จะถูกแบ่งออกเป็นสามส่วนเรียบร้อยแล้วละ

1.columns {
2  column-count: 3;
3}

อุต๊ะ ทุกอย่างก็เหมือนจะดูดีนะถ้าไม่ติดที่รูปภาพดันทะลึ่งไปกองรวมอยู่คอลัมน์กลางซะงั้น

ใช้ column-span เพื่อระบุจำนวนคอลัมน์ที่อยากสิง

เราไม่อยากให้เจ้ากระต่ายไปกองอยู่คอลัมน์กลาง หากแต่อยากจับดีดขึงแล้วพิงเสาให้เหยียดยาวตลอดแนวทั้งสามคอลัมน์ต่างหาก การนี้จะสำเร็จได้ต้องอาศัยความร่วมมือจาก column-span โดยค่าที่สามารถระบุได้คือ none (ค่าเริ่มต้น), all, initial และ inherit สำหรับโจทย์ของเราจะใช้ all ในความหมายที่ว่าขึงพืดตลอดแนว ข้อจำกัดอย่างหนึ่งของการใช้ column-span คืออีลีเมนต์นั้น ต้องมีการแสดงผลเป็น block แต่แท็ก img นั้นมีการแสดงผลเริ่มต้นเป็นแบบ inline จึงต้องเปลี่ยนเป็น block ก่อน

1img {
2  display: block;
3  column-span: all;
4}

เพิ่มเส้นคั่นระหว่างคอลัมน์ด้วย column-rule

ผลลัพธ์ตอนนี้ก็ดูเหมือนสวยนะแต่ความงามที่ขาดหายคือเส้นคั่นระหว่างคอลัมน์ไง CSS เตรียมกฎสำหรับวาดเส้นคั่นระหว่างคอลัมน์ด้วย column-rule column-rule นั้นประกอบด้วยความกว้าง รูปแบบเส้น และสีเส้นซึ่งเราสามารถแยกตั้งค่าก็ได้ เช่นใช้ column-rule-color สำหรับกำหนดสี column-rule-width สำหรับกำหนดความกว้างเส้น หรือใช้ column-rule-style เพื่อกำหนดรูปแบบเส้น แต่เชื่อเถอะว่าพวกเรานั้นขี้เกียจใช้กฎเดียวคือ column-rule แล้วตั้งมันไปทุกอย่างดีสุด

1.columns {
2  column-count: 3;
3  column-rule: 2px solid #ddd;
4}

จัดการช่องไปด้วย column-gap

ตอนนี้ช่องไฟของเราดูกันดารมาก เราสามารถใช้ column-gap เพื่อเพิ่มช่องว่างระหว่างคอมลัมน์ได้ แต่ระวังไว้นิดนึงนะยังมีหลายเว็บเบราว์เซอร์ ที่ไม่สนับสนุนความสามารถนี้ ฉะนั้นใส่ vendor prefix เข้าไปด้วยเพื่อความปลอดภัยของชีวิตและทรัพย์สิน

1.columns {
2  column-count: 3;
3  column-rule: 2px solid #ddd;
4  column-gap: 1.5rem;
5  -webkit-column-gap: 1.5rem;
6  -moz-column-gap: 1.5rem;
7}

Multi Columns กับการแสดงผลแบบ Responsive

เราจะทดลองกันซักหน่อยว่าการแบ่งคอลัมน์ของเราแสดงผลอย่างไรเมื่อหน้าจอเปลี่ยนเป็นขนาดเล็ก

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

1.columns {
2  column-count: 3;
3  column-rule: 2px solid #ddd;
4  column-gap: 1.5rem;
5  -webkit-column-gap: 1.5rem;
6  -moz-column-gap: 1.5rem;
7  column-width: 200px;
8}

ทดสอบผลด้วยลดขนาดหน้าจออีกครั้งตอนนี้คอลัมน์เราจะเหลือเพียงหนึ่งและแสดงผลออกมาอย่างสวยงามเลยหละ

สำหรับหน้าจอขนาดกลางจะถูกแสดงผลเป็นสองคอลัมน์ดังนี้

รวม column-width กับ column-count เข้าด้วยกันผ่าน columns

เพราะโปรแกรมเมอร์นั้นขี้เกียจเราจึงอยากรวมการเขียน column-width และ column-count เข้าไว้ด้วยกันผ่าน columns

1columns: 200px 3;
2column-rule: 2px solid #ddd;
3column-gap: 1.5rem;
4-webkit-column-gap: 1.5rem;
5-moz-column-gap: 1.5rem;

สรุป

Multi Columns เป็นรูปแบบการจัดเลย์เอาท์ยุคใหม่ที่ช่วยอำนวยความสะดวยให้กับเราโดยเฉพาะเว็บประเภทข่าวหรือแมกกาซีน นอกเหนือจาก CSS Multi Columns แล้ว CSS Flexbox และ CSS Grid Layout ก็เป็นรูปแบบการจัดเว็บสมัยใหม่เช่นกัน โดยผู้อ่านที่สนใจสามารถอ่านเนื้อหา ในส่วนนี้ได้จากเว็บไซต์ของเราเช่นกันครับ