การจัดวาง CSS Grid แบบ Masonry: สร้างเลย์เอาต์สไตล์ Pinterest

เลย์เอาต์แบบ Masonry ซึ่งเป็นที่นิยมจากแพลตฟอร์มอย่าง Pinterest นำเสนอวิธีการแสดงเนื้อหาที่มีขนาดแตกต่างกันได้อย่างสวยงามและประหยัดพื้นที่ แต่เดิมการสร้างเลย์เอาต์ลักษณะนี้จำเป็นต้องใช้ไลบรารี JavaScript อย่างไรก็ตาม ด้วยการมาถึงของ CSS Grid และโดยเฉพาะคุณสมบัติ grid-template-rows: masonry (ซึ่งยังอยู่ในช่วงทดลองแต่พร้อมใช้งานในเบราว์เซอร์อย่าง Firefox) ทำให้การสร้างเลย์เอาต์แบบ Masonry กลายเป็นเรื่องที่ง่ายและมีประสิทธิภาพมากขึ้นอย่างมาก

ทำความเข้าใจอัลกอริทึมของเลย์เอาต์ Masonry

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

1. คำนวณความกว้างของคอลัมน์: กำหนดจำนวนคอลัมน์ที่เหมาะสมที่สุดตามความกว้างของหน้าจอที่มีอยู่และความกว้างขั้นต่ำของคอลัมน์ที่ต้องการ คีย์เวิร์ด auto-fit หรือ auto-fill ของ CSS Grid ภายใน grid-template-columns มีความสำคัญอย่างยิ่งในส่วนนี้
2. การวางตำแหน่งไอเท็ม: วนลูปผ่านไอเท็มต่างๆ โดยวางแต่ละไอเท็มลงในคอลัมน์ที่สั้นที่สุด เพื่อให้แน่ใจว่าเนื้อหาจะกระจายตัวอย่างค่อนข้างสม่ำเสมอในทุกคอลัมน์
3. การปรับเปลี่ยนแบบไดนามิก: เมื่อขนาดหน้าต่างเบราว์เซอร์เปลี่ยนแปลง จะมีการคำนวณความกว้างของคอลัมน์ใหม่และอาจมีการกระจายไอเท็มใหม่เพื่อรักษาระยะห่างและความสมดุลทางสายตาที่เหมาะสมที่สุด

แม้ว่า CSS Grid ที่มี grid-template-rows: masonry จะจัดการขั้นตอนที่ 2 และ 3 โดยอัตโนมัติ แต่การทำความเข้าใจอัลกอริทึมพื้นฐานจะช่วยในการปรับปรุงเนื้อหาและการออกแบบของคุณให้เหมาะสมเพื่อประสบการณ์ผู้ใช้ที่ดีที่สุด

การนำเลย์เอาต์ Masonry ไปใช้ด้วย CSS Grid

1. โครงสร้าง HTML พื้นฐาน

เริ่มต้นด้วยโครงสร้าง HTML ที่เรียบง่าย โดยมีอิลิเมนต์คอนเทนเนอร์สำหรับเก็บไอเท็มทั้งหมดที่จะถูกจัดเรียงในเลย์เอาต์แบบ Masonry

            <div class="masonry-container">
  <div class="masonry-item"><img src="image1.jpg" alt="Image 1"></div>
  <div class="masonry-item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="masonry-item"><img src="image3.jpg" alt="Image 3"></div>
  <!-- More items -->
</div>
            

              
                Copy
              
            
          

2. การกำหนดค่า CSS Grid

ใช้กฎ CSS ต่อไปนี้กับอิลิเมนต์คอนเทนเนอร์:

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 10px;
  grid-template-rows: masonry;
}

.masonry-item {
  break-inside: avoid;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}
            

              
                Copy
              
            
          

มาดูรายละเอียดของ CSS กัน:

• display: grid;: เปิดใช้งานเลย์เอาต์ CSS Grid สำหรับคอนเทนเนอร์
• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));: นี่คือกุญแจสำคัญในการสร้างคอลัมน์ที่ตอบสนอง (responsive)
• repeat(auto-fit, ...): สร้างคอลัมน์ให้ได้มากที่สุดเท่าที่จะพอดีกับคอนเทนเนอร์โดยอัตโนมัติ เมื่อคอนเทนเนอร์ว่างเปล่า คอลัมน์จะยุบตัวลง
• repeat(auto-fill, ...): สร้างคอลัมน์ให้ได้มากที่สุดเท่าที่จะพอดีกับคอนเทนเนอร์โดยอัตโนมัติ แม้กระทั่งเพิ่มคอลัมน์ว่างเมื่อมีไอเท็มไม่เพียงพอที่จะเติม
• minmax(250px, 1fr): แต่ละคอลัมน์จะมีความกว้างอย่างน้อย 250px หากมีพื้นที่เหลือ คอลัมน์จะขยายเพื่อเติมเต็มพื้นที่ว่างตามสัดส่วน ปรับค่า 250px ตามความต้องการในการออกแบบของคุณ
• การใช้ auto-fill แทน auto-fit อาจมีประโยชน์หากคุณต้องการให้กริดแสดงคอลัมน์ว่างเมื่อมีไอเท็มไม่เพียงพอที่จะเติมพื้นที่ว่าง อย่างไรก็ตาม ในเลย์เอาต์แบบ Masonry ส่วนใหญ่ มักนิยมใช้ auto-fit มากกว่า
• grid-gap: 10px;: เพิ่มช่องว่างขนาด 10px ระหว่างไอเท็มในกริด
• grid-template-rows: masonry;: นี่คือคุณสมบัติสำคัญที่เปิดใช้งานอัลกอริทึมเลย์เอาต์แบบ Masonry มันบอกให้กริดจัดเรียงไอเท็มในลักษณะที่ลดพื้นที่ว่างในแนวตั้งให้เหลือน้อยที่สุด ปัจจุบันยังอยู่ในช่วงทดลองและอาจต้องใช้ vendor prefixes ในบางเบราว์เซอร์ หรือเปิดใช้งานฟีเจอร์แพลตฟอร์มเว็บทดลอง ณ เดือนพฤศจิกายน 2024 คุณสมบัตินี้รองรับใน Firefox โดยต้องเปิดใช้งานผ่าน flag และกำลังอยู่ในการพิจารณาเพื่อกำหนดเป็นมาตรฐานในเบราว์เซอร์ต่างๆ
• break-inside: avoid;: ป้องกันไม่ให้ไอเท็มถูกแบ่งคร่อมคอลัมน์เมื่อทำการพิมพ์หรือใช้เลย์เอาต์หลายคอลัมน์ ซึ่งสำคัญต่อการรักษาไอเท็มให้อยู่ด้วยกัน
• .masonry-item img: ทำให้แน่ใจว่ารูปภาพภายในไอเท็มปรับขนาดได้อย่างเหมาะสมเพื่อให้พอดีกับคอนเทนเนอร์

3. การจัดการรูปภาพที่มีอัตราส่วนแตกต่างกัน

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

            .masonry-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* or contain, fill, scale-down */
}
            

              
                Copy
              
            
          

• object-fit: cover;: ครอปรูปภาพเพื่อเติมเต็มคอนเทนเนอร์ ซึ่งอาจทำให้บางส่วนของรูปภาพหายไป แต่จะทำให้แน่ใจว่ารูปภาพครอบคลุมพื้นที่ทั้งหมด
• object-fit: contain;: ปรับขนาดรูปภาพให้พอดีกับคอนเทนเนอร์ โดยรักษาสัดส่วนภาพไว้ ซึ่งอาจทำให้เกิดพื้นที่ว่างภายในไอเท็ม
• object-fit: fill;: ยืดรูปภาพเพื่อเติมเต็มคอนเทนเนอร์ ซึ่งอาจทำให้ภาพบิดเบี้ยว
• object-fit: scale-down;: ปรับขนาดรูปภาพลงเป็น contain หากใหญ่กว่าคอนเทนเนอร์ มิฉะนั้นจะแสดงตามขนาดดั้งเดิม

เลือกค่า object-fit ที่เหมาะสมกับเนื้อหาและเป้าหมายการออกแบบของคุณมากที่สุด

การใช้ Polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับ

เนื่องจาก grid-template-rows: masonry ยังอยู่ในช่วงทดลอง จึงจำเป็นต้องมีทางเลือกสำรอง (fallback) สำหรับเบราว์เซอร์ที่ยังไม่รองรับ นี่คือจุดที่ไลบรารี JavaScript เข้ามามีบทบาท ตัวเลือกยอดนิยม ได้แก่:

• Masonry.js: ไลบรารี JavaScript ที่ใช้กันอย่างแพร่หลายและมีเอกสารประกอบที่ดี ซึ่งออกแบบมาโดยเฉพาะสำหรับการสร้างเลย์เอาต์แบบ Masonry
• Isotope: ไลบรารีที่ล้ำหน้ากว่าซึ่งมีฟีเจอร์การกรอง การจัดเรียง และอื่นๆ นอกเหนือจากเลย์เอาต์แบบ Masonry

นี่คือตัวอย่างพื้นฐานของวิธีการผสานรวม Masonry.js:

1. ติดตั้ง Masonry.js: เพิ่มไลบรารี Masonry.js ไปยังไฟล์ HTML ของคุณ

            <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
            

              
                Copy
              
            
          

2. เริ่มต้นใช้งาน Masonry: ใช้ JavaScript เพื่อเริ่มต้นเลย์เอาต์ Masonry หลังจากที่ DOM โหลดเสร็จแล้ว

            <script>
  window.onload = function() {
    var elem = document.querySelector('.masonry-container');
    var msnry = new Masonry( elem, {
      // options
      itemSelector: '.masonry-item',
      columnWidth: 250
    });
  };
</script>
            

              
                Copy
              
            
          

โค้ดนี้จะเลือกอิลิเมนต์ .masonry-container และเริ่มต้น Masonry โดยระบุ item selector และความกว้างของคอลัมน์ ปรับตัวเลือก columnWidth ให้ตรงกับค่า minmax ที่ใช้ใน CSS ของคุณ

การโหลดแบบมีเงื่อนไข

เพื่อให้แน่ใจว่า Masonry.js จะถูกโหลดเมื่อจำเป็นเท่านั้น คุณสามารถใช้ feature detection เพื่อตรวจสอบว่าเบราว์เซอร์รองรับ grid-template-rows: masonry หรือไม่

            <script>
  if (!('gridTemplateRows' in document.body.style)) {
    // Load Masonry.js if CSS Grid masonry is not supported
    var script = document.createElement('script');
    script.src = 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js';
    script.onload = function() {
      var elem = document.querySelector('.masonry-container');
      var msnry = new Masonry( elem, {
        itemSelector: '.masonry-item',
        columnWidth: 250
      });
    };
    document.head.appendChild(script);
  } else {
      //CSS Grid masonry is supported
      console.log("CSS Grid Masonry is supported!");
  }
</script>
            

              
                Copy
              
            
          

การปรับปรุงประสิทธิภาพของเลย์เอาต์ Masonry

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

• การปรับปรุงรูปภาพ: ปรับปรุงรูปภาพของคุณสำหรับเว็บเพื่อลดขนาดไฟล์ ใช้เครื่องมือเช่น TinyPNG หรือ ImageOptim เพื่อบีบอัดรูปภาพโดยไม่สูญเสียคุณภาพอย่างมีนัยสำคัญ พิจารณาใช้รูปภาพแบบ responsive ด้วยอิลิเมนต์ <picture> หรือแอตทริบิวต์ srcset เพื่อให้บริการรูปภาพขนาดต่างๆ ตามขนาดหน้าจอและความละเอียด
• การโหลดแบบ Lazy Loading: ใช้การโหลดแบบ lazy loading สำหรับรูปภาพที่ยังไม่ปรากฏใน viewport ในตอนแรก ซึ่งจะช่วยปรับปรุงเวลาในการโหลดหน้าเว็บครั้งแรก ใช้แอตทริบิวต์ loading="lazy" บนแท็ก <img> ของคุณ หรือใช้ไลบรารี JavaScript สำหรับเทคนิค lazy loading ขั้นสูง
• Virtualization: สำหรับชุดข้อมูลขนาดใหญ่มาก ให้พิจารณาใช้เทคนิค virtualization เพื่อเรนเดอร์เฉพาะไอเท็มที่ปรากฏใน viewport ในปัจจุบันเท่านั้น ซึ่งสามารถปรับปรุงประสิทธิภาพได้อย่างมากเมื่อต้องจัดการกับไอเท็มหลายพันรายการ
• การทำ Debouncing เหตุการณ์ปรับขนาด: เมื่อใช้ JavaScript สำหรับการใช้งานสำรอง ให้ทำ debounce เหตุการณ์ resize เพื่อหลีกเลี่ยงการคำนวณซ้ำซ้อนมากเกินไปเมื่อหน้าต่างเบราว์เซอร์ถูกปรับขนาด ซึ่งสามารถป้องกันปัญหาด้านประสิทธิภาพและปรับปรุงการตอบสนองได้
• การจัดลำดับความสำคัญของเนื้อหา: จัดลำดับความสำคัญของการโหลดเนื้อหาที่อยู่เหนือขอบล่างของหน้าจอ (above the fold) เพื่อปรับปรุงประสิทธิภาพที่ผู้ใช้รับรู้ได้ของเว็บไซต์

ข้อควรพิจารณาด้านการเข้าถึง (Accessibility)

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

• HTML เชิงความหมาย (Semantic HTML): ใช้อิลิเมนต์ HTML เชิงความหมายเพื่อจัดโครงสร้างเนื้อหาของคุณอย่างมีเหตุผล ซึ่งจะช่วยให้โปรแกรมอ่านหน้าจอเข้าใจเนื้อหาและนำทางในหน้าเว็บได้อย่างมีประสิทธิภาพ
• การนำทางด้วยคีย์บอร์ด: ตรวจสอบให้แน่ใจว่าผู้ใช้สามารถนำทางในเลย์เอาต์โดยใช้คีย์บอร์ดได้ ทดสอบเลย์เอาต์ของคุณด้วยการนำทางด้วยคีย์บอร์ดเท่านั้นเพื่อระบุปัญหาที่อาจเกิดขึ้น
• การจัดการโฟกัส: จัดการลำดับการโฟกัสอย่างเหมาะสมเพื่อให้แน่ใจว่ามีการไหลที่สมเหตุสมผลสำหรับผู้ใช้คีย์บอร์ด ใช้แอตทริบิวต์ tabindex เพื่อควบคุมลำดับที่อิลิเมนต์จะได้รับโฟกัส
• ข้อความทางเลือกสำหรับรูปภาพ: ระบุข้อความทางเลือกที่สื่อความหมายสำหรับรูปภาพทั้งหมดโดยใช้แอตทริบิวต์ alt ซึ่งจะช่วยให้โปรแกรมอ่านหน้าจอสามารถสื่อสารเนื้อหาของรูปภาพไปยังผู้ใช้ที่มีความบกพร่องทางการมองเห็นได้
• ความคมชัดที่เพียงพอ: ตรวจสอบให้แน่ใจว่ามีความคมชัดเพียงพอระหว่างสีข้อความและสีพื้นหลังเพื่อให้เป็นไปตามมาตรฐานการเข้าถึง
• แอตทริบิวต์ ARIA: ใช้แอตทริบิวต์ ARIA เพื่อให้ข้อมูลเพิ่มเติมแก่เทคโนโลยีสิ่งอำนวยความสะดวกหากจำเป็น อย่างไรก็ตาม หลีกเลี่ยงการใช้แอตทริบิวต์ ARIA มากเกินไป และควรใช้อิลิเมนต์ HTML เชิงความหมายทุกครั้งที่เป็นไปได้

ตัวอย่างการใช้งานเลย์เอาต์ Masonry

เลย์เอาต์แบบ Masonry ถูกใช้อย่างกว้างขวางในเว็บไซต์ประเภทต่างๆ:

• Pinterest: ตัวอย่างที่ชัดเจนที่สุดของเลย์เอาต์แบบ Masonry ซึ่งแสดงรูปภาพและลิงก์ในลักษณะที่น่าดึงดูดสายตา
• Dribbble: แพลตฟอร์มสำหรับแรงบันดาลใจด้านการออกแบบที่ใช้เลย์เอาต์แบบ Masonry เพื่อแสดงผลงานการออกแบบ
• Etsy: แพลตฟอร์มอีคอมเมิร์ซที่ใช้เลย์เอาต์แบบ Masonry เพื่อแสดงรายการสินค้า
• เว็บไซต์ข่าว: เว็บไซต์ข่าวบางแห่งใช้เลย์เอาต์แบบ Masonry เพื่อแสดงบทความและเนื้อหาอื่นๆ ในลักษณะที่ไดนามิกและน่าสนใจ ซึ่งช่วยให้พวกเขาสามารถแสดงเนื้อหาที่หลากหลายมากขึ้นในหน้าเดียว
• เว็บไซต์พอร์ตโฟลิโอ: นักออกแบบและช่างภาพจำนวนมากใช้เลย์เอาต์แบบ Masonry เพื่อแสดงผลงานของตนในลักษณะที่โดดเด่นสะดุดตา

เทคนิคขั้นสูง

1. การโหลดเนื้อหาแบบไดนามิก

เลย์เอาต์แบบ Masonry สามารถใช้ร่วมกับเทคนิคการโหลดเนื้อหาแบบไดนามิกเพื่อสร้างประสบการณ์การเลื่อนแบบไม่มีที่สิ้นสุด (infinite scrolling) เมื่อผู้ใช้เลื่อนหน้าลงมา ไอเท็มเพิ่มเติมจะถูกโหลดและเพิ่มเข้าไปในเลย์เอาต์ ซึ่งสามารถปรับปรุงประสบการณ์ผู้ใช้ได้อย่างมากโดยการให้สตรีมเนื้อหาอย่างต่อเนื่อง

2. การกรองและการจัดเรียง

เลย์เอาต์แบบ Masonry ยังสามารถใช้ร่วมกับฟังก์ชันการกรองและการจัดเรียงเพื่อให้ผู้ใช้สามารถค้นหาเนื้อหาที่ต้องการได้อย่างง่ายดาย ไลบรารีอย่าง Isotope มีการรองรับในตัวสำหรับการกรองและการจัดเรียงเลย์เอาต์แบบ Masonry

3. แอนิเมชันและการเปลี่ยนผ่าน

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

สรุป

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