พอดแคสต์ CSS - 011: Grid
เลย์เอาต์ที่ใช้กันทั่วไปในการออกแบบเว็บคือเลย์เอาต์ของส่วนหัว แถบด้านข้าง เนื้อความ และส่วนท้าย
ตลอดหลายปีที่ผ่านมา มีหลายวิธีในการแก้ปัญหาเลย์เอาต์นี้ แต่ในตารางกริด CSS ไม่เพียงแค่เป็นวิธีที่ค่อนข้างตรงไปตรงมา แต่ยังมีตัวเลือกอีกมากมาย ตารางกริดมีประโยชน์อย่างยิ่งในการรวมการควบคุมที่การปรับขนาดภายนอกให้ความยืดหยุ่นในการปรับขนาดภายใน ซึ่งทำให้เหมาะสำหรับเลย์เอาต์ประเภทนี้ เนื่องจากตารางกริดเป็นวิธีการจัดวางที่ออกแบบมาสำหรับเนื้อหา 2 มิติ นั่นคือการจัดวางสิ่งต่างๆ ในแถวและคอลัมน์ในเวลาเดียวกัน
เมื่อสร้างเลย์เอาต์แบบตารางกริด คุณจะต้องกำหนดตารางกริดที่มีแถวและคอลัมน์ จากนั้นคุณจะวางรายการลงในตารางกริดนั้น หรือให้เบราว์เซอร์วางรายการลงในเซลล์ที่คุณสร้างโดยอัตโนมัติ คุณยังมีตารางอยู่มากมาย แต่พอมีภาพรวมของสิ่งที่ใช้ได้ คุณก็จะสร้างเลย์เอาต์แบบตารางกริดได้ทันที
ภาพรวม
แล้วคุณจะใช้ตารางกริดทำอะไรได้บ้าง เลย์เอาต์แบบตารางกริดมีฟีเจอร์ต่อไปนี้ ซึ่งคุณจะได้เรียนรู้เกี่ยวกับทั้งหมดนี้ในคู่มือนี้
- คุณกำหนดตารางกริดด้วยแถวและคอลัมน์ได้ คุณเลือกวิธีปรับขนาดแทร็กในแถวและคอลัมน์เหล่านี้ หรือจะตอบสนองต่อขนาดของเนื้อหาก็ได้
- ระบบจะวางตำแหน่งย่อยโดยตรงของคอนเทนเนอร์ตารางกริดลงในตารางกริดนี้โดยอัตโนมัติ
- หรือคุณจะวางรายการต่างๆ ในตำแหน่งที่เจาะจงก็ได้
- สามารถตั้งชื่อเส้นและพื้นที่ในตารางกริดเพื่อทำให้การวางตำแหน่งง่ายขึ้น
- สามารถกระจายพื้นที่ว่างในคอนเทนเนอร์ตารางกริดไปตามแทร็กต่างๆ ได้
- โดยสามารถจัดเรียงรายการตารางกริดภายในพื้นที่ได้
คำศัพท์เกี่ยวกับตารางกริด
Grid มาพร้อมกับคำศัพท์ใหม่ๆ จำนวนมากเนื่องจากเป็นครั้งแรกที่ CSS ใช้งานระบบเลย์เอาต์จริง
เส้นตาราง
ตารางกริดประกอบด้วยเส้น ต่างๆ ที่แสดงในแนวนอนและแนวตั้ง หากตารางกริดมี 4 คอลัมน์ ก็จะมี 5 คอลัมน์ที่มี 5 คอลัมน์หลังจากคอลัมน์สุดท้าย
เส้นจะมีลำดับเลขเริ่มจาก 1 โดยมีลำดับตัวเลขตามโหมดการเขียนและทิศทางสคริปต์ของคอมโพเนนต์ ซึ่งหมายความว่าคอลัมน์บรรทัดที่ 1 จะอยู่ทางซ้ายในภาษาที่อ่านจากซ้ายไปขวา เช่น อังกฤษ และทางขวามือในภาษาที่อ่านจากขวาไปซ้าย เช่น ภาษาอาหรับ
แทร็กตารางกริด
แทร็กคือช่องว่างระหว่างเส้นตารางกริด 2 เส้น แทร็กแถวอยู่ระหว่าง 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 คอลัมน์ แทร็กแถว 2 แทร็ก และระยะห่างระหว่างแทร็ก 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
ภายในแท็บ "เลย์เอาต์"
ให้เลือกหมายเลขบรรทัดที่แสดงในเมนูแบบเลื่อนลงเพื่อดูหมายเลขบรรทัดในตารางกริด
![ตามที่อธิบายไว้ในคำบรรยายวิดีโอและวิธีการ](https://web.dev/static/learn/css/grid/image/as-described-the-caption-3a7c065047c37.jpg?authuser=6&hl=th)
การกำหนดขนาดภายในคีย์เวิร์ด
นอกจากมิติข้อมูลความยาวและเปอร์เซ็นต์ตามที่อธิบายไว้ในส่วนหน่วยการวัดขนาดแล้ว แทร็กตารางกริดยังใช้คีย์เวิร์ดการปรับขนาดภายในได้ คีย์เวิร์ดเหล่านี้ระบุไว้ในข้อกำหนดการกำหนดขนาดกล่อง และเพิ่มเมธอดของช่องสำหรับปรับขนาดใน 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;
}
เมื่อหน่วย fr แชร์พื้นที่ว่าง
จึงสามารถนำไปรวมกับช่องว่างขนาดคงที่หรือแทร็กที่มีขนาดคงที่ได้
หากต้องการให้คอมโพเนนต์ที่มีองค์ประกอบขนาดคงที่และแทร็กที่ 2 ที่กินพื้นที่ว่าง
คุณใช้เป็นแทร็กลิสต์ของ grid-template-columns: 200px 1fr
ได้
การใช้ค่าที่แตกต่างกันสำหรับหน่วย fr จะใช้พื้นที่ตามสัดส่วน ค่าที่มีขนาดใหญ่จะทำให้มีพื้นที่มากขึ้น ในการสาธิตด้านล่าง ให้เปลี่ยนค่าของแทร็กที่ 3
ฟังก์ชัน minmax()
ฟังก์ชันนี้หมายความว่าคุณสามารถตั้งค่าขนาดต่ำสุดและสูงสุดของแทร็กได้
วิธีนี้เป็นประโยชน์มาก
หากเรานำตัวอย่างหน่วย fr
ด้านบนที่กระจายพื้นที่ที่เหลือมาเขียน อาจเขียนออกมาโดยใช้ minmax()
เป็น minmax(auto, 1fr)
ตารางกริดจะดูที่ขนาดภายในเนื้อหา จากนั้นจะกระจายพื้นที่ว่างหลังจากให้เนื้อหามีพื้นที่ว่างเพียงพอ
ซึ่งหมายความว่าคุณอาจไม่ได้รับแทร็กที่แต่ละแทร็กมีส่วนแบ่งที่เท่ากันของพื้นที่ว่างทั้งหมดในคอนเทนเนอร์ตารางกริด
หากต้องการบังคับให้แทร็กได้รับส่วนแบ่งที่เท่ากันของพื้นที่ว่างในคอนเทนเนอร์ตารางกริดลบช่องว่าง ให้ใช้ minmax
แทนที่ 1fr
เป็นขนาดแทร็กด้วย minmax(0, 1fr)
ซึ่งจะทำให้ขนาดต่ำสุดของแทร็กเป็น 0 ไม่ใช่ขนาดเนื้อหาขั้นต่ำ
จากนั้นตารางกริดจะนำขนาดที่มีทั้งหมดในคอนเทนเนอร์
มาหักขนาดที่จำเป็นสำหรับช่องว่าง
แล้วแชร์ส่วนที่เหลือตามหน่วย fr
เครื่องหมาย 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 พิกเซลและไม่เกิน 1fr
จากนั้นตารางกริดจะแสดงแทร็กขนาด 200 พิกเซลและกระจายพื้นที่ที่เหลือให้เท่าๆ กัน
วิธีนี้จะสร้างรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์แบบ 2 มิติโดยไม่จำเป็นต้องใช้คำค้นหาสื่อ
มีความแตกต่างเล็กน้อยระหว่าง auto-fill
และ auto-fit
ในการเล่นเดโมครั้งถัดไปด้วยเลย์เอาต์แบบตารางกริดโดยใช้ไวยากรณ์ที่อธิบายข้างต้น
แต่มีรายการตารางกริดเพียง 2 รายการในคอนเทนเนอร์แบบตารางกริด
เมื่อใช้คีย์เวิร์ด auto-fill
คุณจะเห็นว่ามีการสร้างแทร็กเปล่าแล้ว
เปลี่ยนคีย์เวิร์ดเป็น auto-fit
และยุบแทร็กเป็นขนาด 0
ซึ่งหมายความว่าแทร็กที่ยืดหยุ่นจะมีขนาดพอใช้พื้นที่
คีย์เวิร์ด auto-fill
และ auto-fit
จะทํางานในลักษณะเดียวกัน
โดยจะไม่มีความแตกต่างใดๆ เมื่อมีการเติมโฆษณาลงในแทร็กแรก
ตำแหน่งอัตโนมัติ
ที่ผ่านมาคุณจะเห็นตำแหน่งโฆษณาตารางกริดที่ใช้ระบบอัตโนมัติในการสาธิตไปแล้ว รายการจะแสดงในตาราง 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
หากมีพื้นที่ไม่เพียงพอที่จะวางรายการ
ตารางกริดจะเว้นช่องว่างและเลื่อนไปยังแทร็กถัดไป
การสาธิตถัดไปจะแสดงพฤติกรรมนี้
ช่องทำเครื่องหมายจะใช้โหมดการบรรจุหีบห่อแบบหนาแน่น
ซึ่งทำได้โดยกำหนดค่า grid-auto-flow
เป็น dense
เมื่อใช้ค่านี้แล้ว
ตารางกริดจะนำรายการมาไว้ในเลย์เอาต์ในภายหลังและใช้เพื่อเติมเต็มช่องว่าง
ซึ่งอาจหมายความว่าจอแสดงผลถูกตัดการเชื่อมต่อจากลำดับเชิงตรรกะ
การสั่งซื้อ
คุณมีฟังก์ชันจำนวนมากจาก CSS Grid อยู่แล้ว มาดูวิธีที่เราวางตำแหน่งรายการบนตารางกริดที่สร้างขึ้นกัน
สิ่งแรกที่ต้องจำไว้คือ CSS Grid Layout จะใช้ตารางกริดที่มีเส้นลำดับเลข วิธีที่ง่ายที่สุดในการวางสิ่งต่างๆ ลงในตารางกริดคือ วางงานจากบรรทัดหนึ่งไปยังอีกบรรทัดหนึ่ง คุณจะได้พบกับวิธีอื่นๆ ในการวางรายการในคู่มือนี้ แต่คุณสามารถเข้าถึงเส้นที่มีตัวเลขได้ตลอด
คุณสมบัติที่คุณสามารถใช้เพื่อวางรายการตามหมายเลขบรรทัด ได้แก่
โดยมีชวเลขที่ช่วยให้คุณกำหนดทั้งบรรทัดเริ่มต้นและบรรทัดสิ้นสุดพร้อมกันได้
ในการวางรายการ ให้ตั้งค่าเริ่มต้นและบรรทัดสุดท้ายของพื้นที่ตารางกริดที่ควรวางไว้
.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
เป็นการสร้างสิ่งที่เรียกว่าตารางกริดที่อาจไม่เหมาะสม
นี่คือตารางกริดที่คุณได้กำหนดและกำหนดขนาดให้กับแทร็กแล้ว
บางครั้งคุณจะมีรายการที่แสดงนอกตารางที่ชัดเจนนี้
เช่น คุณอาจกำหนดแทร็กคอลัมน์ แล้วเพิ่มรายการตารางกริดหลายแถวได้โดยไม่ต้องกำหนดแทร็กแถว
แทร็กจะมีขนาดโดยอัตโนมัติโดยค่าเริ่มต้น
คุณอาจวางรายการโดยใช้ 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 พิกเซล ในกรณีนี้ คอลัมน์โดยนัยแรกจะเป็น 100 พิกเซล, 200 พิกเซลที่ 2, 100 พิกเซลที่ 3 เป็นต้น
.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";
}
มีกฎบางอย่างเมื่อใช้ 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 รายการที่ให้คุณตั้งค่าพร็อพเพอร์ตี้ของตารางกริดหลายๆ แบบได้ในครั้งเดียว ซึ่งอาจดูสับสนเล็กน้อยจนกว่าจะดูรายละเอียดทั้งหมดว่าทำงานร่วมกันอย่างไร ไม่ว่าจะอยากใช้หรืออยากใช้เส้นยาวก็ขึ้นอยู่กับคุณ
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; }
ทิศทางการจัดวางเริ่มต้นของตารางกริดคือเท่าใด
grid-auto-flow: column
อยู่แล้ว เลย์เอาต์จะเป็นแบบคอลัมน์มากกว่าตารางกริดauto-fit
และ auto-fill
แตกต่างกันอย่างไร
auto-fit
จะยืดเซลล์ให้พอดีกับคอนเทนเนอร์ ซึ่ง auto-fill
ไม่สามารถทำได้auto-fill
วางรายการลงในเทมเพลตให้มากที่สุดโดยไม่ต้องยืดขยาย ความพอดีช่วยให้มีขนาดพอดีauto-fit
จะยืดคอนเทนเนอร์ให้พอดีกับคอนเทนเนอร์โดย auto-fill
จะทำให้เด็กพอดีกับคอนเทนเนอร์min-content
คืออะไร
min-content
จะสัมพัทธ์กับคำและรูปภาพในช่องmin-content
หมายถึงอะไรmin-content
max-content
คืออะไร
max-content
หมายถึงอะไรmin-content
ตำแหน่งอัตโนมัติคืออะไร
grid-area
ของรายการย่อยในตารางกริดและนำไปวางในเซลล์นั้นแหล่งข้อมูล
คู่มือนี้จะให้ภาพรวมของส่วนต่างๆ ของข้อกำหนดเลย์เอาต์ตารางกริด หากต้องการทราบข้อมูลเพิ่มเติม โปรดดูแหล่งข้อมูลต่อไปนี้