คำแนะนำเกี่ยวกับ 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 มีโพสต์บล็อกที่น่าสนใจเกี่ยวกับวิธีการทำเช่นนั้น.

ตัวอย่างสำหรับการทดลอง

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