GRid

พอดแคสต์ CSS - 011: Grid

เลย์เอาต์ที่พบได้ทั่วไปในการออกแบบเว็บคือเลย์เอาต์ของส่วนหัว แถบด้านข้าง เนื้อความ และส่วนท้าย

ในช่วงหลายปีที่ผ่านมา หลายวิธีในการแก้เค้าโครงนี้ แต่ด้วยตารางกริด CSS ซึ่งนอกจากจะค่อนข้างตรงไปตรงมา แต่คุณมีตัวเลือกมากมาย ตารางกริดมีประโยชน์อย่างยิ่งในการรวมการควบคุม ซึ่งการปรับขนาดภายนอกให้ความยืดหยุ่นของการกำหนดขนาดที่แท้จริง จึงเหมาะกับเลย์เอาต์ประเภทนี้ เนื่องจากตารางกริดเป็นวิธีเลย์เอาต์ที่ออกแบบมาสำหรับเนื้อหา 2 มิติ นั่นคือการจัดวางสิ่งต่างๆ เป็นแถวและคอลัมน์พร้อมกัน

เมื่อสร้างเลย์เอาต์แบบตารางกริด คุณจะกำหนดตารางกริดที่มีแถวและคอลัมน์ จากนั้นวางรายการลงในตารางกริดนั้น หรืออนุญาตให้เบราว์เซอร์วางในเซลล์ที่คุณสร้างไว้โดยอัตโนมัติ มีข้อมูลมากมายให้ตั้ง แต่ด้วยภาพรวมของคุณลักษณะ คุณก็จะทำเลย์เอาต์แบบตารางกริดได้ทันที

ภาพรวม

แล้วตารางกริดใช้ทำอะไรได้บ้าง เลย์เอาต์แบบตารางกริดมีฟีเจอร์ต่อไปนี้ คุณจะได้ดูข้อมูลทั้งหมดได้ในคู่มือนี้

1. คุณกำหนดตารางกริดด้วยแถวและคอลัมน์ได้ คุณเลือกวิธีปรับขนาดแทร็กแถวและคอลัมน์เหล่านี้ หรือจะตอบสนองต่อขนาดของเนื้อหาก็ได้
2. ระบบจะวางรายการย่อยโดยตรงของคอนเทนเนอร์ตารางกริดไว้ในตารางกริดนี้โดยอัตโนมัติ
3. หรือคุณจะวางรายการในตำแหน่งที่แน่นอนที่คุณต้องการก็ได้
4. คุณสามารถตั้งชื่อเส้นและพื้นที่ในตารางกริดเพื่อทำให้การวางตำแหน่งง่ายขึ้น
5. สามารถกระจายพื้นที่ว่างในที่จัดเก็บตารางกริดระหว่างแทร็กได้
6. คุณสามารถจัดรายการแบบตารางกริดไว้ภายในพื้นที่ได้

คำศัพท์เกี่ยวกับตารางกริด

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 จะอิงตามตารางกริดที่มีหมายเลขกำกับ วิธีที่ง่ายที่สุดในการวางสิ่งต่างๆ ลงในตารางกริดคือการวางสิ่งต่างๆ จากเส้นหนึ่งไปยังอีกเส้นหนึ่ง คุณจะได้ค้นพบวิธีอื่นๆ ในการวางรายการในคู่มือนี้ แต่คุณก็เข้าถึงเส้นตัวเลขเหล่านั้นได้เสมอ

พร็อพเพอร์ตี้ที่คุณใช้เพื่อวางรายการตามหมายเลขบรรทัดได้มีดังนี้

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

โดยมีชวเลขซึ่งอนุญาตให้คุณตั้งค่าทั้งบรรทัดเริ่มต้นและบรรทัดสิ้นสุดได้พร้อมกัน

• grid-column
• grid-row

ในการวางรายการ ให้ตั้งค่าเส้นเริ่มต้นและจุดสิ้นสุดของพื้นที่ตารางซึ่งควรวางรายการ

.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 เพื่อดูว่าการดำเนินการนี้เปลี่ยนเลย์เอาต์อย่างไร พื้นที่ตารางกริดไม่มีการเปลี่ยนแปลงขนาด แต่จะมีการย้ายตำแหน่งภายในพื้นที่ที่กำหนดแทน

ตรวจสอบความเข้าใจ

ทดสอบความรู้เรื่องตารางกริด

main {
  display: grid;
}

แหล่งข้อมูล

คู่มือนี้จะให้ภาพรวมเกี่ยวกับส่วนต่างๆ ของข้อกำหนดเลย์เอาต์แบบตารางกริด หากต้องการทราบข้อมูลเพิ่มเติม โปรดดูแหล่งข้อมูลต่อไปนี้

• เลย์เอาต์ตารางกริด CSS ของ MDN
• คู่มือฉบับเต็มเกี่ยวกับตารางกริด
• การสร้างคอนเทนเนอร์ตารางกริด
• ตรวจสอบตารางกริด CSS ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
• ชุดเนื้อหาการเรียนรู้แบบตารางกริดที่ครอบคลุม