สรุปคร่าวๆ
หากคุณคุ้นเคยกับ Flexbox อยู่แล้ว Grid ก็น่าจะคุ้นเคยดี Rachel Andrew ดูแลรักษาเว็บไซต์ที่ยอดเยี่ยมสําหรับ CSS Grid โดยเฉพาะ เพื่อช่วยให้คุณเริ่มต้นใช้งาน ขณะนี้ตารางกริดพร้อมใช้งานใน Google Chrome แล้ว
Flexbox ตารางกริดใช่ไหม
ในช่วง 2-3 ปีที่ผ่านมา CSS Flexbox มีการใช้กันอย่างแพร่หลายและ การรองรับเบราว์เซอร์ก็ดูดีมาก (เว้นแต่คุณจะเป็นคนย่ำแย่ที่ต้องรองรับ IE9 หรือต่ำกว่า) Flexbox ทำให้งานด้านเลย์เอาต์ที่ซับซ้อนขึ้นจำนวนมากกลายเป็นเรื่องง่าย เช่น การเว้นระยะห่างระหว่างองค์ประกอบต่างๆ ให้เท่ากัน การออกแบบจากบนลงล่าง หรือสิ่งที่สำคัญที่สุดของวิซาร์ด CSS: การจัดกึ่งกลางแนวตั้ง
แต่หน้าจอต่างๆ มักมีมิติที่ 2 ที่เราต้องคำนึงถึง แต่ต้องเสียดายที่คุณจะต้องปรับขนาดองค์ประกอบเองทั้งและแนวนอนด้วยการใช้เพียง Flexbox เท่านั้น และ CSS Grid จะเข้ามาช่วยในส่วนนี้
CSS Grid อยู่ในขั้นตอนการพัฒนา ตามหลัง Flag ในเบราว์เซอร์ส่วนใหญ่มานานกว่า 5 ปีแล้ว และต้องใช้เวลาเพิ่มเติมเกี่ยวกับความสามารถในการทำงานร่วมกันเพื่อหลีกเลี่ยงการเปิดตัวที่มีข้อบกพร่องเหมือนที่ Flexbox เคยทำไว้ ดังนั้นหากคุณใช้ Grid ในการติดตั้งเค้าโครงใน Chrome คุณจะได้ผลลัพธ์เดียวกันใน Firefox และ Safari ในขณะที่เขียน การใช้งาน Grid ของ Microsoft ถือเป็นล้าสมัย (เหมือนกับที่แสดงใน IE11 อยู่แล้ว) และการอัปเดตคือ "อยู่ระหว่างการพิจารณา"
ถึงแม้ว่าแนวคิดและไวยากรณ์จะมีความคล้ายคลึงกัน แต่อย่ามองว่า Flexbox และ Grid เป็นเทคนิคเลย์เอาต์ที่แข่งขันกัน ตารางกริดมี 2 มิติ ส่วน Flexbox จะแสดงอยู่ภายในมิติเดียว จึงมีความสอดคล้องกันเมื่อใช้ทั้ง 2 อย่างนี้ร่วมกัน
การกำหนดตารางกริด
เพื่อทำความคุ้นเคยกับคุณสมบัติแต่ละอย่างของ Grid I ฉันขอแนะนำเป็นอย่างยิ่งให้ Rachel Andrew’s Grid By Example or CSS Tricks' Cheat Sheet หากคุณคุ้นเคยกับ 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 มิติข้อมูล แถบนำทางจะแปรผันได้ทั้งสองมิติเช่นกัน แต่เราจะกำหนดความกว้างขั้นต่ำไว้ที่ 200 พิกเซล (เพราะเหตุใด เพื่อแสดงคุณลักษณะของ CSS Grid แน่นอน)
ในตารางกริด CSS ชุดคอลัมน์และแถวจะเรียกว่าแทร็ก เรามาเริ่มต้นด้วยการกำหนด แถวแนวนอนชุดแรกกัน
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 อยู่ในหนึ่ง) ความกว้างขั้นต่ำคือ 200px ความกว้างสูงสุดคือ 3fr fr คือหน่วยเฉพาะตารางกริดที่ช่วยให้คุณกระจายพื้นที่ว่างที่มีอยู่ไปยังองค์ประกอบตารางกริด fr อาจย่อมาจาก "fraction unit" แต่อาจหมายถึงหน่วยที่ว่างเร็วๆ นี้ก็ได้
ค่าของเราหมายความว่า ทั้ง 2 คอลัมน์จะขยายเต็มหน้าจอ แต่คอลัมน์เนื้อหาจะกว้างเป็น 3 เท่าของคอลัมน์การนำทางเสมอ (หากคอลัมน์การนำทางกว้างกว่า 200 พิกเซล)
แม้ว่าตำแหน่งของรายการในตารางยังไม่ถูกต้อง แต่ขนาดของแถวและคอลัมน์ยังทำงานได้อย่างถูกต้อง และตอบสนองต่อลักษณะการทำงานที่เรามุ่งหวังไว้
การวางสินค้า
ฟีเจอร์หนึ่งที่มีประสิทธิภาพที่สุดของ Grid คือสามารถวางรายการได้โดยไม่ต้องคำนึงถึงลำดับ DOM (แม้ว่าโปรแกรมอ่านหน้าจอจะไปยังส่วนต่างๆ ของ DOM แต่เราขอแนะนำให้คำนึงถึงวิธีการเรียงลำดับองค์ประกอบใหม่เพื่อให้สามารถเข้าถึงได้อย่างถูกต้อง) หากไม่มีการวางตำแหน่งด้วยตนเอง องค์ประกอบจะอยู่ในตารางกริดตามลำดับ DOM โดยจัดเรียงจากซ้ายไปขวาและบนลงล่าง แต่ละองค์ประกอบใช้เซลล์ได้ 1 เซลล์ คุณเปลี่ยนแปลงลำดับการกรอกข้อมูลในตารางกริดได้โดยใช้ grid-auto-flow
แล้วเราวางองค์ประกอบอย่างไร วิธีที่ง่ายที่สุดในการวางรายการในตารางกริดคือการกำหนดคอลัมน์และแถวที่ครอบคลุม ในไวยากรณ์แรก คุณต้องกำหนดจุดเริ่มต้นและจุดสิ้นสุด โดยใช้ไวยากรณ์ 2 แบบ ในอันที่ 2 คุณจะกำหนด จุดเริ่มต้นและระยะเวลา ดังนี้
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
เราอยากให้ส่วนหัวเริ่มต้นในคอลัมน์แรกและสิ้นสุดก่อนคอลัมน์ที่ 3 การนำทางของเราควรเริ่มต้นในแถวที่ 2 และครอบคลุมทั้งหมด 2 แถว
ในทางเทคนิค เราติดตั้งเลย์เอาต์เสร็จแล้ว แต่เราอยากจะแสดงฟีเจอร์ความสะดวกบางอย่างที่ Grid มีให้เพื่อช่วยให้การวางตำแหน่งง่ายขึ้น ฟีเจอร์แรกคือคุณสามารถตั้งชื่อเส้นขอบแทร็กและใช้ชื่อเหล่านั้นสำหรับตำแหน่ง
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 เซลล์ที่อยู่ติดกันมีชื่อเดียวกัน
เซลล์ทั้งสองจะถูกวางรวมอยู่ในพื้นที่เดียวกัน วิธีนี้ช่วยให้คุณระบุความหมายให้กับโค้ดเลย์เอาต์ได้ง่ายขึ้นและทำให้คำค้นหาสื่อใช้ง่ายขึ้น ย้ำอีกครั้งว่าโค้ดนี้
จะสร้างเลย์เอาต์แบบเดียวกับก่อนหน้านี้
ยังมีอีกไหม
แน่นอน หลายโพสต์มีมากกว่าที่จะกล่าวถึงในบล็อกโพสต์เดียว Rachel Andrew ซึ่งเป็น GDE ด้วย เป็นผู้เชี่ยวชาญที่ได้รับเชิญในคณะทำงาน CSS และทำงานร่วมกับบุคคลดังกล่าวมาตั้งแต่ต้นเพื่อให้แน่ใจว่า Grid ออกแบบเว็บให้ง่ายยิ่งขึ้น และเธอยังเขียนหนังสือลงในนั้นด้วย เว็บไซต์ Grid By Example เป็นแหล่งข้อมูลสำคัญสำหรับการทำความคุ้นเคยกับ Grid หลายคนคิดว่า Grid เป็นขั้นตอนปฏิวัติ การออกแบบเว็บ และตอนนี้มีการเปิดใช้โดยค่าเริ่มต้นใน Chrome เพื่อให้คุณเริ่มใช้ได้ตั้งแต่วันนี้