GRid

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

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

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

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

ภาพรวม

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

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

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

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 ภายในแท็บ "เลย์เอาต์" ให้เลือกหมายเลขบรรทัดที่แสดงในเมนูแบบเลื่อนลงเพื่อดูหมายเลขบรรทัดในตารางกริด

การกำหนดขนาดภายในคีย์เวิร์ด

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

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

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

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

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

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

main {
  display: grid;
}

แหล่งข้อมูล

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

• เลย์เอาต์ตารางกริด CSS ของ MN
• คู่มือฉบับสมบูรณ์เกี่ยวกับตารางกริด
• การสร้างคอนเทนเนอร์ตารางกริด
• ตรวจสอบตารางกริด CSS ใน Chrome DevTools
• คอลเล็กชันสื่อการเรียนรู้ที่ใช้ตารางกริดที่ครอบคลุม