Babel Coder

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

beginner

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 ของเราประกอบด้วยรูปภาพของเหล่าผู้ทรงเกียรติ ดังนี้

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

      .image {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }

      .image:nth-child(1) {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
      }

      .image:nth-child(2) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
      }

      .image:nth-child(3) {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="./prayuth.png" alt="ผู้นำ" class="image" />
      <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
      <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
    </div>
  </body>
</html>

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

Grid Placement

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

<div class="container">
  <img src="./prayuth.png" alt="ผู้นำ" class="image" />
  <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
  <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
  <img src="./ชิปกับเดล.png" alt="ชิปกับเดล" class="image" />
</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)

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

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

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

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

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

Grid Span

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

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

<div class="container">
  <img src="./prayuth.png" alt="ผู้นำ" class="image" />
  <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
  <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
  <img src="./ชิปกับเดล.png" alt="ชิปกับเดล" class="image" />
  <img src="./เพื่อนชิปกับเดล.png" alt="เพื่อนชิปกับเดล" class="image" />
  <!-- มาอีกกลุ่ม อัดกันไปให้เต็มคลองแสนแสบ -->
  <img src="./เพื่อนชิปกับเดลอีกกลุ่ม.png" alt="เพื่อนชิปกับเดลอีกกลุ่ม" class="image" />
</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

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

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 กันเถอะ!

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

Grid Auto Flow Column

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

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

<div class="container">
  <img src="./prayuth.png" alt="ผู้นำ" class="image" />
  <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
  <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
  <img src="./ชิปกับเดล.png" alt="ชิปกับเดล" class="image" />
  <img src="./เพื่อนชิปกับเดล.png" alt="เพื่อนชิปกับเดล" class="image" />
  <img src="./เพื่อนชิปกับเดลอีกกลุ่ม.png" alt="เพื่อนชิปกับเดลอีกกลุ่ม" class="image" />
  <!-- ส่งเงินมาเดี๋ยวนี้! -->
  <img src="./กรมสรรพากร.png" alt="เจ้าหนี้รายปี" class="image" />
</div>

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

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

Implicit Grid Auto Flow Column

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        grid-auto-rows: 100px;
        grid-auto-columns: 100px;
        grid-auto-flow: column;
      }

      .image {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }

      .image:nth-child(1) {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
      }

      .image:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }

      .image:nth-child(3) {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
      }

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

      .image:nth-child(7) {
        object-fit: contain;
        grid-column: span 3;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="./prayuth.png" alt="ผู้นำ" class="image" />
      <img src="./thanathorn.png" alt="เกือบเป็นผู้นำ" class="image" />
      <img src="./คุณช่อ.png" alt="อีช่อ" class="image" />
      <img src="./ชิปกับเดล.png" alt="ชิปกับเดล" class="image" />
      <img src="./เพื่อนชิปกับเดล.png" alt="เพื่อนชิปกับเดล" class="image" />
      <img
        src="./เพื่อนชิปกับเดลอีกกลุ่ม.png"
        alt="เพื่อนชิปกับเดลอีกกลุ่ม"
        class="image"
      />
      <img src="./กรมสรรพากร.png" alt="เจ้าหนี้รายปี" class="image" />
    </div>
  </body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-auto-rows: 100px;
        grid-auto-columns: 100px;
      }

      .image {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }

      .vspan-2 {
        grid-row: span 2;
      }

      .hspan-2 {
        grid-column: span 2;
      }

      .hspan-3 {
        grid-column: span 3;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="./มีถั่วไหม.png" class="image hspan-2" />
      <img src="./ยาราไนก้า.png" class="image vspan-2 hspan-2" />
      <img src="./ชิปกับเดล.png" class="image vspan-2 hspan-3" />
      <img src="./ท่านผู้นำ.png" class="image vspan-2" />
      <img src="./ถั่ว.jpg" class="image" />
      <img src="./มีถั่วไหม.png" class="image hspan-2" />
      <img src="./ยาราไนก้า.png" class="image vspan-2 hspan-2" />
      <img src="./ชิปกับเดล.png" class="image vspan-2 hspan-3" />
      <img src="./ท่านผู้นำ.png" class="image vspan-2" />
      <img src="./ถั่ว.jpg" class="image" />
    </div>
  </body>
</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

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

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


แสดงความคิดเห็นของคุณ


No any discussions