GRid

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

ส่วนหัวที่มีโลโก้และการนำทางพร้อมแถบด้านข้างและพื้นที่เนื้อหาที่มีบทความ

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

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

ภาพรวม

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

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

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

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

ตามที่อธิบายไว้ในคำบรรยายและวิธีการ
ตารางที่ไฮไลต์ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ซึ่งแสดงหมายเลขบรรทัด เซลล์ และแทร็ก

คีย์เวิร์ดการปรับขนาดตามเนื้อหา

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

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

ฟังก์ชันนี้หมายความว่าคุณสามารถกำหนดขนาดต่ำสุดและสูงสุดของแทร็กได้ ซึ่งจะเป็นประโยชน์อย่างยิ่ง หากเราใช้ตัวอย่างหน่วย fr ด้านบนซึ่งกระจายพื้นที่ที่เหลือ รูปแบบการเขียนอาจใช้ minmax() เป็น minmax(auto, 1fr) ตารางกริดจะพิจารณาขนาดของเนื้อหา จากนั้นจึงจัดสรรพื้นที่ว่างที่เหลือหลังจากให้พื้นที่แก่เนื้อหาเพียงพอ ซึ่งหมายความว่าคุณอาจไม่ได้แทร็กแต่ละแทร็กที่มีพื้นที่เท่าๆ กันในคอนเทนเนอร์ตารางกริด

หากต้องการบังคับให้แทร็กใช้พื้นที่ในคอนเทนเนอร์ตารางกริดเท่าๆ กันโดยหักช่องว่างออก ให้ใช้ minmax แทนที่ 1fr เป็นขนาดแทร็กด้วย minmax(0, 1fr) ซึ่งจะทำให้ขนาดขั้นต่ำของแทร็กเป็น 0 ไม่ใช่ขนาด min-content จากนั้นตารางกริดจะใช้ขนาดทั้งหมดที่ใช้ได้ในคอนเทนเนอร์ ลบขนาดที่จําเป็นสําหรับช่องว่าง และแบ่งส่วนที่เหลือตามหน่วย fr

รูปแบบ repeat()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 76.
  • Safari: 10.1.

Source

หากต้องการสร้างตารางกริดแทร็ก 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 แถวซึ่งคุณต้องการให้รายการแรกสุดครอบคลุมไปถึงบรรทัดสุดท้ายของตารางกริด

แถบด้านข้างที่มีรายการตารางกริดแบบพี่น้อง 8 รายการ

คุณอาจคิดว่าสามารถให้ไอเทมนั้นแก่ 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

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

พร็อพเพอร์ตี้ 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 แห่ง

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

คุณใช้ตัวย่อ 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 คืออะไร

เท่ากับ 0%
คำหรือรูปภาพที่มีความยาวที่สุด
ตัวอักษรขนาดเล็กที่สุด

max-content คืออะไร

คำที่ยาวที่สุด
อักษรที่มีความยาวที่สุด
ประโยคที่ยาวที่สุดหรือรูปภาพที่ใหญ่ที่สุด

การแสดงโฆษณาอัตโนมัติคืออะไร

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

แหล่งข้อมูล

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