Grid Auto Placement คืออะไร? และทำงานอย่างไร?

Nuttavut Thongjor

Flex กับ Grid นี่สองพี่น้อง จัดเว็บเป็นกอง ได้ลองแล้วจะรู้ว่าดี โอ้วยากสุด ๆ ลองแล้วสะดุด~

chip dell said nothing

Flexbox นั้นเป็นมาตรฐานการจัดเว็บในมิติเดียว ส่วนลูกพี่อย่าง CSS Grid Layout นั้นจัดได้ถึงสองมิติ เราได้อธิบายเรื่องนี้กันไปแล้วใน CSS Grid Layout คืออะไร? รู้จักมาตรฐานการออกแบบเลย์เอาท์ใน 2 มิติกันเถอะ!

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

Grid วางไอเทมอย่างไรเมื่อไม่ระบุตำแหน่ง

สัญชาตญาณสัตว์ป่าของ Grid นั้น จะเริ่มจากการจัด Grid Item ที่ระบุตำแหน่งของแถวและหลักชัดเจนให้หมดก่อน หลังจากนั้นจึงเริ่มชายตามองพวก Grid Item สัมภเวสีที่ไม่มีที่อยู่ระบุชัดเจน

กำหนดให้ Grid Container ของเราประกอบด้วยรูปภาพของเหล่าผู้ทรงเกียรติ ดังนี้

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <style>
5      .container {
6        display: grid;
7        /* สร้าง 3 คอลัมภ์ แต่ละคอลัมภ์กว้าง 100px */
8        grid-template-columns: repeat(3, 100px);
9        /* สร้าง 3 แถว แต่ละแถวสูง 100px */
10        grid-template-rows: repeat(3, 100px);
11      }
12

13      .image {
14        object-fit: cover;
15        width: 100%;
16        height: 100%;
17      }
18

19      .image:nth-child(1) {
20        grid-column: 2 / 3;
21        grid-row: 2 / 3;
22      }
23

24      .image:nth-child(2) {
25        grid-column: 3 / 4;
26        grid-row: 1 / 2;
27      }
28

29      .image:nth-child(3) {
30        grid-column: 1 / 2;
31        grid-row: 3 / 4;
32      }
33    </style>
34  </head>
35  <body>
36    <div class="container">
37      <img src="./prayuth.png" alt="ผู้นำ" class="image" />
38      <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
39      <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
40    </div>
41  </body>
42</html>

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

Grid Placement

สมมติตอนนี้ชิปกับเดลอยากก้าวเข้าสู่สภาหละ เราจึงเพิ่ม Grid Item ของพวกเขาเข้าไป คุณคิดว่าแก๊งชิพมังค์นี้จะอยากอยู่ใกล้ใคร?

HTML
1<div class="container">
2  <img src="./prayuth.png" alt="ผู้นำ" class="image" />
3  <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
4  <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
5  <img src="./ชิปกับเดล.png" alt="ชิปกับเดล" class="image" />
6</div>

New Grid Item

ภายหลังการแทรกชิปกับเดลเข้าไปผลลัพธ์ที่ได้เป็นเช่นนี้

Implicit Grid Item Placement

เกิดอะไรขึ้น ทำไมชิปกับเดลถึงเลือกอยู่ข้างคุณธนาธรมากกว่าบุคคลผู้น่านับถือที่สุดในปฐพีอย่างท่านข้างล่าง?

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

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

ตามธรรมชาติของ Grid Item นั้น เมื่อไม่กำหนดจุดเริ่มและจุดสิ้นสุดใด ๆ แต่ละไอเทมจะมีการจับจองพื้นที่แค่ 1 ช่อง (span 1) จาก Grid Line หนึ่งไปสู่ Line ที่อยู่ติดกัน หากต้องการให้มีการเขมือบพื้นที่มากกว่านี้สามารถระบุผ่าน span ได้ เช่น span 2 จะหมายถึงกินพื้นที่สองช่อง (จาก Line ที่ n ไปสู่ n + 2)

เพราะการค้าในคลองนั้นเจริญ ชิปกับเดลจึงชวนผองเพื่อนมาร่วมขายถั่วในคลอง

HTML
1<div class="container">
2  <img src="./prayuth.png" alt="ผู้นำ" class="image" />
3  <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
4  <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
5  <img src="./ชิปกับเดล.png" alt="ชิปกับเดล" class="image" />
6  <!-- เพื่อนต้องมา -->
7  <img src="./เพื่อนชิปกับเดล.png" alt="เพื่อนชิปกับเดล" class="image" />
8</div>

แต่เรือของพวกเขานั้นใหญ่กว่าของชิปกับเดลมาก จึงต้องเพิ่มความกว้างของพื้นที่คอลัมภ์เป็น 2 (span 2)

CSS
1/* เพื่อนของชิปกับเดล */
2.image:nth-child(5) {
3  grid-column: span 2;
4}

เราพบว่าแม้แต่เพื่อนของชิปกับเดลก็ยังไม่ยอมอยู่ข้างลุง นี่มันเกิดอะไรขึ้น?

Grid Span

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

เวลาผ่านไปธุรกิจขายถั่วของตระกูลชิพมังค์เติบโตแซงหน้าอาบังไปมากจนต้องไปชวนแก๊งเพื่อนอีกกลุ่มมาร่วมขาย เราจึงเพิ่มแก๊งชิพมังค์เข้าไปในระบบ Grid ของเราอีกหนึ่ง ดังนี้

HTML
1<div class="container">
2  <img src="./prayuth.png" alt="ผู้นำ" class="image" />
3  <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
4  <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
5  <img src="./ชิปกับเดล.png" alt="ชิปกับเดล" class="image" />
6  <img src="./เพื่อนชิปกับเดล.png" alt="เพื่อนชิปกับเดล" class="image" />
7  <!-- มาอีกกลุ่ม อัดกันไปให้เต็มคลองแสนแสบ -->
8  <img
9    src="./เพื่อนชิปกับเดลอีกกลุ่ม.png"
10    alt="เพื่อนชิปกับเดลอีกกลุ่ม"
11    class="image"
12  />
13</div>

Grid Span

อ้าว ไม่เหมือนที่ตกลงกันไว้หนิ? เรียกเพื่อนเข้ามาร่วมขายถั่วอีกหนึ่ง แต่เพื่อนหายไปไหน เจอใครจับไปปรับทัศนคติรึเปล่า?

สิ่งหนึ่งที่ต้องเน้นเป็นพิเศษคือ การค้นหาพื้นที่ว่างนั้นจะไม่ได้เริ่มค้นหาใหม่ตั้งแต่หัวของแถวแรก แต่จะเริ่มค้นหาที่ว่างจากตำแหน่งสุดท้ายที่ค้นหาล่าสุด เพราะตำแหน่ง DOM ของไอเทมนี้อยู่ต่อจากไอเทมก่อนหน้า จึงต้องวางไอเทมใหม่นี้ต่อท้ายแทน เป็นผลทำให้ไอเทมใหม่นี้แม้จะมีขนาดพอที่จะใส่ในช่องที่สามของแถวแรกแต่ก็ทำไม่ได้ มันจึงต้องไปอยู่ในแถวที่สามแทน

รู้จัก Explicit Grid และ Implicit Grid

พื้นที่ของ Grid ที่เป็นผลจากการสร้างผ่าน grid-template-rows grid-template-columns หรือ grid-template-areas เราเรียกว่า explicit grid

จากตัวอย่างของเราที่ระบุทั้ง grid-template-rows และ grid-template-columns นั้นเป็นผลทำให้เกิดพื้นที่ขนาด 3 x 3 ช่อง หลังจากวางชิปกับเดลและเพื่อนลงไป ตำแหน่งค้นหาล่าสุดจะอยู่แถวที่สาม ครั้นจะวางเพื่อนเพิ่มอีกหนึ่งย่อมทำไม่ได้เพราะติดพุงคุณช่อ สิ่งที่ Grid จะทำให้กับเราได้ก็คือการเพิ่มแถวใหม่และให้ไอเทมใหม่นั้นจับจองพื้นที่ในแถวใหม่นั้นแทน ทว่าเรานั้นเห็นจากผลลัพธ์ไปแล้วว่าความว่างเปล่าเป็นสิ่งที่เราเผชิญ...

เมื่อ Grid ทำการเพิ่มพื้นที่ใหม่นอกเหนือจาก Explicit Grid เราจะเรียกส่วนนี้ว่า Implicit Grid โดยมีขนาดของ Grid Track เป็น auto นั่นเป็นเหตุผลที่ว่าทำไมรูปของเราไม่แสดง

CSS Grid Layout อนุญาตให้เรากำหนดขนาดของ Grid Track ของ Implicit Grid ได้ผ่าน grid-auto-columns และ grid-auto-rows เช่นนี้แล้วเมื่อเราอยากให้ขนาดของ Grid Item ใหม่จาก Implicit Grid มีขนาดเท่ากับของ Explicit Grid เราจึงต้องกำหนดให้พวกมันมีขนาดเป็น 100px เช่นเดียวกับที่ระบุใน grid-template-columns และ grid-template-rows

CSS
1.container {
2  display: grid;
3  /* สร้าง 3 คอลัมภ์ แต่ละคอลัมภ์กว้าง 100px */
4  grid-template-columns: repeat(3, 100px);
5  /* สร้าง 3 แถว แต่ละแถวสูง 100px */
6  grid-template-rows: repeat(3, 100px);
7}

Implicit VS Explicit Grid

จนถึงตอนนี้ ตัวอย่างที่แสดงมาทั้งหมดนั้นจะมีการเรียงตัวของไอเทมในแนวแถวจากซ้ายไปขวา หากหมดแถวแล้วยังหาที่ว่างลงไอเทมถัดไปไม่ได้ก็จะขึ้นแถวใหม่ไปเรื่อย ๆ เมื่อเป็นเช่นนี้จึงไม่มีไอเทมใดเกินออกจาก Explicit Grid ในแนวคอลัมภ์เลย (ไม่เพิ่มคอลัมภ์ใหม่) แต่อาจไปเกินแนวแถวแทน

จะเป็นไปได้ถ้าจะให้การจัดเรียงของ Grid Item ที่ไม่ได้ระบุตำแหน่งนี้ (Implicit Grid Items) เป็นไปตามแนวคอลัมภ์จากบนลงล่างแทน และเมื่อสิ้นสุดแต่ละคอลัมภ์แล้วก็ให้ค้นหาใหม่ในคอลัมภ์ถัดไป?

การใช้งาน grid-auto-flow

เรามาจัดการเรียงแก๊งค์ชิพมังค์ในแนวตั้งกัน ให้เหล่าผองเพื่อนไหลจากบนลงล่างตามแนวคอลัมภ์ วิธีการของเราคือการใช้ grid-auto-flow

grid-auto-flow นั้นสามารถใช้เพื่อกำหนดทิศทางการไหลของกลุ่ม Grid Items ที่ไม่ได้ระบุตำแหน่ง โดยสามารถเลือกให้ไหลไปตามแถว (จากซ้ายไปขวา) ผ่านค่า row หรือไหลตามแนวคอลัมภ์ (จากบนลงล่าง) ผ่านค่า column เมื่อกำหนดทิศทางไหลไปทางใด จะไม่มีทางที่ Grid Items จะเกินออกไปในทิศทางนั้น เช่น กำหนด grid-auto-flow: row ทิศทางการไหลจะเป็นจากซ้ายไปขวา เมื่อสิ้นสุดแถวนั้นจะค้นหาพื้นที่ว่างในแถวถัดไปแทน ไม่มีการขึ้นคอลัมภ์ใหม่

ค่าเริ่มต้นของ grid-auto-flow นั้นเป็น row เราจึงเห็นทิศทางการค้นหาเป็นไปจากซ้ายไปขวาตั้งแต่แรก

อย่าปล่อยให้ลุงต้องเหงา... ด้วยการจัด auto flow ตามแนวดิ่งผ่าน grid-auto-flow: column กันเถอะ!

CSS
1.container {
2  display: grid;
3  grid-template-columns: repeat(3, 100px);
4  grid-template-rows: repeat(3, 100px);
5  grid-auto-rows: 100px;
6  grid-auto-columns: 100px;
7  /* ให้ทิศทางเป็นไปตามคอลัมภ์ ค้นหาจากบนลงล่าง เมื่อสุดคอลัมภ์ให้ค้นหาในคอลัมภ์ถัดไป */
8  grid-auto-flow: column;
9}

Grid Auto Flow Column

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

ธุรกิจขายถั่วเงินงอกเงยขนาดนี้มีหรือจะพ้นสรรพากร~ เผื่อให้ระบบภาษียังคงสมบูรณ์ เราจึงเพิ่มสรรพากรเข้าไป

HTML
1<div class="container">
2  <img src="./prayuth.png" alt="ผู้นำ" class="image" />
3  <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
4  <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
5  <img src="./ชิปกับเดล.png" alt="ชิปกับเดล" class="image" />
6  <img src="./เพื่อนชิปกับเดล.png" alt="เพื่อนชิปกับเดล" class="image" />
7  <img
8    src="./เพื่อนชิปกับเดลอีกกลุ่ม.png"
9    alt="เพื่อนชิปกับเดลอีกกลุ่ม"
10    class="image"
11  />
12  <!-- ส่งเงินมาเดี๋ยวนี้! -->
13  <img src="./กรมสรรพากร.png" alt="เจ้าหนี้รายปี" class="image" />
14</div>

ภาพใหม่ของกรมสรรพากรนี้ กำหนดให้ครอบคลุมพื้นที่ 3 คอลัมภ์ เพื่อสะท้อนถึงการกินจุ

CSS
1/* กรมสรรพากร กินพื้นที่ 3 คอลัมภ์ */
2.image:nth-child(7) {
3  object-fit: contain;
4  grid-column: span 3;
5}

Implicit Grid Auto Flow Column

Grid Item ของกรมสรรพากรต้องวางแนวดิ่ง (column) ต่อจากหมายเลข 3 แต่จะเห็นว่าแนวดิ่งของคอลัมภ์ที่ 3 นั้นไม่เหลือที่ว่างแล้ว กรมสรรพากรจึงต้องขึ้นคอลัมภ์ใหม่ในคอลัมภ์ที่ 4 แต่เนื่องจากกรมสรรพากรนั้นกินจุ จึงเกิดคอลัมภ์ใหม่เกินมาอีก 2 คอลัมภ์ดังภาพ

กล่าวโดยสรุป: ตั้งค่า grid-auto-flow ทิศทางใด ทิศทางนั้นจะไม่มี implicit grid items เกิน

และนี่คือโปรแกรมทั้งหมดที่เราเขียนขึ้นมาตั้งแต่ต้นจนถึงตรงนี้ครับ

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <style>
5      .container {
6        display: grid;
7        grid-template-columns: repeat(3, 100px);
8        grid-template-rows: repeat(3, 100px);
9        grid-auto-rows: 100px;
10        grid-auto-columns: 100px;
11        grid-auto-flow: column;
12      }
13

14      .image {
15        object-fit: cover;
16        width: 100%;
17        height: 100%;
18      }
19

20      .image:nth-child(1) {
21        grid-column: 2 / 3;
22        grid-row: 2 / 3;
23      }
24

25      .image:nth-child(2) {
26        grid-column: 1 / 2;
27        grid-row: 1 / 2;
28      }
29

30      .image:nth-child(3) {
31        grid-column: 3 / 4;
32        grid-row: 3 / 4;
33      }
34

35      .image:nth-child(5) {
36        grid-column: span 2;
37      }
38

39      .image:nth-child(7) {
40        object-fit: contain;
41        grid-column: span 3;
42      }
43    </style>
44  </head>
45  <body>
46    <div class="container">
47      <img src="./prayuth.png" alt="ผู้นำ" class="image" />
48      <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
49      <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
50      <img src="./ชิปกับเดล.png" alt="ชิปกับเดล" class="image" />
51      <img src="./เพื่อนชิปกับเดล.png" alt="เพื่อนชิปกับเดล" class="image" />
52      <img
53        src="./เพื่อนชิปกับเดลอีกกลุ่ม.png"
54        alt="เพื่อนชิปกับเดลอีกกลุ่ม"
55        class="image"
56      />
57      <img src="./กรมสรรพากร.png" alt="เจ้าหนี้รายปี" class="image" />
58    </div>
59  </body>
60</html>

Dense และ Sparse คืออะไร?

ผมขอเริ่มหัวข้อนี้ด้วย HTML และ CSS ก้อนใหม่ ดังนี้ครับ

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <style>
5      .container {
6        display: grid;
7        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
8        grid-auto-rows: 100px;
9        grid-auto-columns: 100px;
10      }
11

12      .image {
13        object-fit: cover;
14        width: 100%;
15        height: 100%;
16      }
17

18      .vspan-2 {
19        grid-row: span 2;
20      }
21

22      .hspan-2 {
23        grid-column: span 2;
24      }
25

26      .hspan-3 {
27        grid-column: span 3;
28      }
29    </style>
30  </head>
31  <body>
32    <div class="container">
33      <img src="./มีถั่วไหม.png" class="image hspan-2" />
34      <img src="./ยาราไนก้า.png" class="image vspan-2 hspan-2" />
35      <img src="./ชิปกับเดล.png" class="image vspan-2 hspan-3" />
36      <img src="./ท่านผู้นำ.png" class="image vspan-2" />
37      <img src="./ถั่ว.jpg" class="image" />
38      <img src="./มีถั่วไหม.png" class="image hspan-2" />
39      <img src="./ยาราไนก้า.png" class="image vspan-2 hspan-2" />
40      <img src="./ชิปกับเดล.png" class="image vspan-2 hspan-3" />
41      <img src="./ท่านผู้นำ.png" class="image vspan-2" />
42      <img src="./ถั่ว.jpg" class="image" />
43    </div>
44  </body>
45</html>

ถึงตอนนี้ผมคิดว่าเพื่อน ๆ น่าจะพอเดาผลลัพธ์ออกแล้วว่าหน้าตาควรเป็นเช่นใด

Grid Auto Flow Sparse

ตามที่เราได้คุยกันไปครับ หากเราไม่ได้ระบุ grid-auto-flow ตัว CSS Grid Layout เองจะใช้ค่าเริ่มต้นเป็น row อันเป็นผลให้เกิดการหาพื้นที่ว่างไล่ตามแถวจากซ้ายไปขวา และเริ่มหาพื้นที่ต่อไปถัดจากตำแหน่งค้นหาครั้งล่าสุด (ตำแหน่ง DOM ล่าสุด) ไม่ได้เริ่มต้นค้นหาใหม่ตั้งแต่จุดเริ่มต้นของแถวแรก

Grid Auto Flow Sparse with Line

เพราะการจับจองพื้นที่ไม่ได้เริ่มมองหาจากบรรทัดแรก เลยทำให้เกิดช่องว่างประปรายไปตาม Grid Container มากมาย เรียกลักษณะการแสดงผลแบบนี้ว่า Sparse หากเงื่อนไขของเราคือพยายามหาทางให้พื้นที่ทั้งหมดถูกใช้เต็มมากที่สุดเท่าที่จะเป็นไปได้ดังรูปข้างล่าง สามารถทำได้หรือไม่?

Grid Auto Flow Dense

ใน CSS Grid Layout เรามีวิธีบอกให้ค้นหาพื้นที่ว่างตั้งแต่ต้น Grid ไม่ใช่เริ่มหาจากตำแหน่งล่าสุด (ตามลำดับของ DOM) ด้วยการตั้งค่าแบบ Dense

CSS
1.container {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
4  grid-auto-rows: 100px;
5  grid-auto-columns: 100px;
6  <!-- เริ่มตำแหน่งค้นหาช่องว่างแต่ต้น -->
7  grid-auto-flow: dense;
8}

Grid Auto Flow Dense with Line

เหตุเพราะ Grid พยายามค้นหาช่องว่างก่อนหน้า จึงเป็นผลทำให้ Grid Container ของเราดูเต็มมากขึ้น ไม่เป็นช่องโหว่เหมือนแบบ Sparse

จากการใช้งานข้างต้นจะพบว่า grid-auto-flow นั้นนอกจากจะใช้กำหนดทิศทางการวางได้แล้ว ยังสามารถกำหนด sparse/dense ได้อีกด้วย นอกจากนี้ grid-auto-flow ยังอนุญาตให้เราระบุทั้ง row/column ควบคู่ไปกับ dense เช่น grid-auto-flow: column dense ที่หมายถึงทิศทางค้นหาและวางในแนวคอลัมภ์แบบ Dense นั่นเอง

ค่าเริ่มต้นของ grid-auto-flow นั้นจะเป็น row และแสดงผลแบบ sparse

เอกสารอ้างอิง

Auto-placement in CSS Grid Layout. Retrieved July, 8, 2019, from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout

CSS Grid Layout Module Level 1. Retrieved July, 8, 2019, from https://drafts.csswg.org/css-grid

สารบัญ

สารบัญ

  • Grid วางไอเทมอย่างไรเมื่อไม่ระบุตำแหน่ง
  • รู้จัก Explicit Grid และ Implicit Grid
  • การใช้งาน grid-auto-flow
  • Dense และ Sparse คืออะไร?
  • เอกสารอ้างอิง

คอร์สออนไลน์ของเรา

คอร์สออนไลน์สอนการใช้งาน Cypress เพื่อทดสอบเว็บแอพพลิเคชันแบบ automated testing

เรียนรู้การทำ Unit/Component, Integration และ E2E Testing เพื่อทดสอบเว็บด้วย Cypress

11.74
ชม.
89
วิดีโอ

คอร์สออนไลน์สอนการใช้งาน TypeScript ตั้งแต่เริ่มต้นถึงขั้นสูง

คอร์สสอนการใช้ภาษา TypeScript ตั้งแต่เริ่มต้นจนขั้นสูงเพื่อต่อยอดไปสู่ Front-End/Back-End ยุคใหม่

3.38
ชม.
51
วิดีโอ

คอร์สออนไลน์สอนสร้าง RESTful API ด้วยภาษา Go (Golang) และ Gin พร้อม Workshop

คอร์สสอนการใช้ภาษา Go (Golang) ตั้งแต่เริ่มต้น จนสร้าง RESTful API ได้ด้วยตนเอง

8.84
ชม.
70
วิดีโอ