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 src="./เพื่อนชิปกับเดลอีกกลุ่ม.png" alt="เพื่อนชิปกับเดลอีกกลุ่ม" class="image" />
9</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 src="./เพื่อนชิปกับเดลอีกกลุ่ม.png" alt="เพื่อนชิปกับเดลอีกกลุ่ม" class="image" />
8 <!-- ส่งเงินมาเดี๋ยวนี้! -->
9 <img src="./กรมสรรพากร.png" alt="เจ้าหนี้รายปี" class="image" />
10</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 คืออะไร? -
  • เอกสารอ้างอิง -