10 ตัวอย่างโค้ด CSS Grid ที่มีประโยชน์

ข้อมูลจำเพาะกริด CSS ไม่ได้ "ใหม่" อย่างแน่นอน แต่ใหม่กว่าในโลกของนักพัฒนาหลัก ผู้เขียนโค้ดส่วนหน้าจำนวนมากยังไม่รู้เกี่ยวกับคุณสมบัติกริด CSS เลย นับประสาว่าใช้กับอินเทอร์เฟซอย่างไร

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

คอลเล็กชันนี้ควรมีทรัพยากรมากมายที่จะช่วยให้คุณเรียนรู้ ปรับแต่ง และจัดรูปแบบกริด CSS สำหรับสิ่งที่คุณทำบนเว็บ

1. บล็อกฮีโร่หลายภาพ

มาเริ่มกันเลยด้วยบล็อกฮีโร่สุดเจ๋งที่ออกแบบด้วยคุณสมบัติกริด การออกแบบนี้เลียนแบบส่วนรูปภาพฮีโร่ในหน้าแรกที่คุณจะพบในเว็บไซต์สไตล์นิตยสารมากมาย

นักพัฒนา Rachel Andrew สร้างสิ่งนี้โดยใช้ CSS ที่กำหนดเองเล็กน้อยจากโครงการของเธอเอง มันใช้งานได้ดีอย่างไม่น่าเชื่อ และการออกแบบก็ตอบสนองต่อการบู๊ตได้อย่างเต็มที่

ไม่ต้องพูดถึงว่ามันดูดีบนหน้าจอมือถือ ไม่ใช่สิ่งที่คุณมักจะพบด้วยบล็อกรูปภาพขนาดใหญ่

นี่เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับการศึกษากริด CSS และตัวอย่างข้อมูลที่มีประโยชน์สำหรับทุกคนที่เขียนโค้ดธีมบล็อกสไตล์นิตยสาร

2. CSS Grid Layout

คุณสมบัติ grid-auto-flow แสดงเต็มด้วยการสาธิตนี้โดยใช้การตั้งค่า "หนาแน่น" การดำเนินการนี้จะบังคับให้รายการย่อลงมาในหน้าเมื่อปรับขนาดกริด

ด้วยการตั้งค่านี้ คุณสามารถควบคุมได้มากว่าองค์ประกอบของหน้าใดจะเปลี่ยนตำแหน่ง ตำแหน่งที่การเปลี่ยนแปลงเหล่านั้นเกิดขึ้น และวิธีที่กริดควรตอบสนอง สิ่งนี้ใช้เบาะหน้ามากกว่าการสืบค้นสื่อซึ่งส่วนใหญ่ใช้ในการออกแบบที่ตอบสนอง

หากคุณไม่แน่ใจว่ารหัสนี้ใช้ทำอะไร จำไว้ว่า Google คือเพื่อนของคุณ! โพสต์ที่ยอดเยี่ยมมากมายและเธรด Stack Overflow ที่ครอบคลุมการตั้งค่าทั้งหมดนี้

3. ข้อเท็จจริงฟักทองที่ไม่น่ากลัว

นี่เป็นตัวอย่างที่ดีที่สร้างขึ้นด้วยข้อเท็จจริงพื้นฐานของฟักทอง ข้อเท็จจริงของฟักทองที่จัดโดยเค้าโครงกริด CSS

โค้ดนี้ทำงานบน SCSS/Sass จริงๆ ซึ่งหมายความว่าคุณจะต้องมีความคุ้นเคยกับภาษาก่อนจึงจะสามารถเจาะลึกได้ แต่คุณยังสามารถคอมไพล์โค้ด Sass เป็น CSS ดิบได้จากใน CodePen หากคุณต้องการดูคุณสมบัติพื้นฐาน

สิ่งหนึ่งที่ฉันชอบเกี่ยวกับการออกแบบนี้คือสีและการออกแบบตัวอักษร มันส่งเสียงกรี๊ดวันฮัลโลวีนด้วยไอคอนฟักทองและเฉดสีเหลือง/ส้มทั้งหมด

4. เค้าโครงหกเหลี่ยมอัตโนมัติ

นี่อาจเป็นหนึ่งในโครงการที่ใช้งานได้จริงที่สุดที่ฉันพบสำหรับแกลเลอรีนี้ ดูลักษณะตารางนี้แล้วลองปรับขนาดเบราว์เซอร์ของคุณ

คุณจะสังเกตเห็นว่าสิ่งของที่มีรูปร่างเป็นหกเหลี่ยมกำลังจัดรูปแบบใหม่เพื่อให้พอดีกับหน้ากระดาษ นี่อาจเป็นวิธีที่ดีที่สุดในการจัดการหน้าที่ซับซ้อนซึ่งมีรูปภาพจำนวนมาก ฉันมักจะเห็นเลย์เอาต์ประเภทนี้ในเว็บไซต์การประชุมและหน้า "เกี่ยวกับเรา" สำหรับบริษัทที่มีพนักงานจำนวนมาก

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

5. Pokedex ใน CSS Grid

ฉันยังไม่เห็นอะไรที่สร้างสรรค์เท่า Pokedex นี้ในกริด CSS มันอาศัย HTML และ CSS ที่มี JavaScript เล็กน้อยสำหรับการเติมขนาดเซลล์อัตโนมัติ

เมื่อคุณปรับขนาดหน้า คุณจะสังเกตเห็นว่ากราฟิกมีขนาดเพิ่มขึ้นเช่นกัน มันค่อนข้างง่ายที่จะจัดการกับ CSS และมันง่ายยิ่งขึ้นเมื่อคุณเรียนรู้คุณสมบัติกริดบางส่วน

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

6. กริดอย่างง่าย

นี่เป็นแนวคิดที่น่าสนใจอย่างยิ่งที่นำสไตล์การออกแบบสิ่งพิมพ์มาสู่เว็บ ดูตัวอย่างนี้ใน CodePen ที่มีคอลัมน์จำนวนมากที่มีส่วนหัวและตัวพิมพ์ขนาดใหญ่

เลย์เอาต์กริดเองนั้นอาศัยชุดคอลัมน์ที่มีช่องว่างที่กำหนดไว้ล่วงหน้า ซึ่งหมายความว่าเมื่อคุณปรับขนาดเบราว์เซอร์ บางคอลัมน์จะแยกย่อยตามกฎเหล่านี้

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

7. CSS Grid พร้อม Flexbox Fallback

เบราว์เซอร์บางตัวไม่สามารถตามโครงสร้างกริด CSS นั่นเป็นเหตุผลที่ตัวอย่างนี้สอนวิธีออกแบบกริด CSS ที่กำหนดเองโดยใช้ flexbox (และลอย) เป็นทางเลือก

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

ฉันจะไม่เรียกสิ่งนี้ว่าโซลูชันทางเลือกที่สมบูรณ์แบบ แต่มันดีกว่าไม่ทำอะไรเลย

8. การสาธิตคำศัพท์เกี่ยวกับกริด

ไม่แน่ใจเกี่ยวกับคำศัพท์ตาราง CSS ที่สับสนทั้งหมดนี้ใช่หรือไม่ ตัวอย่างนี้อาจช่วยให้กระจ่างขึ้น

หากคุณเจาะลึกลงไปในตัวอย่างนี้ คุณจะพบกับคุณลักษณะเด่นๆ บางส่วนพร้อมคำอธิบายประกอบเกี่ยวกับตารางตลอดเส้นทาง คุณจะได้เรียนรู้วิธีดูเส้นตารางอย่างถูกต้องและวิธีดูเส้นตาราง CSS อย่างถูกต้องบนหน้า

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

9. การใช้ grid-template-columns: ทำซ้ำ ()

สำหรับตัวอย่างเฉพาะของคุณสมบัติ grid-template-columns ให้ดูที่การสาธิตสดนี้ มันแสดงให้คุณเห็นถึงวิธีการใช้คุณสมบัติทำซ้ำแทนที่จะประกาศค่าคอลัมน์เดียวกันหลายครั้งใน CSS ของคุณ

อีกครั้ง การสนับสนุนเบราว์เซอร์ยังคงตามทัน แต่เว็บเบราว์เซอร์สมัยใหม่ส่วนใหญ่ใช้เทคนิคนี้

ไม่ต้องพูดถึง คุณจะพบความคิดเห็นมากมายใน CSS เพื่อช่วยให้คุณเข้าใจว่าสิ่งนี้ทำอะไร

10. ครอสเวิร์ดกริด CSS บริสุทธิ์

หากต้องการปิดท้ายด้วยโน้ตสนุกๆ ให้ดูที่ปริศนาอักษรไขว้ CSS ของ Adrian Roworth เลย์เอาต์ทั้งหมดนี้สร้างขึ้นจากโค้ด HTML และ CSS โดยเฉพาะคุณสมบัติกริด CSS สำหรับโครงสร้างเลย์เอาต์

ที่บ้าไปกว่านั้นก็คือ คุณสามารถป้อนเนื้อหาลงในกล่องคำไขว้เพื่อไขปริศนาได้จริง เด็ดแค่ไหน!

โปรดทราบว่าสิ่งนี้ค่อนข้างซับซ้อน และเป็นหนึ่งในไม่กี่โครงการที่แสดงไว้ที่นี่ซึ่งไม่เหมาะกับอุปกรณ์พกพา แต่เป็นข้อพิสูจน์ว่าเรามาไกลแค่ไหนกับเลย์เอาต์กริดบนเว็บ ฉันหวังว่าเราจะเห็นอะไรแบบนี้อีกมากในอนาคตอันใกล้