พอดแคสต์ CSS - 011: Grid
เลย์เอาต์ที่พบได้ทั่วไปในการออกแบบเว็บคือเลย์เอาต์ของส่วนหัว แถบด้านข้าง เนื้อความ และส่วนท้าย
ในช่วงหลายปีที่ผ่านมา หลายวิธีในการแก้เค้าโครงนี้ แต่ด้วยตารางกริด CSS ซึ่งนอกจากจะค่อนข้างตรงไปตรงมา แต่คุณมีตัวเลือกมากมาย ตารางกริดมีประโยชน์อย่างยิ่งในการรวมการควบคุม ซึ่งการปรับขนาดภายนอกให้ความยืดหยุ่นของการกำหนดขนาดที่แท้จริง จึงเหมาะกับเลย์เอาต์ประเภทนี้ เนื่องจากตารางกริดเป็นวิธีเลย์เอาต์ที่ออกแบบมาสำหรับเนื้อหา 2 มิติ นั่นคือการจัดวางสิ่งต่างๆ เป็นแถวและคอลัมน์พร้อมกัน
เมื่อสร้างเลย์เอาต์แบบตารางกริด คุณจะกำหนดตารางกริดที่มีแถวและคอลัมน์ จากนั้นวางรายการลงในตารางกริดนั้น หรืออนุญาตให้เบราว์เซอร์วางในเซลล์ที่คุณสร้างไว้โดยอัตโนมัติ มีข้อมูลมากมายให้ตั้ง แต่ด้วยภาพรวมของคุณลักษณะ คุณก็จะทำเลย์เอาต์แบบตารางกริดได้ทันที
ภาพรวม
แล้วตารางกริดใช้ทำอะไรได้บ้าง เลย์เอาต์แบบตารางกริดมีฟีเจอร์ต่อไปนี้ คุณจะได้ดูข้อมูลทั้งหมดได้ในคู่มือนี้
- คุณกำหนดตารางกริดด้วยแถวและคอลัมน์ได้ คุณเลือกวิธีปรับขนาดแทร็กแถวและคอลัมน์เหล่านี้ หรือจะตอบสนองต่อขนาดของเนื้อหาก็ได้
- ระบบจะวางรายการย่อยโดยตรงของคอนเทนเนอร์ตารางกริดไว้ในตารางกริดนี้โดยอัตโนมัติ
- หรือคุณจะวางรายการในตำแหน่งที่แน่นอนที่คุณต้องการก็ได้
- คุณสามารถตั้งชื่อเส้นและพื้นที่ในตารางกริดเพื่อทำให้การวางตำแหน่งง่ายขึ้น
- สามารถกระจายพื้นที่ว่างในที่จัดเก็บตารางกริดระหว่างแทร็กได้
- คุณสามารถจัดรายการแบบตารางกริดไว้ภายในพื้นที่ได้
คำศัพท์เกี่ยวกับตารางกริด
Grid มาพร้อมคำศัพท์ใหม่ๆ มากมาย เนื่องจากนี่เป็นครั้งแรกที่ CSS มีระบบเลย์เอาต์จริง
เส้นตาราง
ตารางกริดประกอบด้วยเส้น ซึ่งจะทำงานในแนวนอนและแนวตั้ง หากตารางกริดมี 4 คอลัมน์ จะมีบรรทัดคอลัมน์ 5 บรรทัด โดยมีอีกบรรทัดหนึ่งตามหลังคอลัมน์สุดท้าย
บรรทัดจะมีตัวเลขโดยเริ่มจาก 1 ด้วยตัวเลขตามหลังโหมดการเขียนและทิศทางสคริปต์ของคอมโพเนนต์ ซึ่งหมายความว่าคอลัมน์บรรทัดที่ 1 จะอยู่ทางซ้ายในภาษาที่อ่านจากซ้ายไปขวา เช่น ภาษาอังกฤษ และทางด้านขวาในภาษาที่อ่านจากขวาไปซ้าย เช่น อาหรับ
แทร็กตารางกริด
เส้นทางคือช่องว่างระหว่างเส้นตาราง 2 เส้น แทร็กแถวอยู่ระหว่างเส้นแถว 2 เส้น และแทร็กคอลัมน์ที่อยู่ระหว่างเส้นคอลัมน์ 2 เส้น เมื่อสร้างตารางกริด เราจะสร้างแทร็กเหล่านี้โดยกำหนดขนาดให้กับแทร็ก
เส้นตาราง
เซลล์ตารางกริดคือพื้นที่ที่เล็กที่สุดในตารางกริดซึ่งกำหนดโดยจุดร่วมของแทร็กแถวและคอลัมน์ ซึ่งก็เหมือนกับเซลล์ในตารางหรือเซลล์ในสเปรดชีต หากคุณกำหนดตารางกริดไว้และไม่ได้วางรายการใดๆ ไว้ ระบบจะวางรายการ 1 รายการลงในเซลล์ตารางกริดที่กำหนดไว้แต่ละรายการโดยอัตโนมัติ
พื้นที่ตารางกริด
เซลล์ตารางกริดหลายเซลล์เข้าด้วยกัน พื้นที่ตารางกริดสร้างขึ้นโดยการทำให้รายการครอบคลุมหลายแทร็ก
ช่องว่าง
รางน้ำหรือตรอกระหว่างทาง เครื่องมือวัดขนาดจะทำหน้าที่เหมือนแทร็กปกติ คุณไม่สามารถวางเนื้อหาไว้ในช่องว่างได้ แต่สามารถขยายรายการในตารางได้
คอนเทนเนอร์ตารางกริด
องค์ประกอบ HTML ที่ใช้ display: grid
ดังนั้นจึงสร้างบริบทการจัดรูปแบบตารางกริดใหม่สำหรับเด็กโดยตรง
.container {
display: grid;
}
รายการตารางกริด
รายการแบบตารางกริดคือรายการที่เป็นรายการย่อยโดยตรงของคอนเทนเนอร์ตารางกริด
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
แถวและคอลัมน์
หากต้องการสร้างตารางกริดพื้นฐาน คุณสามารถกำหนดตารางกริดที่มีแทร็ก 3 คอลัมน์ สองแทร็กแถวแนวนอนและช่องว่าง 10 พิกเซลระหว่างแทร็กดังต่อไปนี้
.container {
display: grid;
grid-template-columns: 5em 100px 30%;
grid-template-rows: 200px auto;
gap: 10px;
}
ตารางนี้แสดงสิ่งต่างๆ มากมายที่อธิบายไว้ในส่วนคำศัพท์ มีแทร็ก 3 คอลัมน์ แต่ละแทร็กใช้หน่วยความยาวต่างกัน โดยมี 2 แทร็กแถว เมตริกหนึ่งโดยใช้หน่วยความยาวและอีกส่วนหนึ่งเป็นอัตโนมัติ เมื่อนำมาใช้เป็นการปรับขนาดแทร็กอัตโนมัติ อาจเรียกได้ว่ามีขนาดใหญ่พอๆ กับเนื้อหา โดยค่าเริ่มต้น แทร็กจะมีขนาดอัตโนมัติ
หากองค์ประกอบที่มีคลาส .container
มีรายการย่อย
เลย์เอาต์จะอยู่บนตารางกริดนี้ทันที คุณสามารถดูการใช้งานจริงได้ในการสาธิตด้านล่าง
การวางซ้อนตารางกริดในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะช่วยให้คุณเข้าใจส่วนต่างๆ ของตาราง
เปิดการสาธิตใน Chrome
ตรวจสอบองค์ประกอบที่มีพื้นหลังสีเทา ซึ่งมีรหัส container
ไฮไลต์ตารางกริดโดยเลือกป้ายตารางกริดใน DOM ถัดจากองค์ประกอบ .container
ในแท็บ "เลย์เอาต์"
ให้เลือกหมายเลขบรรทัดที่แสดงในเมนูแบบเลื่อนลงเพื่อดูหมายเลขบรรทัดในตารางกริด
คีย์เวิร์ดการกำหนดขนาดภายใน
นอกจากมิติข้อมูลความยาวและเปอร์เซ็นต์ตามที่อธิบายไว้ในส่วนเกี่ยวกับ หน่วยวัดขนาด แบบตารางกริดสามารถใช้คีย์เวิร์ดการกำหนดขนาดที่แท้จริง คีย์เวิร์ดเหล่านี้กำหนดไว้ในข้อกำหนดเกี่ยวกับขนาดกล่อง และเพิ่มวิธีปรับขนาดช่องเพิ่มเติมใน CSS ไม่ใช่แค่แทร็กในตารางกริด
min-content
max-content
fit-content()
min-content
จะทำให้แทร็กเล็กที่สุดได้โดยที่เนื้อหาแทร็กไม่ล้น
เปลี่ยนเลย์เอาต์ตารางกริดตัวอย่างให้มีแทร็ก 3 คอลัมน์ทั้งหมดในขนาด min-content
จะทำให้คำเหล่านั้นแคบที่สุดเท่าๆ กับคำที่ยาวที่สุดในแทร็ก
max-content
จะให้ผลตรงกันข้าม
แทร็กจะมีความกว้างมากพอสำหรับเนื้อหาทั้งหมดที่จะแสดงเป็นสตริงยาวๆ แบบไม่ขาดตอน
ซึ่งอาจทำให้เกิดส่วนเกินเนื่องจากสตริงจะไม่ตัดข้อความไป
fit-content()
จะทำหน้าที่เหมือน max-content
ในตอนแรก
อย่างไรก็ตาม เมื่อแทร็กมีขนาดถึงขนาดที่คุณส่งไปยังฟังก์ชันแล้ว
เนื้อหาจะเริ่มห่อหุ้ม
ดังนั้น fit-content(10em)
จะสร้างแทร็กที่น้อยกว่า 10em
หากขนาด max-content
น้อยกว่า 10em
แต่ไม่เกิน 10em
ในการสาธิตถัดไป ให้ลองใช้การกำหนดขนาดคีย์เวิร์ดภายในแบบต่างๆ โดยการเปลี่ยนขนาดของแทร็กตารางกริด
หน่วย fr
เรามีมิติข้อมูลความยาว เปอร์เซ็นต์ และคีย์เวิร์ดใหม่เหล่านี้อยู่แล้ว
นอกจากนี้ยังมีวิธีปรับขนาดแบบพิเศษที่ใช้ได้เฉพาะในเลย์เอาต์แบบตารางกริดเท่านั้น
นี่คือหน่วย fr
ความยาวที่ยืดหยุ่นซึ่งอธิบายถึงส่วนแบ่งของพื้นที่ว่างในคอนเทนเนอร์ตารางกริด
หน่วย fr
ทำงานในลักษณะเดียวกับการใช้ flex: auto
ใน Flexbox
โดยจะกระจายพื้นที่หลังจากวางสินค้าแล้ว
ดังนั้นเพื่อให้มี 3 คอลัมน์ซึ่งแต่ละคอลัมน์ได้รับส่วนแบ่งพื้นที่ว่างเหมือนกัน
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
เมื่อหน่วยโฆษณาแชร์พื้นที่ว่างอยู่
สามารถใช้ร่วมกับช่องว่างขนาดคงที่หรือแทร็กที่มีขนาดคงที่ได้
หากต้องการมีคอมโพเนนต์ที่มีองค์ประกอบขนาดคงที่และแทร็กที่ 2 กินพื้นที่เท่าใดก็ตามที่เหลืออยู่
คุณสามารถใช้เป็นรายการติดตามของ grid-template-columns: 200px 1fr
ได้
การใช้ค่าที่แตกต่างกันสำหรับหน่วย frer จะแชร์พื้นที่ตามสัดส่วน ยิ่งมีค่ามากขึ้น ก็ยิ่งมีพื้นที่ว่างมากขึ้น ในการสาธิตด้านล่าง ให้เปลี่ยนค่าของแทร็กที่สาม
ฟังก์ชัน minmax()
ฟังก์ชันนี้หมายความว่าคุณสามารถตั้งค่าต่ำสุดและขนาดสูงสุดสำหรับแทร็กได้
ซึ่งอาจเป็นประโยชน์มาก
ถ้าเราใช้ตัวอย่างของหน่วย fr
ด้านบนซึ่งกระจายพื้นที่ที่เหลือ
อาจเขียนออกมาได้โดยใช้
minmax()
ในชื่อ minmax(auto, 1fr)
ตารางกริดจะดูที่ขนาดที่แท้จริงของเนื้อหา
แล้วกระจายพื้นที่ว่างหลังจากให้เนื้อหาเพียงพอ
ซึ่งหมายความว่าคุณอาจไม่ได้รับแทร็กที่แต่ละแทร็กมีส่วนแบ่งเท่ากัน
ของพื้นที่ว่างทั้งหมด
ในคอนเทนเนอร์ตารางกริด
ใช้ minmax เพื่อบังคับให้แทร็กมีส่วนแบ่งพื้นที่ว่างในคอนเทนเนอร์ตารางกริดเท่าๆ กันลบช่องว่าง
แทนที่ 1fr
เป็นขนาดแทร็กด้วย minmax(0, 1fr)
ซึ่งจะทำให้ขนาดต่ำสุดของแทร็กเป็น 0 ไม่ใช่ขนาดเนื้อหาขั้นต่ำ
จากนั้นตารางกริดจะนำขนาด
ที่มีทั้งหมดมาใส่ในคอนเทนเนอร์
หักขนาดที่จำเป็นในกรณีที่มีช่องว่าง
และแชร์ส่วนที่เหลือตามหน่วยโฆษณาของคุณ
หมายเหตุ repeat()
หากต้องการสร้างตารางกริดแทร็ก 12 คอลัมน์ซึ่งมีคอลัมน์เท่ากัน คุณสามารถใช้ CSS ต่อไปนี้
.container {
display: grid;
grid-template-columns:
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr);
}
หรือคุณสามารถเขียนออกมาโดยใช้
repeat()
:
.container {
display: grid;
grid-template-columns: repeat(12, minmax(0,1fr));
}
คุณใช้ฟังก์ชัน repeat()
เพื่อแสดงส่วนใดก็ได้ของข้อมูลแทร็กซ้ำ
ตัวอย่างเช่น คุณสามารถทำซ้ำรูปแบบของแทร็กได้
คุณยังมีแทร็กปกติและส่วนที่เล่นซ้ำได้ด้วย
.container {
display: grid;
grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}
auto-fill
และ auto-fit
คุณสามารถรวมทุกอย่างที่ได้เรียนรู้เกี่ยวกับการปรับขนาดแทร็ก
minmax()
และทำซ้ำ
เพื่อสร้างรูปแบบที่มีประโยชน์ด้วยเลย์เอาต์แบบตารางกริด
คุณอาจไม่ต้องการระบุจำนวนแทร็กของคอลัมน์
แต่ต้องการสร้าง ให้พอดีกับคอนเทนเนอร์ของคุณ ให้มากที่สุด
คุณสามารถบรรลุเป้าหมายนี้ได้ด้วย repeat()
และคีย์เวิร์ด auto-fill
หรือ auto-fit
ในเดโมด้านล่างตารางกริดจะสร้างแทร็ก 200 พิกเซลได้มากเท่าที่จะพอดีกับคอนเทนเนอร์
เปิดการสาธิตในหน้าต่างใหม่และดูว่าตารางกริดมีการเปลี่ยนแปลงอย่างไรเมื่อคุณเปลี่ยนขนาดวิวพอร์ต
ในการสาธิต เราจะได้แทร็กมากที่สุดเท่าที่จะพอดี
อย่างไรก็ตาม แทร็กจะไม่มีความยืดหยุ่น
คุณจะได้พื้นที่ว่างในตอนท้ายจนกว่าจะมีพื้นที่ว่างเพียงพอสำหรับแทร็กขนาด 200 พิกเซล
หากคุณเพิ่มฟังก์ชัน minmax()
คุณสามารถขอแทร็กได้มากเท่าที่ต้องการโดยต้องมีขนาดขั้นต่ำ 200 พิกเซล และไม่เกิน 1 fr
จากนั้นตารางกริดจะจัดวางแทร็ก 200 พิกเซลและกระจายพื้นที่ว่างที่เหลือให้เท่าๆ กัน
การดำเนินการนี้จะสร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ 2 มิติโดยไม่จำเป็นต้องมีคิวรี่สื่อใดๆ
มีความแตกต่างเล็กน้อยระหว่าง auto-fill
และ auto-fit
ในการเล่นการสาธิตครั้งถัดไปด้วยเลย์เอาต์แบบตารางกริดโดยใช้ไวยากรณ์ที่อธิบายไว้ข้างต้น
แต่มีรายการตารางกริดเพียง 2 รายการในคอนเทนเนอร์ตารางกริด
เมื่อใช้คีย์เวิร์ด auto-fill
คุณจะเห็นว่ามีการสร้างแทร็กเปล่า
เปลี่ยนคีย์เวิร์ดเป็น auto-fit
แล้วแทร็กจะยุบเหลือ 0
ซึ่งหมายความว่าแทร็กที่ยืดหยุ่นจะใช้พื้นที่มากขึ้นในตอนนี้
คีย์เวิร์ด auto-fill
และ auto-fit
จะทำงานในลักษณะเดียวกันทุกประการ
โดยทั้ง 2 แทร็กจะไม่มีความแตกต่างเมื่อเติมแทร็กแรกแล้ว
ตำแหน่งโฆษณาอัตโนมัติ
คุณได้เห็นการวางตำแหน่งตารางกริดอัตโนมัติในการสาธิตไปแล้ว รายการจะแสดงในตารางกริด 1 รายการต่อเซลล์ตามลำดับที่ปรากฏในแหล่งที่มา นี่คือสิ่งที่คุณต้องการสำหรับเลย์เอาต์จำนวนมาก หากคุณต้องการการควบคุมมากขึ้น มี 2-3 อย่างที่คุณทำได้ อย่างแรกคือการปรับเปลี่ยนการจัดวางตำแหน่งอัตโนมัติ
การวางรายการในคอลัมน์
ลักษณะการทำงานเริ่มต้นของเลย์เอาต์แบบตารางกริดคือการวางรายการไปตามแถว
แต่คุณสามารถทำให้รายการวางในคอลัมน์โดยใช้ grid-auto-flow: column
แทนได้
คุณต้องระบุแทร็กแถว ไม่เช่นนั้นรายการจะสร้างแทร็กคอลัมน์เฉพาะ
และจัดเลย์เอาต์ทั้งหมดไว้ในแถวยาวแถวเดียว
ค่าเหล่านี้เกี่ยวข้องกับโหมดการเขียนของเอกสาร
แถวจะทำงานในทิศทางที่ประโยคจะทำงานในโหมดการเขียนของเอกสารหรือคอมโพเนนต์เสมอ
ในการสาธิตถัดไป คุณจะเปลี่ยนโหมดค่าของ grid-auto-flow
และพร็อพเพอร์ตี้ writing-mode
ได้
การเลื่อนแทร็ก
คุณสามารถทำให้รายการบางส่วนหรือทั้งหมดในเลย์เอาต์ที่วางโดยอัตโนมัติมีความครอบคลุมมากกว่า 1 แทร็กได้
ใช้คีย์เวิร์ด span
และจำนวนบรรทัดเพื่อขยายเป็นค่าสำหรับ grid-column-end
หรือ grid-row-end
.item {
grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}
เนื่องจากคุณไม่ได้ระบุ grid-column-start
ค่านี้ใช้ค่าเริ่มต้น auto
และเป็นไปตามกฎตำแหน่งอัตโนมัติ
นอกจากนี้ คุณยังระบุสิ่งเดียวกันโดยใช้ชวเลข grid-column
ได้ด้วย ดังนี้
.item {
grid-column: auto / span 2;
}
เติมเต็มช่องว่าง
เลย์เอาต์ที่วางโดยอัตโนมัติซึ่งมีบางรายการครอบคลุมหลายแทร็ก
อาจทำให้เกิดตารางกริดที่มีเซลล์ที่ไม่ได้รับโฆษณา
ลักษณะการทำงานเริ่มต้นของเลย์เอาต์แบบตารางกริดที่มีเลย์เอาต์ที่วางโดยอัตโนมัติทั้งหมด
คือต้องก้าวไปข้างหน้าเสมอ
ระบบจะวางรายการตามลำดับที่อยู่ในแหล่งที่มา
หรือการแก้ไขใดๆ ในพร็อพเพอร์ตี้ order
หากมีพื้นที่ว่างไม่พอสำหรับวางสินค้า
ตารางกริดจะเหลือช่องว่างและไปยังแทร็กถัดไป
การสาธิตถัดไปจะแสดงลักษณะการทำงานนี้
ช่องทำเครื่องหมายจะใช้โหมดการบรรจุหีบห่อแบบหนาแน่น
เปิดใช้ค่านี้ได้โดยการระบุค่า dense
ให้กับ grid-auto-flow
เมื่อมีค่านี้แล้ว
ตารางกริดจะนำรายการมาไว้ในเลย์เอาต์และนำมาใช้เพื่อเติมเต็มช่องว่าง
ซึ่งหมายความว่าการแสดงผลอาจยกเลิกการเชื่อมต่อกับลำดับเชิงตรรกะ
การวางรายการ
คุณมีฟังก์ชันมากมายจาก CSS Grid อยู่แล้ว เรามาดูกันว่าเราจัดตำแหน่งรายการบนตารางกริดที่เราสร้างขึ้นอย่างไร
สิ่งแรกที่ต้องจำไว้คือ เลย์เอาต์ตารางกริด CSS จะอิงตามตารางกริดที่มีหมายเลขกำกับ วิธีที่ง่ายที่สุดในการวางสิ่งต่างๆ ลงในตารางกริดคือการวางสิ่งต่างๆ จากเส้นหนึ่งไปยังอีกเส้นหนึ่ง คุณจะได้ค้นพบวิธีอื่นๆ ในการวางรายการในคู่มือนี้ แต่คุณก็เข้าถึงเส้นตัวเลขเหล่านั้นได้เสมอ
พร็อพเพอร์ตี้ที่คุณใช้เพื่อวางรายการตามหมายเลขบรรทัดได้มีดังนี้
โดยมีชวเลขซึ่งอนุญาตให้คุณตั้งค่าทั้งบรรทัดเริ่มต้นและบรรทัดสิ้นสุดได้พร้อมกัน
ในการวางรายการ ให้ตั้งค่าเส้นเริ่มต้นและจุดสิ้นสุดของพื้นที่ตารางซึ่งควรวางรายการ
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px 100px);
}
.item {
grid-column-start: 1; /* start at column line 1 */
grid-column-end: 4; /* end at column line 4 */
grid-row-start: 2; /*start at row line 2 */
grid-row-end: 4; /* end at row line 4 */
}
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สามารถให้คำแนะนำแบบภาพสำหรับบรรทัดเพื่อตรวจสอบตำแหน่งที่จะแสดงรายการของคุณ
หมายเลขบรรทัดจะยึดตามโหมดการเขียนและทิศทางของคอมโพเนนต์ ในการสาธิตครั้งต่อไป ให้เปลี่ยนโหมดหรือทิศทางการเขียน เพื่อดูว่าตำแหน่งของรายการจะสอดคล้องกับลักษณะการไหลของข้อความอย่างไร
กองซ้อนรายการ
เมื่อใช้การกำหนดตำแหน่งตามเส้น คุณจะวางรายการลงในเซลล์ตารางกริดเดียวกันได้
ซึ่งหมายความว่าคุณสามารถซ้อนรายการ
หรือทำให้รายการหนึ่งทับซ้อนกันบางส่วน
รายการที่ปรากฏภายหลังในแหล่งที่มาจะแสดงที่ด้านบนของรายการที่ปรากฏก่อน
คุณสามารถเปลี่ยนลำดับการเรียงซ้อนนี้ได้โดยใช้ z-index
เช่นเดียวกับรายการที่กำหนดตำแหน่ง
หมายเลขบรรทัดลบ
เมื่อคุณสร้างตารางกริดโดยใช้ grid-template-rows
และ grid-template-columns
คุณสร้างสิ่งที่เรียกว่าตารางกริด Explicit ได้
นี่คือตารางกริดที่คุณได้กำหนดและกำหนดขนาดให้กับแทร็ก
บางครั้งคุณมีรายการที่แสดงอยู่นอกตารางกริดที่ชัดเจนนี้
ตัวอย่างเช่น
คุณอาจกำหนดแทร็กคอลัมน์ แล้วเพิ่มรายการในตารางหลายๆ แถวโดยไม่ต้องกำหนดแทร็กแถว
โดยค่าเริ่มต้น แทร็กจะถูกปรับขนาดโดยอัตโนมัติ
คุณอาจวางรายการโดยใช้ grid-column-end
ที่อยู่นอกตารางกริดกำหนดไว้อย่างชัดแจ้งก็ได้
ในทั้ง 2 กรณีนี้ ตารางกริดจะสร้างแทร็กเพื่อทำให้เลย์เอาต์ใช้งานได้
และแทร็กเหล่านี้จะเรียกว่าตารางกริดแบบโดยนัย
ซึ่งโดยส่วนใหญ่แล้วจะไม่สร้างความแตกต่างใดๆ หากคุณทำงานกับตารางกริดแบบโดยนัยหรือแบบโจ่งแจ้ง อย่างไรก็ตาม ตำแหน่งแบบอิงตามบรรทัดคุณอาจพบความแตกต่างหลักระหว่างตำแหน่งทั้งสอง
เมื่อใช้จำนวนบรรทัดติดลบ คุณจะวางรายการจากบรรทัดสุดท้ายของตารางกริดที่ชัดเจนได้
วิธีนี้มีประโยชน์หากคุณต้องการให้รายการครอบคลุมตั้งแต่บรรทัดแรกไปจนถึงบรรทัดคอลัมน์สุดท้าย
ในกรณีดังกล่าว คุณใช้ grid-column: 1 / -1
ได้
รายการจะขยายในตารางกริดที่ชัดเจน
อย่างไรก็ตาม วิธีนี้ใช้ได้เฉพาะกับตารางกริดที่ชัดเจนเท่านั้น ใช้เลย์เอาต์ของรายการที่วางโดยอัตโนมัติ 3 แถว ที่คุณต้องการให้รายการแรกยาวไปถึงเส้นสุดท้ายของตารางกริด
คุณอาจคิดว่าสามารถให้ grid-row: 1 / -1
รายการนั้น
ในการสาธิตด้านล่าง คุณจะเห็นว่าวิธีนี้ไม่ได้ผล
ระบบจะสร้างแทร็กในตารางกริดแบบไม่เจาะจงปลายทาง
ไม่มีวิธีไปถึงจุดสิ้นสุดของตารางกริดโดยใช้ -1
การปรับขนาดแทร็กโดยนัย
แทร็กที่สร้างขึ้นในตารางกริดแบบโดยนัยจะได้รับการปรับขนาดโดยอัตโนมัติโดยค่าเริ่มต้น
แต่ถ้าต้องการควบคุมขนาดของแถว
ให้ใช้
grid-auto-rows
และสำหรับคอลัมน์
grid-auto-columns
วิธีสร้างแถวโดยนัยทั้งหมดที่ขนาดขั้นต่ำ 10em
และขนาดสูงสุด auto
มีดังนี้
.container {
display: grid;
grid-auto-rows: minmax(10em, auto);
}
เพื่อสร้างคอลัมน์โดยนัยที่มีรูปแบบเป็นแทร็กกว้าง 100 พิกเซล และ 200 พิกเซล ในกรณีนี้ คอลัมน์โดยนัยแรกจะเป็น 100px 200 พิกเซลที่สอง 100 พิกเซลที่สาม เป็นต้น
.container {
display: grid;
grid-auto-columns: 100px 200px;
}
เส้นตารางกริดที่มีชื่อ
จะช่วยให้วางรายการในเลย์เอาต์ได้ง่ายขึ้นหากเส้นมีชื่อแทนที่จะเป็นตัวเลข คุณตั้งชื่อเส้นบนตารางกริดได้โดยเพิ่มชื่อที่ต้องการระหว่างวงเล็บเหลี่ยม โดยจะเพิ่มได้หลายชื่อ โดยคั่นด้วยการเว้นวรรคในวงเล็บเดียวกัน เมื่อตั้งชื่อบรรทัดแล้ว ชื่อบรรทัดเหล่านั้นจะใช้แทนตัวเลขได้
.container {
display: grid;
grid-template-columns:
[main-start aside-start] 1fr
[aside-end content-start] 2fr
[content-end main-end]; /* a two column layout */
}
.sidebar {
grid-column: aside-start / aside-end;
/* placed between line 1 and 2*/
}
footer {
grid-column: main-start / main-end;
/* right across the layout from line 1 to line 3*/
}
พื้นที่เทมเพลตตารางกริด
คุณยังสามารถตั้งชื่อพื้นที่ของตารางกริดและวางรายการลงในพื้นที่ที่มีชื่อเหล่านั้นได้อีกด้วย นี่เป็นเทคนิคที่ดีมากเนื่องจากจะช่วยให้คุณเห็นว่าคอมโพเนนต์มีลักษณะอย่างไรใน CSS
ในการเริ่มต้น ตั้งชื่อรายการย่อยโดยตรงของคอนเทนเนอร์ตารางกริดโดยใช้พารามิเตอร์
พร็อพเพอร์ตี้ grid-area
:
header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
footer {
grid-area: footer;
}
ชื่อสามารถเป็นอะไรก็ได้ที่คุณชอบ นอกเหนือจากคีย์เวิร์ด auto
และ span
เมื่อตั้งชื่อรายการทั้งหมดแล้ว
ให้ใช้
grid-template-areas
เพื่อกำหนดว่าแต่ละรายการจะขยายในเซลล์ตารางกริดใด
แต่ละแถวจะกำหนดไว้ในเครื่องหมายคำพูด
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar footer footer footer";
}
มีกฎ 2-3 ข้อเมื่อใช้ grid-template-areas
- ค่าต้องเป็นตารางกริดที่สมบูรณ์โดยไม่มีเซลล์ว่าง
- ให้ตั้งชื่อแทร็กอีกครั้งหากต้องการขยายแทร็ก
- พื้นที่ที่สร้างโดยการตั้งชื่อซ้ำจะต้องเป็นรูปสี่เหลี่ยมผืนผ้าและตัดการเชื่อมต่อไม่ได้
หากคุณละเมิดกฎข้อใดข้อหนึ่งข้างต้น ระบบจะถือว่าค่านี้ไม่ถูกต้องและทิ้งไป
หากต้องการเว้นช่องว่างในตารางกริด ให้ใช้ .
หรือหลายค่าโดยไม่มีช่องว่างระหว่างกัน
ตัวอย่างเช่น หากเซลล์แรกในตารางว่างเปล่า ฉันสามารถเพิ่มชุดอักขระ .
ตัวได้
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"....... header header header"
"sidebar content content content"
"sidebar footer footer footer";
}
เมื่อเลย์เอาต์ทั้งหมดถูกกำหนดไว้ในที่เดียว
ช่วยให้กำหนดเลย์เอาต์ใหม่ด้วยคิวรี่สื่อได้ง่ายขึ้น
ในตัวอย่างถัดไป ฉันได้สร้างเลย์เอาต์ 2 คอลัมน์ซึ่งย้ายไปยัง 3 คอลัมน์
โดยกำหนดค่า grid-template-columns
และ grid-template-areas
ใหม่
เปิดตัวอย่างในหน้าต่างใหม่เพื่อเล่นขนาดวิวพอร์ตและดูการเปลี่ยนแปลงเลย์เอาต์
คุณยังจะเห็นได้ว่าพร็อพเพอร์ตี้ grid-template-areas
เกี่ยวข้องกับ writing-mode
และทิศทางอย่างไร
เช่นเดียวกับวิธีตารางกริดอื่นๆ
พร็อพเพอร์ตี้ของชวเลข
มีพร็อพเพอร์ตี้ย่อ 2 รายการซึ่งให้คุณตั้งค่าพร็อพเพอร์ตี้ตารางกริดหลายรายการได้ในครั้งเดียว สิ่งเหล่านี้อาจดูน่าสับสนอยู่บ้างจนกว่าจะลงรายละเอียดว่าผสมกันอย่างไร คุณสามารถเลือกใช้หรือต้องการใช้ Longhands ก็ได้
grid-template
grid-template
พร็อพเพอร์ตี้เป็นชื่อย่อสำหรับ grid-template-rows
, grid-template-columns
และ grid-template-areas
ระบบจะกำหนดแถวก่อน
พร้อมกับค่าของ grid-template-areas
ระบบจะเพิ่มการปรับขนาดคอลัมน์หลัง /
.container {
display: grid;
grid-template:
"head head head" minmax(150px, auto)
"sidebar content content" auto
"sidebar footer footer" auto / 1fr 1fr 1fr;
}
ที่พัก grid
แห่ง
grid
ชวเลขสามารถใช้ในลักษณะเดียวกับชวเลข grid-template
ได้
เมื่อใช้วิธีนี้ ระบบจะรีเซ็ตคุณสมบัติตารางกริดอื่นๆ ที่เครื่องมือยอมรับเป็นค่าเริ่มต้น
ตัวอย่างทั้งหมดได้แก่
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
คุณสามารถใช้ชวเลขนี้เพื่อกำหนดลักษณะการทำงานของตารางกริดโดยนัยได้ เช่น
.container {
display: grid;
grid: repeat(2, 80px) / auto-flow 120px;
}
การจัดข้อความ
เลย์เอาต์แบบตารางกริดใช้คุณสมบัติการปรับแนวแบบเดียวกับที่คุณได้เรียนรู้จากคำแนะนำ
flexbox
ในตารางกริด คุณสมบัติที่ขึ้นต้นด้วย justify-
จะใช้บนแกนแทรกในบรรทัดเสมอ
ทิศทางที่ประโยคจะทำงานในโหมดการเขียน
คุณสมบัติที่ขึ้นต้นด้วย align-
จะใช้บนแกนบล็อก
ทิศทางการวางบล็อกในโหมดการเขียน
justify-content
และalign-content
: กระจายพื้นที่เพิ่มเติมในคอนเทนเนอร์ตารางกริดรอบๆ หรือระหว่างแทร็กjustify-self
และalign-self
: จะมีผลกับรายการแบบตารางกริด เพื่อย้ายไปภายในพื้นที่ตารางกริดที่วางอยู่justify-items
และalign-items
: ใช้กับคอนเทนเนอร์แบบตารางกริดเพื่อตั้งค่าพร็อพเพอร์ตี้justify-self
ทั้งหมดในรายการนั้น
ทำให้พื้นที่ว่างมากขึ้น
ในการสาธิตนี้ ตารางกริดมีขนาดใหญ่กว่าพื้นที่ที่จำเป็นสำหรับการวางเส้นทางความกว้างคงที่
ซึ่งหมายความว่าเรามีพื้นที่ทั้งในมิติข้อมูลแบบอินไลน์และบล็อคของตารางกริด
ลองใช้ค่า align-content
และ justify-content
ที่แตกต่างกันเพื่อดูลักษณะการทำงานของแทร็ก
โปรดสังเกตช่องว่างที่เพิ่มขึ้นเมื่อใช้ค่า เช่น space-between
และรายการในตารางกริดใดก็ตามที่ครอบคลุม 2 แทร็กจะเติบโตขึ้นด้วยเพื่อดูดซับพื้นที่เพิ่มเติมที่เพิ่มเข้ามา
การย้ายเนื้อหาไปรอบๆ
รายการที่มีสีพื้นหลังจะแสดงเต็มพื้นที่ตารางกริดที่วางอยู่
เนื่องจากค่าเริ่มต้นของ justify-self
และ align-self
คือ stretch
ในการสาธิต ให้เปลี่ยนค่าของ justify-items
และ align-items
เพื่อดูว่าการดำเนินการนี้เปลี่ยนเลย์เอาต์อย่างไร
พื้นที่ตารางกริดไม่มีการเปลี่ยนแปลงขนาด
แต่จะมีการย้ายตำแหน่งภายในพื้นที่ที่กำหนดแทน
ตรวจสอบความเข้าใจ
ทดสอบความรู้เรื่องตารางกริด
ข้อใดต่อไปนี้คือข้อกำหนดของตารางกริด CSS
main { display: grid; }
ทิศทางเลย์เอาต์เริ่มต้นของตารางกริดคืออะไร
auto-fit
และ auto-fill
แตกต่างกันอย่างไร
auto-fit
จะยืดคอนเทนเนอร์ให้พอดีกับเด็ก โดยที่ auto-fill
จะยืดคอนเทนเนอร์เด็กให้พอดีกับคอนเทนเนอร์auto-fit
จะยืดเซลล์ให้พอดีกับคอนเทนเนอร์ โดยที่ auto-fill
จะไม่ยืดmin-content
คืออะไร
max-content
คืออะไร
ตำแหน่งอัตโนมัติคืออะไร
grid-area
และวางไว้ในเซลล์นั้นแหล่งข้อมูล
คู่มือนี้จะให้ภาพรวมเกี่ยวกับส่วนต่างๆ ของข้อกำหนดเลย์เอาต์แบบตารางกริด หากต้องการทราบข้อมูลเพิ่มเติม โปรดดูแหล่งข้อมูลต่อไปนี้