The CSS Podcast - 011: Grid
เลย์เอาต์ที่พบบ่อยมากในการออกแบบเว็บคือเลย์เอาต์ส่วนหัว แถบด้านข้าง เนื้อหา และส่วนท้าย
ในช่วงหลายปีที่ผ่านมา เราได้พบวิธีการมากมายในการแก้ปัญหาเลย์เอาต์นี้ แต่การใช้ CSS Grid ไม่เพียงแต่จะค่อนข้างตรงไปตรงมาเท่านั้น แต่คุณยังมีตัวเลือกมากมาย ตารางมีประโยชน์อย่างยิ่งในการรวมการควบคุมที่การปรับขนาดภายนอกมอบให้เข้ากับความยืดหยุ่นของการปรับขนาดภายใน ซึ่งทำให้เหมาะสําหรับเลย์เอาต์ประเภทนี้ เนื่องจากตารางกริดเป็นวิธีการจัดวางที่ออกแบบมาสำหรับเนื้อหา 2 มิติ กล่าวคือ การจัดวางสิ่งต่างๆ ในแถวและคอลัมน์พร้อมกัน
เมื่อสร้างเลย์เอาต์ตารางกริด คุณจะกําหนดตารางกริดด้วยแถวและคอลัมน์ จากนั้นวางรายการลงในตารางกริดนั้น หรืออนุญาตให้เบราว์เซอร์วางรายการลงในเซลล์ที่คุณสร้างขึ้นโดยอัตโนมัติ ตารางกริดมีตัวเลือกมากมาย แต่ภาพรวมของสิ่งที่มีให้จะช่วยให้คุณสร้างเลย์เอาต์ตารางกริดได้อย่างรวดเร็ว
ภาพรวม
คุณใช้ตารางกริดทำอะไรได้บ้าง เลย์เอาต์ตารางกริดมีฟีเจอร์ต่อไปนี้ คุณจะได้เรียนรู้เกี่ยวกับฟีเจอร์ทั้งหมดในคู่มือนี้
- ตารางกริดจะกําหนดได้ด้วยแถวและคอลัมน์ คุณเลือกวิธีปรับขนาดแทร็กแถวและคอลัมน์เหล่านี้ได้ หรือจะให้แทร็กเหล่านี้ปรับขนาดตามขนาดของเนื้อหาก็ได้
- ระบบจะวางองค์ประกอบย่อยโดยตรงของคอนเทนเนอร์ตารางกริดลงในตารางกริดนี้โดยอัตโนมัติ
- หรือจะวางสิ่งของในตำแหน่งที่ต้องการก็ได้
- คุณสามารถตั้งชื่อเส้นและพื้นที่ในตารางกริดเพื่อให้วางตำแหน่งได้ง่ายขึ้น
- คุณสามารถกระจายพื้นที่ว่างในคอนเทนเนอร์ตารางกริดระหว่างแทร็กต่างๆ ได้
- รายการตารางกริดจะจัดแนวภายในพื้นที่ได้
คําศัพท์เกี่ยวกับตารางกริด
ตารางกริดมาพร้อมกับคําศัพท์ใหม่จํานวนมาก เนื่องจากเป็น CSS ครั้งแรกที่มีระบบเลย์เอาต์จริง
เส้นตาราง
ตารางกริดประกอบด้วยเส้นที่วิ่งในแนวนอนและแนวตั้ง หากตารางกริดมี 4 คอลัมน์ จะมีเส้นคอลัมน์ 5 เส้น ซึ่งรวมถึงเส้นหลังคอลัมน์สุดท้าย
บรรทัดจะได้รับการขึ้นเลขตั้งแต่ 1 เป็นต้นไป โดยระบบจะขึ้นเลขตามโหมดการเขียนและทิศทางสคริปต์ของคอมโพเนนต์ ซึ่งหมายความว่าบรรทัดคอลัมน์ 1 จะอยู่ที่ด้านซ้ายในภาษาที่อ่านจากซ้ายไปขวา เช่น อังกฤษ และอยู่ทางด้านขวาในภาษาที่อ่านจากขวาไปซ้าย เช่น อาหรับ
แทร็กตารางกริด
แทร็กคือพื้นที่ระหว่างเส้นตารางกริด 2 เส้น แทร็กแถวจะอยู่ระหว่างเส้นแถว 2 เส้น และแทร็กคอลัมน์จะอยู่ระหว่างเส้นคอลัมน์ 2 เส้น เมื่อสร้างตารางกริด เราจะสร้างแทร็กเหล่านี้โดยกำหนดขนาดให้
เส้นตาราง
เซลล์ตารางกริดคือพื้นที่ที่เล็กที่สุดในตารางกริดซึ่งกำหนดโดยการตัดกันของแทร็กแถวและคอลัมน์ เหมือนกับเซลล์ตารางหรือเซลล์ในสเปรดชีต หากคุณกําหนดตารางกริดและไม่วางรายการใดๆ ระบบจะวางแต่ละรายการลงในเซลล์ตารางกริดที่กําหนดไว้โดยอัตโนมัติ
พื้นที่ตารางกริด
เซลล์ตารางกริดหลายเซลล์รวมกัน พื้นที่ตารางกริดสร้างขึ้นโดยการทำให้รายการหนึ่งครอบคลุมหลายแทร็ก
ช่องว่าง
รางระบายน้ำหรือตรอกระหว่างรางรถไฟ ในแง่การปรับขนาด แทร็กเหล่านี้จะทำงานเหมือนแทร็กปกติ คุณจะวางเนื้อหาในช่องว่างไม่ได้ แต่สามารถวางรายการตารางกริดให้ครอบคลุมช่องว่างได้
คอนเทนเนอร์ตารางกริด
องค์ประกอบ 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
ในแท็บเลย์เอาต์ ให้เลือกแสดงหมายเลขบรรทัดในเมนูแบบเลื่อนลงเพื่อดูหมายเลขบรรทัดในตารางกริด
คีย์เวิร์ดการปรับขนาดตามเนื้อหา
นอกจากมิติข้อมูลความยาวและเปอร์เซ็นต์ตามที่อธิบายไว้ในส่วนหน่วยการปรับขนาดแล้ว แทร็กตารางกริดยังใช้คีย์เวิร์ดการปรับขนาดโดยเนื้อแท้ได้ คีย์เวิร์ดเหล่านี้จะกำหนดไว้ในข้อกำหนดเฉพาะการปรับขนาดกล่อง และเพิ่มวิธีการอื่นๆ ในการปรับขนาดกล่องใน 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 จะแบ่งพื้นที่ตามสัดส่วน ค่าที่มากขึ้นจะทำให้มีพื้นที่ว่างมากขึ้น ในตัวอย่างด้านล่าง ให้เปลี่ยนค่าของแทร็กที่สาม
ฟังก์ชัน minmax()
ฟังก์ชันนี้หมายความว่าคุณสามารถกำหนดขนาดต่ำสุดและสูงสุดของแทร็กได้
ซึ่งจะเป็นประโยชน์อย่างยิ่ง
หากเราใช้ตัวอย่างหน่วย fr
ด้านบนซึ่งกระจายพื้นที่ที่เหลือ รูปแบบการเขียนอาจใช้ minmax()
เป็น minmax(auto, 1fr)
ตารางกริดจะพิจารณาขนาดของเนื้อหา จากนั้นจึงจัดสรรพื้นที่ว่างที่เหลือหลังจากให้พื้นที่แก่เนื้อหาเพียงพอ
ซึ่งหมายความว่าคุณอาจไม่ได้แทร็กแต่ละแทร็กที่มีพื้นที่เท่าๆ กันในคอนเทนเนอร์ตารางกริด
หากต้องการบังคับให้แทร็กใช้พื้นที่ในคอนเทนเนอร์ตารางกริดเท่าๆ กันโดยหักช่องว่างออก ให้ใช้ minmax
แทนที่ 1fr
เป็นขนาดแทร็กด้วย minmax(0, 1fr)
ซึ่งจะทำให้ขนาดขั้นต่ำของแทร็กเป็น 0 ไม่ใช่ขนาด min-content
จากนั้นตารางกริดจะใช้ขนาดทั้งหมดที่ใช้ได้ในคอนเทนเนอร์ ลบขนาดที่จําเป็นสําหรับช่องว่าง และแบ่งส่วนที่เหลือตามหน่วย 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
จะทํางานในลักษณะเดียวกันทุกประการ
เมื่อแทร็กแรกเต็มแล้ว แทร็กที่ 2 จะไม่แตกต่างจากแทร็กแรก
ตำแหน่งโฆษณาอัตโนมัติ
คุณได้ดูการทํางานของการจัดวางตารางอัตโนมัติในเดโมแล้ว ระบบจะวางรายการในตารางกริดทีละรายการตามลำดับที่ปรากฏในแหล่งที่มา สำหรับเลย์เอาต์หลายรายการ คุณอาจใช้เพียงเท่านี้ก็ได้ หากต้องการการควบคุมเพิ่มเติม คุณอาจต้องทํา 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 นั้นอิงตามตารางกริดของเส้นที่มีหมายเลข วิธีที่ง่ายที่สุดในการวางสิ่งต่างๆ บนตารางกริดคือการวางจากบรรทัดหนึ่งไปยังอีกบรรทัดหนึ่ง คุณจะเห็นวิธีอื่นๆ ในการจัดวางรายการในคู่มือนี้ แต่คุณจะเข้าถึงบรรทัดที่มีหมายเลขเหล่านั้นได้เสมอ
พร็อพเพอร์ตี้ที่คุณสามารถใช้เพื่อวางรายการตามหมายเลขบรรทัดมีดังนี้
ซึ่งจะมีอักขระแทนที่ช่วยให้ตั้งค่าทั้งบรรทัดเริ่มต้นและบรรทัดสิ้นสุดพร้อมกันได้
หากต้องการวางรายการ ให้กำหนดเส้นเริ่มต้นและเส้นสิ้นสุดของพื้นที่ตารางกริดที่ควรวางรายการ
.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 นี้ ตารางกริดจะสร้างแทร็กเพื่อให้เลย์เอาต์ทำงานได้ และแทร็กเหล่านี้เรียกว่าตารางกริดโดยนัย
ส่วนใหญ่แล้ว คุณจะทำงานกับตารางกริดแบบนัยหรือแบบชัดแจ้งก็ได้ อย่างไรก็ตาม ตำแหน่งตามบรรทัดอาจทําให้คุณเห็นความแตกต่างหลักระหว่าง 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 พิกเซล คอลัมน์ที่ 2 จะมีขนาด 200 พิกเซล คอลัมน์ที่ 3 จะมีขนาด 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";
}
การใช้ 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";
}
เนื่องจากมีการกําหนดเลย์เอาต์ทั้งหมดในที่เดียว การกําหนดเลย์เอาต์ใหม่โดยใช้ Media Query จึงทําได้ง่าย
ในตัวอย่างถัดไป เราได้สร้างเลย์เอาต์ 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; }
การวางแนวเริ่มต้นของตารางกริดคืออะไร
auto-fit
กับ auto-fill
แตกต่างกันอย่างไร
auto-fit
จะยืดคอนเทนเนอร์ให้พอดีกับเด็ก ส่วน auto-fill
จะปรับเด็กให้พอดีกับคอนเทนเนอร์auto-fit
จะยืดเซลล์ให้พอดีกับคอนเทนเนอร์ ส่วน auto-fill
จะไม่ยืดmin-content
คืออะไร
max-content
คืออะไร
การแสดงโฆษณาอัตโนมัติคืออะไร
grid-area
และวางไว้ในเซลล์นั้นแหล่งข้อมูล
คู่มือนี้แสดงภาพรวมของส่วนต่างๆ ในข้อกําหนดเฉพาะของเลย์เอาต์ตารางกริด ดูข้อมูลเพิ่มเติมได้ที่แหล่งข้อมูลต่อไปนี้