รู้เบื้องต้นเกี่ยวกับ CSS Grid Layout Module

มันเคยเป็น ตาราง, แล้วก็ ขอบและลอย, แล้วก็ flexbox และตอนนี้ ตะแกรง: CSS นำไปสู่วิธีการใหม่และดีกว่าเสมอเพื่อลดความยุ่งยากในงานเก่า ๆ ของ การเข้ารหัสรูปแบบเว็บ. โมเดล CSS Grid Layout สามารถสร้างและอัพเดตเลย์เอาต์ ตามแนวแกนสองแกน: แนวนอนและแนวตั้ง, ส่งผลกระทบต่อทั้งความกว้างและความสูง ขององค์ประกอบ.

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

รองรับเบราว์เซอร์

ขณะที่เขียนบทความนี้โมดูล CSS Grid ได้รับการสนับสนุนโดยเบราว์เซอร์ IE และ Edge ล่าสุดเท่านั้น CSS Grid คือ ในระยะทดลอง ในเบราว์เซอร์หลักอื่น ๆ ที่คุณต้อง เปิดใช้งานการสนับสนุนด้วยตนเอง:

• Firefox: กด Shift + F2, ป้อนคำสั่งต่อไปนี้ ลงในแถบป้อนข้อมูล GCLI ที่ปรากฏที่ด้านล่างของเบราว์เซอร์: layout.css.grid.enabled ที่ตั้งค่าไว้ล่วงหน้า.
• โครเมียม: เรียกดู chrome: // ธง URL และเปิดใช้งาน คุณลักษณะแพลตฟอร์มเว็บทดลอง.

การสนับสนุนเบราว์เซอร์ที่สำคัญทั้งหมดมีแนวโน้มที่จะ มาก่อน / กลางปี ​​2560.

ตารางตัวอย่าง

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

1. จอแสดงผล: ตาราง; - องค์ประกอบคือ แปลงเป็นคอนเทนเนอร์กริดบล็อก
2. จอแสดงผล: อินไลน์กริด; - องค์ประกอบคือ แปลงเป็นคอนเทนเนอร์กริดแบบอินไลน์
3. จอแสดงผล: subgrid; - ถ้าองค์ประกอบเป็นรายการกริดมันเป็น แปลงเป็น subgrid ที่ละเว้นเทมเพลตกริดและคุณสมบัติช่องว่างกริด

เช่นเดียวกับตารางที่ประกอบด้วยเซลล์หลายตารางตารางคือ ประกอบด้วยเซลล์หลายกริด. รายการกริดคือ กำหนดให้กับชุดของเซลล์กริด ที่เรียกรวมกันว่า พื้นที่กริด.

เรากำลังจะสร้าง ตารางที่มีห้าส่วน (พื้นที่กริด): ด้านบนด้านล่างซ้ายขวาและตรงกลาง HTML ประกอบด้วย ห้า divs ภายใน div คอนเทนเนอร์.

 
 
ด้านบน
 
ซ้าย
 
ศูนย์
 
ขวา
 
ด้านล่าง
 
 

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

ชื่อพื้นที่กริด จะถูกอ้างอิงโดย ตารางพื้นที่ คุณสมบัติของรายการกริดแต่ละรายการ.

 .grid-container width: 500px; ความสูง: 500px; จอแสดงผล: ตาราง; พื้นที่เทมเพลตตาราง: "บนสุดด้านบน" "ซ้ายกลางขวา" "ล่างล่างล่าง";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left พื้นที่ตะแกรง: left;  .grid-right กริดพื้นที่: ขวา;  .grid-center grid-area: center;  

ดังนั้นรหัสนี้จะสร้าง ตารางที่มีสามแถวและคอลัมน์. ด้านบน รายการครอบครองพื้นที่ที่ครอบคลุม สามคอลัมน์ในแถวแรก และ ด้านล่าง รายการครอบคลุมมากกว่า สามคอลัมน์ในแถวสุดท้าย. แต่ละรายการ ซ้าย, ศูนย์ และ ขวา รายการที่ใช้ หนึ่งคอลัมน์ในแถวกลาง.

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

 .grid-container width: 500px; ความสูง: 500px; จอแสดงผล: ตาราง; พื้นที่เทมเพลตตาราง: "บนสุดด้านบน" "ซ้ายกลางขวา" "ล่างล่างล่าง"; ตารางเทมเพลตคอลัมน์: 100px อัตโนมัติ 100px; grid-template-rows: 50px อัตโนมัติ 150px;  

นี่คือลักษณะตาราง CSS ของเราตอนนี้ (มีสไตล์เพิ่มเติม):

ช่องว่างระหว่างรายการกริด

คุณสามารถเพิ่ม ช่องว่างระหว่างคอลัมน์และแถว การใช้ ตารางคอลัมน์ช่องว่าง และ ตารางแถวช่องว่าง, หรือทรัพย์สินของพวกเขาในระยะยาว ตารางช่องว่าง.

 .grid-container width: 500px; ความสูง: 500px; จอแสดงผล: ตาราง; พื้นที่เทมเพลตตาราง: "บนสุดด้านบน" "ซ้ายกลางขวา" "ล่างล่างล่าง"; ตารางเทมเพลตคอลัมน์: 100px อัตโนมัติ 100px; grid-template-rows: 50px อัตโนมัติ 150px; กริดช่องว่าง: 5px 5px;  

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

จัดแนวเนื้อหาตารางและรายการ

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

ขนาดแทร็ก (แถวหรือคอลัมน์) ที่เกี่ยวข้อง ย่อขนาดให้พอดีกับเนื้อหา เมื่อจัดแนว ดูภาพหน้าจอของเนื้อหากริด สอดคล้องกับค่าที่แตกต่าง ด้านล่าง.

ปรับเนื้อหา: เริ่มต้น;

ปรับเนื้อหา: สิ้นสุด;

ปรับเนื้อหา: ศูนย์;

ปรับเนื้อหา: ช่องว่างระหว่าง;

ปรับเนื้อหา: พื้นที่รอบ;

ปรับเนื้อหา: พื้นที่อย่างเท่าเทียมกัน;

จัดเรียงเนื้อหา: เริ่ม;

จัดเรียงเนื้อหา: สิ้นสุด;

align-content: center;

align-content: ช่องว่างระหว่าง;

align-content: space-around;

align-content: space-สม่ำเสมอ;

ทั้งคู่ ปรับเนื้อหา และ จัดเนื้อหา คุณสมบัติ จัดเนื้อหาทั้งหมดภายในตาราง.

ไปยัง จัดรายการแต่ละรายการภายในพื้นที่กริด, ใช้ คุณสมบัติการจัดตำแหน่งคู่อื่น ๆ: ปรับรายการที่ และ จัดรายการที่. ทั้งสองอย่างสามารถมีหนึ่งในค่าเหล่านี้: เริ่มต้น, ปลาย, ศูนย์, พื้นฐาน (จัดเรียงรายการตามแนวเส้นตารางฐานของพื้นที่) และ ยืด (รายการเต็มพื้นที่ทั้งหมด).