นั่นไม่ใช่เชิงโวหาร: ฉันสนใจที่จะค้นหากรณีการใช้งานที่ยอดเยี่ยมสำหรับการจัดวาง CSS แบบหลายคอลัมน์
คำตอบดูเหมือนตรงไปตรงมา ใช้คอลัมน์เมื่อคุณต้องการแบ่งเนื้อหาออกเป็นคอลัมน์ใช่ไหม โดยทั่วไปแล้ว นี่คือตัวอย่างประเภทที่คุณจะพบในบทความที่แสดงให้เห็นว่าเค้าโครง CSS หลายคอลัมน์ทำงานอย่างไร รวมถึงของเราด้วย ปูม:
ได้เลย แต่นี่เป็นกรณีการใช้งานจริงหรือไม่? อืมมมม. หากข้อความค่อนข้างสั้นก็อาจเป็นเรื่องที่ดี นั่นคือวิธีที่ฉันขายให้ตัวเองเมื่อออกแบบเว็บไซต์ใหม่ a ไม่กี่ปีก่อน. มันไม่ใช่อย่างนั้นในวันนี้ แต่นี่คือสิ่งที่ดูเหมือนในตอนนั้น:
แต่บทความแบบยาวทั้งหมดแบ่งออกเป็นคอลัมน์? ฉันชอบในหนังสือพิมพ์ แต่ลังเลที่จะเลื่อนหน้าเว็บลงเพื่ออ่านคอลัมน์เดียว เพียงเลื่อนกลับขึ้นไปทำใหม่อีกครั้ง
ฉันคิดว่าเราสามารถใช้มันเพื่อวางสององค์ประกอบไว้ข้างกัน แต่ flexbox นั้นเหมาะสมกว่าสำหรับสิ่งนั้น นอกจากนี้ ข้อจำกัดยังป้องกันไม่ให้เราเลือกคอลัมน์เพื่อกำหนดขนาดทีละรายการ คอลัมน์ต้องมีความกว้างเท่ากัน
สิ่งหนึ่งที่คอลัมน์สำหรับพวกเขาคือเป็นวิธีการจัดวาง CSS เดียวที่ เศษ เนื้อหา. (นั่นคือ เว้นแต่เราจะนับ CSS ภูมิภาค… เกิดอะไรขึ้นกับพวกนั้นกันแน่?!) ดังนั้น ถ้าคุณต้องการแบ่งย่อหน้าออกเป็นคอลัมน์
เมื่อใดที่คุณอาจต้องแบ่งกลุ่มเนื้อหาอย่างต่อเนื่องเป็นคอลัมน์ ฉันจำได้ว่าต้องทำอย่างนั้นเมื่อฉันมีรายการสิ่งของที่ไม่ได้เรียงลำดับขนาดใหญ่ ฉันชอบวิธีที่รายการทำให้เนื้อหาง่ายต่อการสแกน แต่รายการยาวๆ สามารถทำให้ด้านหนึ่งของหน้าดูหนักมากได้ ตัวอย่างเช่น เรากำลังแสดงรายการแท็กโพสต์ทั้งหมดสำหรับ CSS-Tricks ในกลุ่มตัวอักษร เลย์เอาต์แบบหลายคอลัมน์ทำงานได้ดีสำหรับสิ่งนั้น:
ไปข้างหน้าและลองปรับขนาดความกว้างของวิวพอร์ต มีการกำหนดสามคอลัมน์ แต่จำนวนจะเปลี่ยนตามจำนวนพื้นที่ว่างที่มีอยู่ ต้องรักความดีที่ตอบสนองทั้งหมดโดยไม่ต้องใช้การสืบค้นสื่อ!
ฉันกำลังทำงานในการสาธิตสำหรับ :left pseudo-class และไปถึง columns เพราะเป็นวิธีที่ยอดเยี่ยมในการแยกส่วนต่างๆ สำหรับการพิมพ์การสาธิต ฉันเดาว่ามีกรณีการใช้งานอื่น และในขณะที่ทำการสาธิต ฉันรู้ว่าสามารถใช้เลย์เอาต์แบบหลายคอลัมน์เพื่อสร้างตารางการก่ออิฐของสิ่งของได้ เช่น แกลเลอรีรูปภาพ:
แต่อะไรอีก? เราจำกัดเฉพาะย่อหน้าสั้น รายการยาว และกริดแบบไหลลื่นหรือไม่
