TL;DR
หากคุณคุ้นเคยกับ Flexbox อยู่แล้ว Grid น่าจะคุ้นเคยดี Rachel Andrew ดูแลเว็บไซต์ที่เน้น CSS Grid ไว้อย่างดีเพื่อช่วยให้คุณเริ่มต้นใช้งาน ตารางพร้อมใช้งานใน Google Chrome แล้ว
Flexbox ตารางกริด
ในช่วง 2-3 ปีที่ผ่านมา CSS Flexbox เริ่มมีการใช้อย่างแพร่หลายและการรองรับเบราว์เซอร์ก็ทำได้ดีเยี่ยม (นอกจากว่าคุณเป็นหนึ่งในคนยากจนที่ต้องรองรับ IE9 และเวอร์ชันที่ต่ำกว่า) Flexbox ทําให้งานการจัดวางที่ซับซ้อนหลายอย่างง่ายขึ้น เช่น การจัดวางระยะห่างเท่าๆ กันระหว่างองค์ประกอบ การจัดวางจากบนลงล่าง หรือการวางแนวตั้งตรงกลาง ซึ่งเป็นสุดยอดเวทมนตร์ของ CSS
อย่างไรก็ตาม หน้าจอมักมีมิติที่ 2 ที่เราจะต้องกังวล น่าเสียดายที่คุณไม่สามารถใช้จังหวะทั้งแนวตั้งและแนวนอนได้โดยใช้ Flexbox เพียงอย่างเดียว เว้นแต่คุณจะกำหนดขนาดองค์ประกอบด้วยตนเอง ด้วยเหตุนี้ CSS Grid จึงเข้ามาช่วยแก้ปัญหา
CSS Grid อยู่ระหว่างการพัฒนา โดยมีการแจ้งว่าไม่เหมาะสมในเบราว์เซอร์ส่วนใหญ่มานานกว่า 5 ปี และใช้เวลาเพิ่มเติมไปกับความสามารถในการทำงานร่วมกันเพื่อหลีกเลี่ยงการเปิดตัวที่มีข้อบกพร่องเหมือนอย่าง Flexbox ดังนั้น หากคุณใช้ตารางกริดเพื่อใช้เลย์เอาต์ใน Chrome คุณก็อาจได้ผลลัพธ์เดียวกันใน Firefox และ Safari ขณะเขียนบทความนี้ การใช้งานตารางกริดของ Microsoft Edge ล้าสมัยแล้ว (เหมือนกับที่มีอยู่ใน IE11) และการอัปเดต "อยู่ระหว่างการพิจารณา"
แม้ว่าจะมีแนวคิดและไวยากรณ์คล้ายกัน แต่อย่าคิดว่า Flexbox และ Grid เป็นเทคนิคการจัดวางที่แข่งขันกัน ตารางกริดจะจัดเรียงเป็น 2 มิติ ส่วน Flexbox จะจัดวางเป็น 1 มิติ การใช้ทั้ง 2 อย่างร่วมกันจะทำให้เกิดการทำงานร่วมกัน
การกําหนดตารางกริด
หากต้องการทำความคุ้นเคยกับพร็อพเพอร์ตี้แต่ละรายการของตารางกริด เราขอแนะนำตารางกริดจากตัวอย่างของ Rachel Andrew หรือชีตสรุปของ CSS Tricks หากคุณคุ้นเคยกับ Flexbox แล้ว พร็อพเพอร์ตี้จำนวนมากและความหมายของพร็อพเพอร์ตี้ๆ เหล่านั้นก็ควรมีความคุ้นเคยดีอยู่แล้ว
มาดูเลย์เอาต์ตารางกริด 12 คอลัมน์มาตรฐานกัน รูปแบบ 12 คอลัมน์แบบคลาสสิกได้รับความนิยมมากเนื่องจากหมายเลข 12 หารด้วย 2, 3, 4 และ 6 และมีประโยชน์สำหรับการออกแบบจำนวนมาก เราจะใช้เลย์เอาต์นี้แทน
มาเริ่มกันด้วยโค้ดมาร์กอัป
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
ในสไตล์ชีต เราเริ่มต้นด้วยการเพิ่มขนาด body ให้ครอบคลุมทั้งวิดเจ็ตการแสดงผล และเปลี่ยนเป็นคอนเทนเนอร์ตารางกริด
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
ตอนนี้เราใช้ CSS Grid. ไชโย
ขั้นตอนถัดไปคือการใช้แถวและคอลัมน์ของตารางกริด เราอาจใช้คอลัมน์ทั้งหมด 12 คอลัมน์ในโมคอัปได้ แต่เนื่องจากไม่ได้ใช้ทุกคอลัมน์ การดําเนินการนี้จะทำให้ CSS ยุ่งเหยิงโดยไม่จําเป็น เราจะใช้เลย์เอาต์นี้เพื่อลดความซับซ้อน
ส่วนหัวและท้ายกระดาษมีความกว้างที่เปลี่ยนแปลงได้ และเนื้อหาจะเปลี่ยนแปลงได้ทั้ง 2 มิติ แถบนําทางจะมีขนาดแตกต่างกันไปทั้ง 2 ขนาดเช่นกัน แต่เราจะกำหนดความกว้างขั้นต่ำไว้ที่ 200 พิกเซล (เพราะเหตุใด เพื่อแสดงฟีเจอร์ของ CSS Grid แน่นอน)
ใน CSS Grid ชุดคอลัมน์และแถวเรียกว่าแทร็ก มาเริ่มกันด้วยการกําหนดชุดแทร็กแรกของเรา ซึ่งเป็นแถว
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows ใช้ลําดับขนาดที่กําหนดแถวแต่ละแถว
ในกรณีนี้ เรากำหนดความสูงของแถวแรกเป็น 150 พิกเซลและแถวสุดท้ายเป็น 100 พิกเซล
แถวกลางตั้งค่าเป็น auto ซึ่งหมายความว่าแถวดังกล่าวจะปรับความสูงตามความจําเป็นเพื่อรองรับรายการตารางกริด (รายการย่อยของคอนเทนเนอร์ตารางกริด) ในแถวนั้น เนื่องจากข้อความของเรายืดออกเต็มวิวพอร์ต แทร็กที่มีเนื้อหา (สีเหลืองในรูปภาพด้านบน) จะขยายจนเต็มพื้นที่ว่างอย่างน้อยที่สุด และจะขยายขึ้น (และทำให้เอกสารเลื่อน) หากจำเป็น
สำหรับคอลัมน์ เราต้องการใช้แนวทางแบบไดนามิกมากขึ้น โดยต้องการให้ทั้งการนำทางและเนื้อหาขยาย (และย่อ) แต่เราต้องการให้การนำทางไม่ย่อต่ำกว่า 200 พิกเซล และต้องการให้เนื้อหามีขนาดใหญ่กว่าการนำทาง ใน Flexbox เราใช้ flex-grow และ flex-shrink แต่ใน Grid จะใช้คำสั่งต่อไปนี้
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
เรากําหนด 2 คอลัมน์ คอลัมน์แรกจะกำหนดโดยใช้ฟังก์ชัน minmax()
ซึ่งรับค่า 2 ค่า ได้แก่ ขนาดต่ำสุดและสูงสุดของแทร็กนั้น
(เหมือนกับ min-width และ max-width ใน 1 จุด) ความกว้างขั้นต่ำคือ 200px ตามที่เรา
พูดถึงก่อนหน้านี้ ความกว้างสูงสุดคือ 3fr fr คือหน่วยเฉพาะของตารางกริดที่ช่วยให้คุณกระจายพื้นที่ว่างไปยังองค์ประกอบตารางกริดได้ fr อาจย่อมาจาก "หน่วยเศษส่วน" แต่อาจหมายถึงหน่วยฟรีในเร็วๆ นี้ด้วย
ค่าของเราหมายความว่าทั้ง 2 คอลัมน์จะขยายเต็มหน้าจอ แต่คอลัมน์เนื้อหาจะกว้างเท่ากับคอลัมน์การนำทาง 3 เท่าเสมอ (หากคอลัมน์การนำทางกว้างกว่า 200 พิกเซล)
แม้ว่าตำแหน่งของรายการแบบตารางกริดจะยังไม่ถูกต้อง แต่ขนาดของแถวและคอลัมน์ทำงานได้อย่างถูกต้องและเป็นไปตามลักษณะการทำงานที่เรามุ่งหวังไว้
การวางสิ่งของ
ฟีเจอร์ที่มีประสิทธิภาพมากที่สุดอย่างหนึ่งของตารางกริดคือการวางรายการโดยไม่คำนึงถึงลําดับ DOM (อย่างไรก็ตาม เนื่องจากโปรแกรมอ่านหน้าจอจะไปยังส่วนต่างๆ ของ DOM เราขอแนะนําอย่างยิ่งให้คุณคำนึงถึงวิธีเรียงลําดับองค์ประกอบใหม่เพื่อให้เข้าถึงได้อย่างถูกต้อง) หากไม่มีการวางองค์ประกอบด้วยตนเอง ระบบจะวางองค์ประกอบไว้ในตารางกริดตามลำดับ DOM โดยจัดเรียงจากซ้ายไปขวาและบนลงล่าง แต่ละองค์ประกอบจะครอบครองเซลล์ 1 เซลล์ เปลี่ยนลำดับการเติมข้อมูลในตารางได้โดยใช้ grid-auto-flow
แล้วเราจะวางองค์ประกอบอย่างไร วิธีที่ง่ายที่สุดในการวางรายการตารางกริดคือการกําหนดคอลัมน์และแถวที่ครอบคลุม กริดมีไวยากรณ์ 2 รูปแบบในการดำเนินการนี้ ในไวยากรณ์แรก คุณกําหนดจุดเริ่มต้นและจุดสิ้นสุด ในวิดีโอที่สอง คุณจะต้องกำหนด จุดเริ่มต้นและระยะเวลา
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
เราต้องการให้ส่วนหัวเริ่มต้นในคอลัมน์แรกและสิ้นสุดก่อนคอลัมน์ที่ 3 การนำทางควรเริ่มต้นที่แถวที่ 2 และครอบคลุม 2 แถว
ในทางเทคนิคแล้ว เราติดตั้งเลย์เอาต์เสร็จแล้ว แต่เราอยากแสดงฟีเจอร์อำนวยความสะดวกบางอย่างที่กริดมีให้คุณเพื่อให้วางโฆษณาได้ง่ายขึ้น ฟีเจอร์แรกคือคุณสามารถตั้งชื่อขอบแทร็กและใช้ชื่อเหล่านั้นในการวางตำแหน่งได้ ดังนี้
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
โค้ดด้านบนจะให้เลย์เอาต์เดียวกับโค้ดก่อนหน้า
ยิ่งไปกว่านั้น คือคุณลักษณะของการตั้งชื่อภูมิภาคในตารางกริด
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas ใช้สตริงชื่อที่คั่นด้วยเว้นวรรค ซึ่งช่วยให้นักพัฒนาแอปตั้งชื่อเซลล์แต่ละเซลล์ได้ หากเซลล์ที่อยู่ติดกัน 2 เซลล์มีชื่อเดียวกัน ระบบจะรวมเซลล์ดังกล่าวไว้ในพื้นที่เดียวกัน วิธีนี้จะช่วยให้คุณระบุความหมายเพิ่มเติมในโค้ดเลย์เอาต์และทำให้ Media Query ใช้งานได้ง่ายขึ้น โปรดทราบว่าโค้ดนี้จะสร้างเลย์เอาต์แบบเดียวกับก่อนหน้านี้
มีอะไรให้เราช่วยอีกไหม
ใช่ มีมากเกินกว่าที่จะอธิบายได้ในบล็อกโพสต์เดียว Rachel Andrew ที่เป็น GDE ด้วย เป็นผู้เชี่ยวชาญที่ได้รับเชิญในกลุ่มทํางาน CSS และทํางานร่วมกับกลุ่มนี้มาตั้งแต่ต้นเพื่อให้แน่ใจว่า Grid จะทําให้การออกแบบเว็บง่ายขึ้น เธอยังเขียนหนังสือเกี่ยวกับเรื่องนี้ด้วย เว็บไซต์ Grid By Example ของเธอเป็นแหล่งข้อมูลที่มีประโยชน์ในการทำความคุ้นเคยกับ Grid หลายคนคิดว่าตารางกริดเป็นก้าวที่ปฏิวัติวงการการออกแบบเว็บ และตอนนี้ตารางกริดเปิดใช้โดยค่าเริ่มต้นใน Chrome แล้ว คุณจึงเริ่มใช้งานได้ตั้งแต่วันนี้