วิธีสร้างเค้าโครงการ์ดโดยใช้ CSS Grid Layout

หมายเหตุบรรณาธิการ: แขกรับเชิญนี้เขียนโดย Abbey Fitzgerald วิศวกรซอฟต์แวร์ UX และนักออกแบบเว็บไซต์ผู้ชื่นชอบศิลปะการสร้างโค้ด

CSS Grid Layouts กำลังเปลี่ยนวิธีการทำงานของนักออกแบบเว็บไซต์ ทำให้สามารถจัดวางเนื้อหาเว็บไซต์ได้อย่างมีประสิทธิภาพมากขึ้น

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

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

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

เครื่องมือเค้าโครงตาราง CSS

ในขณะที่คุณดำเนินการ คุณจะต้องตรวจสอบสิ่งต่างๆ บนหน้าเว็บ Firefox มีเครื่องมือสำหรับนักพัฒนาที่ยอดเยี่ยมสำหรับการดูพื้นที่กริด เมื่อใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Firefox คุณจะเห็นภาพซ้อนทับที่แสดงเส้นกริด Firefox Developer Edition ก็มีความสามารถนี้เช่นกัน

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

การ์ดอย่างง่ายพร้อม CSS Grid Layout

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

การ์ดและเค้าโครงหน้าโดยรวม

นอกจากนี้ สิ่งสำคัญคือต้องรู้ว่า CSS Grid ไม่จำเป็นต้องใช้กับเค้าโครงหน้าทั้งหมด สามารถใช้กริดในบางพื้นที่ของหน้าได้หากจำเป็น เนื่องจากนี่คือบทช่วยสอนเกี่ยวกับเลย์เอาต์ของการ์ด จึงสามารถใช้แนวทางแบบกริดได้ที่นี่เท่านั้น แม้ว่าส่วนที่เหลือของหน้าจะไม่ได้ใช้ CSS Grid ก็ตาม ตราบใดที่พื้นที่กริดถูกกำหนดและ display: grid; มีประกาศไว้บนกระดาษห่อ วิธีนี้ใช้ได้

การทำงานกับการ์ดจำนวนหนึ่ง

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

สำหรับตัวอย่างนี้ (และอื่นๆ) รายการ .card ทั้งหมดจะอยู่ภายในองค์ประกอบคอนเทนเนอร์ .cards เพื่อให้บรรลุสิ่งนี้ มันค่อนข้างง่าย

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

การแสดงค่าของ .cards ไปยังกริดเป็นสิ่งสำคัญ หากไม่มีสิ่งนี้ ก็จะไม่สามารถสร้างพื้นที่กริดได้ ขั้นตอนต่อไปคือการกำหนด grid-template-columns และเลือกสไตล์ รูปแบบการ์ดจริงจะถูกประกาศด้วยคลาส .card

ในตัวอย่างนี้ คุณจะเห็นแท็กบทความหลายแท็กที่มีคลาสเป็น .card ดูได้ที่ Codepen

ทำซ้ำสำหรับชุดจำนวนการ์ด

นี่คือจุดที่การ์ดเริ่มเป็นรูปเป็นร่าง หากต้องการสร้างจำนวนคอลัมน์ต่อแถวแบบไหล จะใช้ซ้ำกับฟังก์ชัน repeat() ฟังก์ชันนี้ใช้สองอาร์กิวเมนต์: จำนวนครั้งที่ต้องทำซ้ำและค่าที่จะทำซ้ำ

ตัวอย่างเช่น grid-template-columns: repeat(3, 200px); คำนวณเป็น grid-template-columns: 200px 200px 200px; .

หน่วยเศษส่วน

คุณจะเห็นว่าโค้ดตัวอย่างใช้ "fr" นั่นคืออะไรกันแน่? หน่วยวัดนี้ได้รับความนิยมจาก CSS Grid Fr หมายถึง "หน่วยเศษส่วน" และ 1fr ใช้พื้นที่ 1 ส่วน ช่วยให้การคำนวณพื้นที่ง่ายขึ้น

หน่วยเศษส่วนสามารถใช้เพียงอย่างเดียวหรืออนุญาตให้คุณระบุความกว้างเป็น 1fr และคุณสามารถเพิ่มองค์ประกอบย่อยได้เช่นกัน หลาย fr จะถูกแบ่งปันอย่างเท่าเทียมกันในองค์ประกอบลูกทั้งหมด

สามารถระบุหน่วยเศษส่วนต่างๆ ได้ ตัวอย่างเช่น เมื่อคอลัมน์กริดเท่ากับ 1fr 2fr 1fr หน่วยเศษส่วนสองหน่วยจะใช้พื้นที่เป็นสองเท่าของหน่วยเศษส่วนหนึ่งหน่วย

ทำซ้ำสำหรับจำนวนการ์ดแบบไดนามิก

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

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

จำเป็นต้องมีการประกาศความกว้างนอกเหนือจาก auto-fill โปรดทราบว่าด้วยค่า px อาจมีช่องว่างทางด้านขวาเมื่อการ์ดไม่พอ แต่ไม่จำเป็นต้องเป็นเช่นนั้น ดังที่คุณจะเห็นในภายหลัง

ต่ำสุดเพื่อการควบคุมความกว้างของการ์ดที่มากขึ้น

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

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

คอลัมน์จะพอดีกับตารางเสมอ และการ์ดจะมีขนาดอย่างน้อย 200px เมื่อพื้นที่ขั้นต่ำไม่พอดีกับพื้นที่ นี่คือที่มาของความกว้างสูงสุด เมื่อการ์ดความกว้าง 200 พิกเซลอีกใบไม่พอดี การ์ดอื่นๆ จะมีขนาดใหญ่กว่า 200 พิกเซล ดังนั้นการ์ดเหล่านั้นจึงยืดออกจนเต็มแถวโดยมีพื้นที่มากขึ้นและจะกระจายเท่าๆ กัน [รหัสบทความ=”21612″ จัด=”ขวา”]

มือถือ

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

ในตัวอย่างนี้ การ์ดจำเป็นต้องลดขนาดลงเพื่อให้พอดีกับอุปกรณ์พกพา และเพิ่มขนาดให้เท่ากับเศษเสี้ยวของพื้นที่ที่มีอยู่ เพื่อให้การ์ดปรากฏเต็มความกว้างในอุปกรณ์ขนาดเล็ก ไม่จำเป็นต้องมีการสืบค้นสื่อแยกต่างหาก:

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

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

ช่องว่างกริด

เมื่อกำหนดความกว้างของการ์ดแล้ว จำเป็นต้องตัดสินใจให้มีช่องว่างระหว่างการ์ด คุณสมบัตินี้มีอยู่ในคอนเทนเนอร์กริดและทำให้ง่ายต่อการสร้างรางน้ำในการออกแบบ Grid-column-gap สร้างช่องว่างระหว่างการ์ดแต่ละใบ เมื่อคุณเห็น grid-gap นั่นหมายถึงการชวเลขของ grid-row-gap และ grid-column-gap Grid-row-gap คือช่องว่างด้านบนและด้านล่างของการ์ด grid-column-gap คือช่องว่างทางซ้ายและขวาของการ์ด

ทรัพยากรเค้าโครงกริด CSS

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

• ตารางตามตัวอย่าง
• หลักสูตร CSS Grid Layout จาก Wes Bos
• Mozilla แนะนำ CSS Grid