การจัดวางแบบก่ออิฐ: แนวทาง CSS และ JS
สร้างกริดแบบก่ออิฐสไตล์ Pinterest ด้วย CSS column-count และกลยุทธ์สำรองด้วย JavaScript
การจัดวางแบบก่ออิฐ: แนวทาง CSS และ JS เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
การจัดวางแบบก่ออิฐคืออะไร
การจัดวางแบบก่ออิฐจะวางรายการลงในคอลัมน์ โดยแต่ละรายการเติมพื้นที่แนวตั้งถัดไปที่ว่างอยู่ คล้ายกับ Pinterest รายการต่าง ๆ มีความกว้างคอลัมน์เท่ากัน แต่มีความสูงแตกต่างกัน ผลลัพธ์คือกริดที่แน่นและมีความเคลื่อนไหวทางสายตา โดยไม่มีพื้นที่ว่างสีขาวระหว่างแถว
การจัดวางแบบก่ออิฐด้วย CSS Grid (อยู่ระหว่างการทดลอง)
โครมและไฟร์ฟ็อกซ์ที่เปิดใช้แฟล็กทดลองรองรับ grid-template-rows: masonry รายการจะถูกวางในคอลัมน์ แต่แถวจะปรับขนาดตามความสูงของเนื้อหา ทำให้รายการที่มีความสูงต่างกันเรียงชิดกันโดยไม่มีช่องว่าง นี่คือวิธีแก้ปัญหาแบบเนทีฟที่คาดว่าจะใช้ในอนาคต
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>แนวทางใช้คอลัมน์ของ CSS
คอลัมน์ของ CSS สร้างเค้าโครงคล้ายการจัดวางแบบก่ออิฐได้ด้วย columns: 3; column-gap: 1rem รายการจะไหลจากบนลงล่างภายในแต่ละคอลัมน์โดยอัตโนมัติ ข้อจำกัดคือรายการจะเรียงตามคอลัมน์ (ด้านบนของคอลัมน์ที่ 1 ด้านบนของคอลัมน์ที่ 2...) ไม่ใช่ตามแถว ซึ่งส่งผลต่อลำดับการอ่านและการเข้าถึง
การป้องกันการแบ่งคอลัมน์
ป้องกันไม่ให้รายการถูกแบ่งข้ามคอลัมน์ด้วย break-inside: avoid ในแต่ละรายการ หากไม่ทำเช่นนี้ การ์ดที่สูงอาจถูกแบ่งเป็นสองคอลัมน์ ทำให้เนื้อหาขาดออกเป็นสองส่วน ควรเพิ่มค่านี้เสมอเมื่อใช้คอลัมน์ของ CSS กับเนื้อหาลักษณะการ์ด
ไลบรารีการจัดวางแบบก่ออิฐด้วย JavaScript
Masonry.js (โดยเดวิด DeSandro) จะจัดตำแหน่งรายการที่วางแบบสัมบูรณ์ใหม่ โดยคำนวณความสูงของคอลัมน์และวางแต่ละรายการลงในคอลัมน์ที่สั้นที่สุด Isotope เพิ่มความสามารถด้านการเรียงลำดับและการกรอง ทั้งสองแบบต้องใช้ JavaScript เพื่อคำนวณและใช้ตำแหน่ง
การผสาน CSS Grid กับ JS
แนวทางน้ำหนักเบาคือกำหนดกริดที่มีคอลัมน์คงที่และแถวสูง 1px จากนั้นใช้ JS ตั้งค่า grid-row-end: span N ให้แต่ละรายการตามความสูงของเนื้อหา / ความสูงของแถว รายการจะยังคงจัดแนวตามแถวของกริด พร้อมรองรับความสูงที่แตกต่างกัน
การคำนวณใหม่ด้วย ResizeObserver
ตำแหน่งของการจัดวางแบบก่ออิฐจะล้าสมัยเมื่อขนาดหน้าต่างเปลี่ยนหรือเมื่อรูปภาพโหลดเสร็จ ใช้ ResizeObserver เพื่อตรวจจับการเปลี่ยนแปลงขนาดและเรียกการคำนวณใหม่ ควรหน่วงการคำนวณใหม่เพื่อหลีกเลี่ยงการประมวลผลมากเกินไประหว่างเหตุการณ์ปรับขนาดที่เกิดขึ้นอย่างรวดเร็ว
การโหลดรูปภาพและความเสถียรของเค้าโครง
รูปภาพที่ไม่ทราบความสูงจะทำให้การจัดวางแบบก่ออิฐต้องคำนวณใหม่หลังจากโหลดเสร็จ กำหนดแอตทริบิวต์ความกว้างและความสูงอย่างชัดเจนให้รูปภาพทั้งหมด เพื่อให้เบราว์เซอร์กันพื้นที่ไว้ก่อนโหลด วิธีนี้ป้องกันการเปลี่ยนตำแหน่งและลดจำนวนรอบการคำนวณใหม่
การเลื่อนแบบไม่สิ้นสุดกับการจัดวางแบบก่ออิฐ
การเพิ่มรายการต่อท้ายเค้าโครงแบบก่ออิฐจำเป็นต้องคำนวณใหม่เฉพาะคอลัมน์ที่ได้รับผลกระทบ (รายการใหม่) ไม่ใช่ทั้งกริด ไลบรารีอย่าง Masonry.js รองรับภาพเคลื่อนไหวของรายการที่เพิ่มและการจัดวางแบบเพิ่มทีละส่วน โดยไม่ต้องจัดวางใหม่ทั้งหมดทุกครั้งที่เพิ่มชุดรายการใหม่
ข้อควรพิจารณาด้านการเข้าถึง
ลำดับการจัดวางแบบก่ออิฐที่มองเห็นจะแตกต่างจากลำดับใน DOM เมื่อใช้เค้าโครงที่จัดตำแหน่งด้วย JavaScript ตรวจสอบให้แน่ใจว่าลำดับการกดแป้นแท็บเป็นไปตามลำดับใน DOM (ลำดับการอ่านที่สมเหตุสมผล) ไม่ใช่ตำแหน่งที่มองเห็น เพิ่ม tabindex อย่างระมัดระวัง หรืออาศัยลำดับ DOM ตามธรรมชาติสำหรับการนำทางด้วยแป้นพิมพ์
ข้อแลกเปลี่ยนของการจัดวางแบบก่ออิฐด้วย CSS ล้วน
คอลัมน์ของ CSS เรียบง่ายและไม่ต้องใช้ JS แต่ลำดับการอ่านจะเรียงตามคอลัมน์ ไม่ใช่ตามแถว และไม่มีการกรองหรือการเรียงลำดับ การจัดวางแบบก่ออิฐด้วยกริดยังไม่รองรับสำหรับการใช้งานจริง ส่วนการจัดวางแบบก่ออิฐด้วย JS มีความสามารถครบถ้วน แต่เพิ่มขนาดของโค้ดและทำให้การแสดงผลล่าช้า เนื่องจากต้องคำนวณตำแหน่งหลังจากเนื้อหาโหลดเสร็จ
ตรวจสอบความรู้
คุณสมบัติ CSS ใดป้องกันไม่ให้การ์ดถูกแบ่งข้ามคอลัมน์ของ CSS สองคอลัมน์
สรุป
การจัดวางแบบก่ออิฐทำได้ด้วยคอลัมน์ของ CSS (เรียบง่ายแต่เรียงตามคอลัมน์), grid-template-rows: masonry ที่อยู่ระหว่างการทดลอง (แนวทางสำหรับอนาคต) หรือไลบรารี JavaScript อย่าง Masonry.js (มีความสามารถครบถ้วนพร้อมการเรียงลำดับและการกรอง) แต่ละแนวทางมีข้อแลกเปลี่ยนระหว่างความเรียบง่าย การเข้าถึง และความสามารถ
เรียนรู้ CSS ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “การจัดวางแบบก่ออิฐ: แนวทาง CSS และ JS” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดวางแบบก่ออิฐ: แนวทาง CSS และ JS” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดวางแบบก่ออิฐ: แนวทาง CSS และ JS”
สร้างกริดแบบก่ออิฐสไตล์ Pinterest ด้วย CSS column-count และกลยุทธ์สำรองด้วย JavaScript คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดวางแบบก่ออิฐ: แนวทาง CSS และ JS” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การจัดวางส่วนท้ายและแถบด้านข้างแบบติดตำแหน่ง
- การจัดวางแบบจอกศักดิ์สิทธิ์ด้วย Grid
- การจัดวางแบบก่ออิฐ: แนวทาง CSS และ JS
- การออกแบบภายใน: การกำหนดขนาดตามเนื้อหา