คำแนะนำเกี่ยวกับ CSS Grid Layout เค้าโครงหน่วย
โมดูล CSS กริดเค้าโครง ถูกจัดส่งด้วย หน่วย CSS ใหม่ เรียกว่า เ
หน่วย. ตรงไปตรงมาที่สุดเท่าที่จะทำได้, เ
คือ ตัวย่อของคำ “เศษ”. หน่วยใหม่ทำให้สามารถแบ่งตารางเป็นคอลัมน์หรือแถวได้อย่างรวดเร็ว เป็นผลให้เกิดการสร้าง กริดที่ตอบสนองได้อย่างเต็มที่และยืดหยุ่น เกือบจะกลายเป็นเรื่องง่าย.
เนื่องจากมีการแนะนำหน่วยเศษส่วนพร้อมกับโมดูลโครงร่างแบบกริดคุณสามารถใช้มันในเบราว์เซอร์ใดก็ได้ที่ รองรับ CSS CSS. หากคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่าด้วยนี่เป็นวิธีที่ยอดเยี่ยม CSS กริดโพลี ที่ช่วยให้คุณใช้ไม่เพียง แต่ เ
หน่วย แต่คุณสมบัติตารางอื่น ๆ เช่นกัน.
การใช้งานขั้นพื้นฐาน
อันดับแรกให้ดูที่ กริดพื้นฐาน ที่ใช้หน่วยเศษส่วน เค้าโครงด้านล่างแบ่งช่องว่างออกเป็น สามคอลัมน์ที่มีความกว้างเท่ากัน และ สองแถวที่มีความสูงเท่ากัน.
HTML ที่เป็นของทำขึ้น หกคน ทำเครื่องหมายด้วย .กล่อง
ชั้น, ภายใน .เสื้อคลุม
div.
1.2.3.4.5.6.
ในการใช้โมดูล Grid Layout คุณจะต้องเพิ่ม จอแสดงผล: ตาราง;
คุณสมบัติ CSS ไปที่ wrapper ตารางแม่แบบคอลัมน์
คุณสมบัติใช้ เ
หน่วยเป็นมูลค่า อัตราส่วนของสามคอลัมน์คือ 1: 1: 1.
สำหรับแถวกริด (ตารางแม่แบบแถว
ฉันไม่ได้ใช้ เ
หน่วยตามที่เหมาะสมเท่านั้นถ้าเสื้อคลุม มีความสูงคงที่. ไม่เช่นนั้นอาจมีผลลัพธ์แปลก ๆ ในอุปกรณ์บางอย่างอย่างไรก็ตามถึงอย่างนั้น เ
หน่วย จะรักษาอัตราส่วน (และนี่มันใหญ่มาก).
ตารางช่องว่าง
คุณสมบัติ เพิ่มกริด 10px ในระหว่างกล่อง หากคุณไม่ต้องการให้มีช่องว่างให้ลบคุณสมบัตินี้.
.กระดาษห่อ display: grid; ตารางเทมเพลตคอลัมน์: 1fr 1fr 1fr; grid-template-rows: 200px 200px; กริดช่องว่าง: 10px; .box color: white; จัดข้อความ: ศูนย์; ขนาดตัวอักษร: 30px; การขยาย: 25px;
หมายเหตุ CSS ข้างต้นไม่มีการใส่สไตล์พื้นฐานเช่นสีพื้นหลัง คุณสามารถ ค้นหารหัสเต็มในการสาธิตในตอนท้ายของบทความ.
เปลี่ยนอัตราส่วน
แน่นอนคุณไม่สามารถใช้ 1: 1: 1 ได้เท่านั้น อัตราส่วนใด ๆ ที่คุณต้องการ. ด้านล่างฉันใช้ 1: 2: 1 เศษส่วน ที่ยังแบ่งพื้นที่ออกเป็น สามคอลัมน์ แต่คอลัมน์กลางจะเป็น กว้างเป็นสองเท่า ในขณะที่อีกสองคน.
ฉันยังเพิ่มมูลค่าของ ตารางช่องว่าง
เพื่อให้คุณสามารถดูว่ามันเปลี่ยนเค้าโครงอย่างไร โดยทั่วไปเบราว์เซอร์ หักช่องว่างตารางจากความกว้างวิวพอร์ต (ในตัวอย่างนี้ช่องว่างของกริดเพิ่มขึ้นสูงสุด 80px) และ หั่นส่วนที่เหลือ ตามเศษส่วนที่ระบุ.
.กระดาษห่อ display: grid; ตารางเทมเพลตคอลัมน์: 1fr 2fr 1fr; grid-template-rows: 200px 200px; grid-gap: 40px;
รวมกัน เ
กับหน่วย CSS อื่น ๆ
คุณสามารถ รวมกัน เ
หน่วยด้วย หน่วย CSS อื่น ๆ เช่นกัน ตัวอย่างเช่นในตัวอย่างด้านล่างฉันใช้ 60% 1fr 2fr
อัตราส่วนสำหรับกริดของฉัน.
ดังนั้นสิ่งนี้ทำงานอย่างไร เบราว์เซอร์กำหนด 60% ของความกว้างวิวพอร์ต ไปที่คอลัมน์แรก จากนั้นมันจะแบ่งส่วนที่เหลือของพื้นที่ออกเป็นเศษส่วน 1: 2.
สิ่งเดียวกันสามารถเขียนเป็น 60% 13.33333% 26.66667%
. แต่จริงๆแล้วทำไมทุกคนถึงต้องการใช้รูปแบบนั้น ข้อได้เปรียบอย่างมากของหน่วยเศษคือมัน ปรับปรุงการอ่านรหัส. ยิ่งไปกว่านั้น ถูกต้องสมบูรณ์, เนื่องจากรูปแบบเปอร์เซ็นต์ยังคงเพิ่มขึ้นเป็น 99.9999% เท่านั้น.
.กระดาษห่อ display: grid; ตารางเทมเพลตคอลัมน์: 60% 1fr 2fr; grid-template-rows: 200px 200px; กริดช่องว่าง: 10px;
นอกเหนือจากเปอร์เซ็นต์, คุณยังสามารถใช้หน่วย CSS อื่น ๆ พร้อมกับหน่วยเศษส่วนเช่น จุด
, px
, em
, และ REM
.
เพิ่มช่องว่างด้วย เ
ถ้าคุณไม่ต้องการให้การออกแบบของคุณรก เพิ่มพื้นที่ว่างบางส่วน ตารางของคุณ? หน่วยเศษยังมีทางออกที่ง่ายสำหรับสิ่งนั้น.
อย่างที่คุณเห็นตารางนี้ มีคอลัมน์ที่ว่างเปล่า ในขณะที่ยังคงรักษากล่องทั้งหกไว้ สำหรับรูปแบบนี้เราต้องแบ่งพื้นที่ให้สูงขึ้น เป็นสี่คอลัมน์ แทนที่จะเป็นสาม ดังนั้นเราจึงใช้ 1fr 1fr 1fr 1fr
ค่าสำหรับ ตารางแม่แบบคอลัมน์
คุณสมบัติ.
เราเพิ่มคอลัมน์ว่างใน ตารางแม่แบบพื้นที่
คุณสมบัติโดยใช้ เครื่องหมายจุด. โดยทั่วไปคุณสมบัตินี้ช่วยให้คุณ การอ้างอิงชื่อพื้นที่กริด. และคุณสามารถตั้งชื่อพื้นที่กริดด้วย ตารางพื้นที่
คุณสมบัติที่คุณต้องใช้ แยกต่างหากสำหรับแต่ละพื้นที่.
.กระดาษห่อ display: grid; ตารางเทมเพลตคอลัมน์: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; กริดช่องว่าง: 10px; grid-template-พื้นที่: "box-1 box-2. box-3" "box-4 box-5. box-6"; .box-1 กริดพื้นที่: กล่อง -1; .box-2 กริดพื้นที่: กล่อง -2; .box-3 กริดพื้นที่: กล่อง -3; .box-4 พื้นที่กริด: กล่อง -4; .box-5 กริดพื้นที่: กล่อง -5; .box-6 กริดพื้นที่: กล่อง -6;
พื้นที่ช่องว่าง ไม่จำเป็นต้องสร้างคอลัมน์, พวกเขา สามารถอยู่ได้ทุกที่ ในตาราง.
ซ้ำ ()
ฟังก์ชัน
คุณยังสามารถใช้ เ
หน่วย พร้อมกับ ซ้ำ ()
ฟังก์ชัน สำหรับ ไวยากรณ์ที่ง่ายขึ้น. , นี่ไม่จำเป็นถ้าคุณมีกริดเพียงตัวเดียว แต่มีประโยชน์เมื่อคุณต้องการ ใช้รูปแบบที่ซับซ้อน, เช่น ตารางที่ซ้อนกัน.
.กระดาษห่อ display: grid; ตารางเทมเพลตคอลัมน์: ทำซ้ำ (3, 1fr); / * grid-template-columns: 1fr 1fr 1fr; * / grid-template-rows: 200px; กริดช่องว่าง: 10px;
ทำซ้ำ (3, 1fr)
วากยสัมพันธ์ ผลลัพธ์ในเค้าโครงเดียวกัน เช่น 1fr 1fr 1fr
. เค้าโครงด้านล่างเหมือนกับตัวอย่างแรก.
ถ้าคุณ เพิ่มทวีคูณ ข้างใน ซ้ำ ()
ฟังก์ชั่นคุณจะมีคอลัมน์มากขึ้น ตัวอย่างเช่น, ทำซ้ำ (6, 1fr)
ผลลัพธ์ใน หกคอลัมน์เท่ากัน. ในกรณีนี้กล่องทั้งหมดของเรา จะอยู่ในแถวเดียวกัน, ซึ่งหมายความว่ามันเพียงพอที่จะใช้เพียงหนึ่งค่า (200px) สำหรับ ตารางแม่แบบแถว
คุณสมบัติ.
.กระดาษห่อ display: grid; ตารางเทมเพลตคอลัมน์: ทำซ้ำ (6, 1fr); grid-template-rows: 200px; กริดช่องว่าง: 10px;
คุณสามารถใช้ได้ ซ้ำ ()
มากกว่าหนึ่งครั้ง. ตัวอย่างเช่นตัวอย่างต่อไปนี้ส่งผลให้เกิดกริดซึ่งมีสามคอลัมน์สุดท้าย กว้างเป็นสองเท่า เป็นสามคนแรก.
.กระดาษห่อ display: grid; ตารางเทมเพลตคอลัมน์: ทำซ้ำ (3, 1fr) ทำซ้ำ (3, 2fr); grid-template-rows: 200px; กริดช่องว่าง: 10px;
นอกจากนี้คุณยังสามารถ รวมกัน ซ้ำ ()
กับหน่วย CSS อื่น ๆ. ตัวอย่างเช่นคุณสามารถใช้ ทำซ้ำ 200px (4, 1fr) 200px
เป็นรหัสที่ถูกต้อง.
หากคุณมีความสนใจในวิธีการ สร้างเค้าโครงที่ซับซ้อน ด้วยโมดูล CSS Grid ซ้ำ ()
ฟังก์ชั่นและ เ
หน่วย Rachel Andrew มีโพสต์บล็อกที่น่าสนใจเกี่ยวกับวิธีการทำเช่นนั้น.
ตัวอย่างสำหรับการทดลอง
ในที่สุด, นี่คือตัวอย่างที่ฉันสัญญา. มันใช้รหัสเดียวกันเป็นตัวอย่างแรกในบทความนี้ แยกมันและดูสิ่งที่คุณสามารถทำได้ด้วย เ
หน่วย.