วิธีสร้างเค้าโครงอย่างง่ายด้วย CSS Grid Layouts

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

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

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

ในที่สุดก็ถึงเวลาเจาะตารางและสำรวจความเป็นไปได้ในการออกแบบใหม่!

รองรับ CSS Grid

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

CSS Grid Layout เบื้องต้น

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

ส่วนของกริด

เส้น

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

แทร็ก

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

เซลล์

พบเซลล์ที่เส้นแนวนอนและแนวตั้งมาบรรจบกัน มีแปดเซลล์ในแผนภาพ

พื้นที่

เซลล์เข้ามามีบทบาทเมื่อระบุพื้นที่ พื้นที่เป็นรูปสี่เหลี่ยมผืนผ้าที่สามารถขยายจำนวนเซลล์ได้ เช่นเดียวกับเส้น พื้นที่สามารถเลือกตั้งชื่อได้ มีป้ายชื่อสองสามป้ายที่รวมอยู่ในแผนภาพ: “A” “B” และ “C”

การสร้างเค้าโครงตาราง

การร่างสิ่งต่างๆ ก่อนเริ่มเค้าโครงอาจเป็นประโยชน์ ไม่มีอะไรทดแทนกระดาษกราฟแบบเก่าที่ดีได้

HTML สำหรับกริด

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

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

สไตล์ CSS

หลังจากที่คุณใช้มาร์กอัป HTML เสร็จแล้ว การประกาศที่สำคัญที่สุดจะเสร็จสิ้นใน CSS ภายในคอนเทนเนอร์ คุณต้องใช้ display:grid หรือ display:inline-grid ใช้ display:grid หากคุณต้องการกริดระดับบล็อก ใช้ display:inline-grid สำหรับกริดระดับอินไลน์

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

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

มีการปรับแต่งแบบตอบสนองที่สามารถทำได้ แต่การใช้หน่วยที่เป็นเศษส่วนเป็นขั้นตอนแรกที่ยอดเยี่ยม ระยะห่างระหว่างพื้นที่สามารถควบคุมได้ด้วย grid-column-gamp และ grid-row-gap

สิ่งต่าง ๆ ดูค่อนข้างรัดกุม แต่ด้วยคุณสมบัติเพิ่มเติมอีกเล็กน้อย สิ่งต่าง ๆ จะเป็นรูปเป็นร่าง

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

เริ่มจากส่วนหัวซึ่งเริ่มจากบรรทัดคอลัมน์ 1 ถึงบรรทัดคอลัมน์ 4 และแถวบรรทัดที่ 1 ถึงบรรทัดที่ 2 CSS จะมีลักษณะดังนี้:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

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

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

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

เนื้อหาหลักเริ่มต้นที่คอลัมน์สามและสิ้นสุดที่คอลัมน์สี่ ด้านบนสุดของแถบด้านข้างและพื้นที่เนื้อหาเป็นเลขคู่ ดังนั้นทั้งคู่จึงมี grid-row-start เป็นสามแถว คุณอาจสงสัยว่าเนื้อหาและแถบด้านข้างสูงขึ้นมากได้อย่างไร เมื่อใส่ความสูงให้กับคอนเทนเนอร์ ในกรณีนี้ 400px ตอนนี้จะสูงกว่าองค์ประกอบอื่นๆ

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

พื้นที่เนื้อหาสองส่วนสุดท้ายคือพื้นที่เนื้อหาเพิ่มเติมและส่วนท้าย

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

สามารถเขียนการประกาศสิ้นสุดและเริ่มต้นได้อย่างมีประสิทธิภาพมากขึ้น คุณอาจเห็น grid-column-start: 1; และ grid-column-end: 3; เขียนด้วยชวเลข ซึ่งจะมีลักษณะเหมือน grid-column: 1 / 3; . แนวคิดเดียวกันนี้สามารถใช้เพื่อประกาศข้อมูลแถวของคอลัมน์

ข้อดีที่ตอบสนอง

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

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

การที่คอลัมน์เริ่มต้นที่หนึ่งและสิ้นสุดที่สี่ เราได้ทำให้พื้นที่เนื้อหาเต็มความกว้าง แถวตารางถูกวางไว้เพื่อให้ "เนื้อหาเพิ่มเติม" อยู่เหนือ "เนื้อหา"

เครื่องมือเบราว์เซอร์สำหรับ CSS Grid Layout

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

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