หลายปีที่ผ่านมา CSS floats เป็นส่วนประกอบที่จำเป็นสำหรับการสร้างเค้าโครงเว็บไซต์ หากการออกแบบของคุณเรียกร้องให้มีหลายคอลัมน์ คุณหันไปลอยตัว ปัญหาเกี่ยวกับวิธีนี้คือแม้จะมีความเฉลียวฉลาดเหลือเชื่อที่นักออกแบบเว็บ / นักพัฒนาซอฟต์แวร์ได้แสดงให้เห็นในการสร้างเค้าโครงเว็บไซต์ที่ซับซ้อน CSS floats ก็ไม่เคยมีความหมายอย่างแท้จริงที่จะใช้ในลักษณะนี้
ในขณะที่ลอยตัวและตำแหน่ง CSS แน่ใจว่าจะมีสถานที่ในการออกแบบเว็บเป็นเวลาหลายปีมาแล้วเทคนิคการวางผังใหม่รวมทั้ง CSS Grid และ Flexbox ช่วยให้นักออกแบบเว็บสามารถสร้างรูปแบบไซต์ได้ใหม่ อีกเทคนิคการจัดวางใหม่ที่แสดงถึงศักยภาพเป็น CSS หลายคอลัมน์
CSS Columns อยู่ห่างกันเพียงไม่กี่ปี แต่ขาดการสนับสนุนในเบราว์เซอร์รุ่นเก่า (ส่วนใหญ่เป็นเวอร์ชันเก่ากว่าของ Internet Explorer) ทำให้ผู้เชี่ยวชาญด้านเว็บจำนวนมากใช้สไตล์เหล่านี้ในการผลิต
เมื่อสิ้นสุดการสนับสนุน IE รุ่นเก่าเหล่านักออกแบบเว็บบางรายกำลังทดลองใช้ตัวเลือกรูปแบบ CSS ใหม่คอลัมน์ CSS รวมอยู่ด้วยและพบว่าพวกเขามีการควบคุมด้วยวิธีการใหม่ ๆ เหล่านี้มากกว่าที่ใช้กับ floats
ข้อมูลพื้นฐานเกี่ยวกับคอลัมน์ CSS
ตามที่ชื่อว่า CSS หลายคอลัมน์ (หรือที่เรียกว่าเค้าโครงหลายคอลัมน์ CSS3) ช่วยให้คุณสามารถแบ่งเนื้อหาลงในคอลัมน์ที่กำหนดได้ คุณสมบัติ CSS ขั้นพื้นฐานที่สุดที่คุณจะใช้ ได้แก่
- คอลัมน์นับ
- คอลัมน์ช่องว่าง
สำหรับคอลัมน์นับคุณระบุจำนวนคอลัมน์ที่คุณต้องการ ช่องว่างคอลัมน์จะเป็นรางหรือระยะห่างระหว่างคอลัมน์เหล่านั้น เบราเซอร์จะใช้ค่าเหล่านี้และแบ่งเนื้อหาให้เท่า ๆ กันตามจำนวนคอลัมน์ที่คุณระบุ
ตัวอย่างทั่วไปของ CSS หลายคอลัมน์ในทางปฏิบัติคือการแบ่งบล็อกเนื้อหาข้อความออกเป็นหลายคอลัมน์คล้ายคลึงกับสิ่งที่คุณเห็นในบทความในหนังสือพิมพ์ สมมติว่าคุณมีมาร์กอัป HTML ต่อไปนี้ (โปรดทราบว่าเพื่อวัตถุประสงค์เช่นฉันเพียงวางจุดเริ่มต้นของย่อหน้าหนึ่งในขณะที่ในทางปฏิบัติอาจมีหลายย่อหน้าของเนื้อหาในมาร์กอัปนี้):
หัวข้อบทความของคุณ
ลองนึกภาพวรรคส์ของข้อความที่นี่ ...
ถ้าคุณเขียนรูปแบบ CSS เหล่านี้แล้ว:
.content {-moz-column-count: 3; -webkit-column-count: 3; คอลัมน์นับ: 3; -moz-column-gap: 30px; - เว็บบล็อกช่องว่าง: 30px; ช่องว่างระหว่างคอลัมน์: 30px; }กฎ CSS นี้จะแบ่งหมวด "เนื้อหา" ออกเป็น 3 คอลัมน์ที่เท่ากันโดยมีช่องว่างระหว่างพิกเซล 30 พิกเซล หากคุณต้องการสองคอลัมน์แทนที่จะเป็น 3 คุณก็จะเปลี่ยนค่าดังกล่าวและเบราว์เซอร์จะคำนวณความกว้างใหม่ของคอลัมน์เหล่านั้นเพื่อแบ่งเนื้อหาอย่างเท่าเทียมกัน ขอให้สังเกตว่าเราใช้คุณสมบัติ prefixed ของผู้ขายก่อนตามด้วยการประกาศที่ไม่ใช่ prefixed
เป็นเรื่องง่ายเช่นนี้การใช้ในลักษณะนี้เป็นที่น่าสงสัยสำหรับการใช้งานเว็บไซต์ ใช่คุณสามารถแยกกลุ่มเนื้อหาออกเป็นหลายคอลัมน์ได้ แต่อาจไม่ใช่ประสบการณ์การอ่านที่ดีที่สุดสำหรับเว็บโดยเฉพาะอย่างยิ่งหากความสูงของคอลัมน์เหล่านี้ต่ำกว่า "พับ" ของหน้าจอ
ผู้อ่านจะต้องเลื่อนขึ้นและลงเพื่ออ่านเนื้อหาทั้งหมด อย่างไรก็ตามคอลัมน์หลักของคอลัมน์ CSS นั้นดูง่ายเหมือนที่คุณเห็นที่นี่และสามารถใช้ในการทำมากกว่าเพียงแค่แยกเนื้อหาของย่อหน้าบางส่วนเท่านั้น แต่สามารถใช้สำหรับการจัดวางได้
เค้าโครงด้วยคอลัมน์ CSS
สมมติว่าคุณมีเว็บเพจที่มีเนื้อหาซึ่งมี 3 คอลัมน์เนื้อหา นี่คือเค้าโครงเว็บไซต์โดยทั่วไปและเพื่อให้ได้ 3 คอลัมน์ดังกล่าวคุณจะลอยส่วนต่างๆที่มีอยู่โดยทั่วไปด้วย CSS หลายคอลัมน์ง่ายกว่าเดิมมาก
นี่คือตัวอย่าง HTML บางส่วน:
ข่าวล่าสุด
เนื้อหาจะไปที่นี่ ...
เนื้อหาจะปรากฏที่นี่ < p>
CSS เพื่อสร้างคอลัมน์หลายคอลัมน์นี้ขึ้นต้นด้วยสิ่งที่คุณเห็นก่อนหน้านี้:
.content {-moz-column-count: 3; -webkit-column-count: 3; คอลัมน์นับ: 3; -moz-column-gap: 30px; - เว็บบล็อกช่องว่าง: 30px; ช่องว่างระหว่างคอลัมน์: 30px; }ตอนนี้ความท้าทายที่นี่คือตั้งแต่เบราว์เซอร์ต้องการแยกเนื้อหานี้อย่างเท่าเทียมกันดังนั้นหากความยาวเนื้อหาของหน่วยงานเหล่านี้ต่างกันเบราว์เซอร์ดังกล่าวจะแบ่งเนื้อหาของแต่ละแผนกออกเป็นส่วน ๆ โดยเพิ่มจุดเริ่มต้นของส่วนนี้ลงในคอลัมน์หนึ่งและ (คุณสามารถดูได้โดยใช้รหัสนี้เพื่อใช้การทดสอบและเพิ่มความยาวของเนื้อหาภายในแต่ละส่วน)!
นั่นไม่ใช่สิ่งที่คุณต้องการ คุณต้องการให้แต่ละหน่วยงานเหล่านี้สร้างคอลัมน์ที่แตกต่างออกไปและไม่ว่าเนื้อหาของแต่ละแผนกจะมีขนาดใหญ่หรือน้อยคุณก็ไม่จำเป็นต้องแยกออก คุณสามารถทำได้โดยการเพิ่ม CSS บรรทัดนี้เพิ่มเติม:
.content div {display: inline-block; }การดำเนินการนี้จะบังคับให้แผนกต่างๆที่อยู่ภายใน "เนื้อหา" ยังคงเหมือนเดิมแม้ว่าเบราว์เซอร์จะแบ่งข้อมูลออกเป็นหลายคอลัมน์ ยิ่งไปกว่านั้นเนื่องจากเราไม่ได้ให้ความกว้างคงที่คอลัมน์เหล่านี้จะปรับขนาดโดยอัตโนมัติเมื่อเบราว์เซอร์ปรับขนาดทำให้โปรแกรมประยุกต์เหมาะสำหรับ เว็บไซต์ที่ตอบสนอง ต่อ ด้วยสไตล์แบบ "บล็อกไลน์แบบอินไลน์" ในแต่ละแผนก 3 ส่วนจะเป็นคอลัมน์เนื้อหาที่แตกต่างกัน
ใช้ความกว้างของคอลัมน์
มีคุณสมบัติอื่นนอกเหนือจาก "คอลัมน์นับ" ที่คุณสามารถใช้และขึ้นอยู่กับความต้องการของเค้าโครงของคุณอาจเป็นทางเลือกที่ดีกว่าสำหรับไซต์ของคุณ นี่คือ "ความกว้างของคอลัมน์" การใช้มาร์กอัป HTML เดียวกันดังที่แสดงไว้ก่อนหน้านี้เราสามารถทำสิ่งนี้ได้ด้วย CSS ของเรา:
.content {-moz-column-width: 500px; - ความกว้างของหน้าเว็บ: 500px; ความกว้างของคอลัมน์: 500px; -moz-column-gap: 30px; - เว็บบล็อกช่องว่าง: 30px; ช่องว่างระหว่างคอลัมน์: 30px; }. div เนื้อหา {display: inline-block; }วิธีนี้ใช้งานได้ว่าเบราว์เซอร์ใช้ "คอลัมน์กว้าง" นี้เป็นค่าสูงสุดของคอลัมน์นั้น ดังนั้นถ้าหน้าต่างเบราว์เซอร์มีขนาดไม่ถึง 500 พิกเซลทั้ง 3 หน่วยจะปรากฏในคอลัมน์เดียวหนึ่งในท็อปส์ซูของอีกส่วนหนึ่ง นี่คือรูปแบบทั่วไปที่ใช้สำหรับการออกแบบหน้าจอมือถือ / เล็ก ๆ
เมื่อความกว้างของเบราว์เซอร์เพิ่มขึ้นเพื่อให้พอดีกับ 2 คอลัมน์พร้อมกับช่องว่างของคอลัมน์ที่ระบุเบราว์เซอร์จะไปจากเค้าโครงคอลัมน์หนึ่งคอลัมน์ไปยังคอลัมน์สองคอลัมน์โดยอัตโนมัติ เพิ่มความกว้างของหน้าจอและในที่สุดคุณจะได้รับการออกแบบคอลัมน์ 3 คอลัมน์โดยแต่ละแผนกของเราจะแสดงในคอลัมน์ของตนเอง 3 แห่ง อีกครั้งนี่เป็นวิธีที่ดีในการตอบสนองรูปแบบที่ เป็นมิตร ซึ่งมี หลายอุปกรณ์ และคุณไม่จำเป็นต้องใช้ ข้อความค้นหาสื่อ เพื่อเปลี่ยนรูปแบบการจัดวาง!
คุณสมบัติคอลัมน์อื่น ๆ
นอกเหนือจากคุณสมบัติที่กล่าวถึงในที่นี้แล้วยังมีคุณสมบัติสำหรับ "กฎคอลัมน์" ได้แก่ สีลักษณะและความกว้างที่ช่วยให้คุณสามารถสร้างกฎระหว่างคอลัมน์ได้ เหล่านี้จะใช้แทนเส้นขอบถ้าคุณต้องการมีเส้นบางส่วนแยกคอลัมน์ของคุณ
เวลาทดลอง
ปัจจุบัน CSS เค้าโครงหลายคอลัมน์ได้รับการสนับสนุนเป็นอย่างดี ด้วยคำนำหน้าผู้ใช้เว็บกว่า 94% จะสามารถเห็นลักษณะเหล่านี้ได้และกลุ่มที่ไม่ได้รับการสนับสนุนนั้นจะเป็น Internet Explorer ที่เก่ากว่านี้ซึ่งคุณอาจไม่สามารถสนับสนุนได้อีกต่อไป
ด้วยการสนับสนุนในระดับนี้ในขณะนี้ไม่มีเหตุผลที่จะไม่เริ่มทำการทดลองกับคอลัมน์ CSS และปรับใช้สไตล์เหล่านี้ในเว็บไซต์ที่พร้อมใช้งานสำหรับการผลิต คุณสามารถเริ่มต้นการทดสอบของคุณโดยใช้ HTML และ CSS ที่นำเสนอในบทความนี้และเล่นรอบ ๆ ด้วยค่าที่ต่างกันเพื่อดูว่าอะไรจะดีที่สุดสำหรับรูปแบบของเว็บไซต์ของคุณ