Grid Fundamentals

Grid Container Properties

Grid Container คือคอนเทนเนอร์หลักที่ครอบคลุมไอเท็มทั้งหมดในกริด เราสามารถกำหนดให้เป็นกริดได้ด้วยคำสั่ง display: grid และใช้สมบัติสำหรับควบคุมโครงสร้างกริด เช่น จำนวนคอลัมน์, แถว, และช่องว่าง

`grid-template-columns`

คุณสมบัติ grid-template-columns ทำหน้าที่กำหนด 2 อย่างคือ

จำนวน columns ที่ต้องการให้มีใน Grid
ความกว้างแต่ละ column

ตัวอย่างการใช้ grid-template-columns

<style>
  .container {
      display: grid;
      grid-template-columns: 100px 200px;
  }
</style>
<div class="container">
  <div class="item">คอลัมน์แรก</div>
  <div class="item">คอลัมน์สอง</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 100px 200px;
  }
</style>
<div class="container">
  <div class="item">คอลัมน์แรก</div>
  <div class="item">คอลัมน์สอง</div>
</div>

Result

จากตัวอย่างได้มีการกำหนดให้มี 2 columns ใน grid ซึ่ง column แรกมีความกว้าง 100px และ column ที่ 2 มีความกว้าง 200px

`grid-template-rows`

โดยปกติของ Grid แล้ว Element ที่เป็นลูก แต่ละตัวจะมีเซลล์เป็นของตัวเองและ Grid ก็จะสร้างแถว (row) เพิ่มขึ้นอัตโนมัติตามจำนวน Element ลูกที่มี

ในตัวอย่างแรกจะลองกำหนดแค่ column และไม่กำหนด row

สังเกตุการแถวที่สร้างขึ้นโดยอัตโนมัติ

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Result

จากตัวอย่างจะเห็นว่ามีการกำหนดแถวและความสูงให้โดยอัตโนมัติ

แล้วถ้าเราต้องการกำหนดขนาดให้แต่ละแถวเองหล่ะ เราสามารถกำหนดความสูงให้แต่ละแถวได้โดยใช้คุณสมบัติ grid-template-rows

สังเกตุการแถวที่สร้างขึ้นโดยอัตโนมัติ

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 50px 75px 100px auto;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 50px 75px 100px auto;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Result

จากตัวอย่างเราได้กำหนดความสูงให้ในแต่ละแถวโดยแถวแรกกำหนดให้มีความสูง 50px, แถวที่สอง 75px, แถวที่สาม 100px และแถวสุดท้ายกำหนดให้เป็น auto ซึ่งจะขยายตามขนาดของ Element ลูก

หน่วย ' fr ' คืออะไร?

fr ย่อมาจาก "fraction" เป็นหน่วยที่คำนวณจากพื้นที่ว่างใน Flexbox

สังเกตุการแถวที่สร้างขึ้นโดยอัตโนมัติ

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 2fr;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 2fr;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

Result

จากตัวอย่างจะเห็นว่ามีการกำหนด column 2 อันด้วยกัน โดยอันแรกจะมีค่า 1 หน่วย ส่วนอันที่ 2 มีค่า 2 หน่วย รวมกันจะเท่ากับ 3 หน่วย ซึ่ง column แรกจะมีพื้นที่ 1/3 ของพื้นที่ทั้งหมด และ column ที่สองจะมีพื้นที่ 2/3 ของพื้นที่ทั้งหมด

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

`grid-auto-flow`

โดยปกติแล้ว Grid ถ้าไม่มีการกำหนดจำนวน column ก็จะคำนวณด้วย 1 x n ซึ่ง n ก็คือจำนวน column คูณกับจำนวนแถว (row) หรือจำนวน Element ลูก

แล้วถ้าต้องการกำหนดวาง Element เป็นแนวนอนแทนแนวตั้งหล่ะ grid-auto-flow จึงเข้ามามีบทบาทนี้

เราสามารถกำหนดค่าของ grid-auto-flow ได้ 2 ค่าก็คือ:

row (default) จะเป็นค่าเริ่มต้นโดยจะจัดเรียง Element เป็นแนวตั้งในแต่ละแถว
column จัดเรียง Element เป็นแนวนอนในแต่ละหลัก

Grid Auto Flow:

Row (default)Column

อาจจะดูเหมือน flex-direction แต่จริงๆแล้วมีความแตกต่างกันอยู่ก็คือ CSS Grid นั้นจะไม่มีแกนหลักหรือแกนรอง มีแค่แถว (row) และหลัก (column)

ซึ่งแถวจะเรียกว่าเป็นการจัดเรียงตามแกน block หรือการจัดเรียงแบบทั้งแถว มีลักษณะซ้อนทับกันเป็นชั้นๆ ส่วนหลักจะเรียกว่าการจัดเรียงตามแกน inline ก็คือการจัดแบบต่อๆกันภายในแถว

พฤติกรรมของ Grid นั้นต้องการเติมเต็มพื้นที่ที่มีอยู่ สังเกตุว่าแต่ละ Element ลูกๆจะยืดออกตามแนวนอน

ถ้าเราลองกำหนดความสูงให้กับ Element หลัก ให้เราสังเกตุความสูงของแต่ละแถว

การใช้งาน CSS Grid

index.html

<style>
  .container {
     display: grid;
     height: 300px;
  }
</style>
<div class="container">
  <header>Navbar</header>
  <main>Some of content</main>
  <footer>Copyright @2025</footer>
</div>

<style>
  .container {
     display: grid;
     height: 300px;
  }
</style>
<div class="container">
  <header>Navbar</header>
  <main>Some of content</main>
  <footer>Copyright @2025</footer>
</div>

Result

จากผลลัพท์ที่ได้ ในแต่ละแถวจะมีความสูง 100px สรุปได้ว่าแต่ละ Element ลูก ใน Element Grid จะขยายทั้งด้านกว้างและยาว

`Gaps`

เช่นเดียวกับ Flexbox เราสามารถสร้างช่องว่างระหว่าง row และ column ได้เช่นเดียวกัน โดยใช้คุณสมบัติ gap

ตัวอย่างการใช้ gap

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Result

หรือถ้าหากต้องการกำหนดขนาดช่องว่าง Gap ที่แตกต่างกันระหว่าง row กับ column ก็สามารถกำหนดได้ดังนี้

ตัวอย่างการใช้ gap

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* 8px คือช่องว่างระหว่าง row และ 0px คือช่องว่างระหว่าง column */
      gap: 8px 0px; 
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* 8px คือช่องว่างระหว่าง row และ 0px คือช่องว่างระหว่าง column */
      gap: 8px 0px; 
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Result

`repeat()`

สมมุติว่าเราต้องการสร้าง Grid ที่มี 5 columns โดย column แรกจะมีขนาด 150px ส่วน 4 column ที่เหลือจะมีขนาด 1fr เราอาจจะเขียนได้แบบนี้

Loading...

ซึ่งการเขียนแบบนี้ก็ไม่ผิดอะไร แต่ก็จะต้องใช้เวลาสังเกตุว่ามีกี่ column และต้องกำหนดขนาด column ที่มีขนาดเท่ากันทีละตัวใช่ไหม

ฟังก์ชั่น repeat() จึงเข้ามามีบทบาทในการแก้ไขปัญหานี้ โดยสามารถเขียนได้ดังนี้:

ตัวอย่างการใช้ repeat()

<style>
  .container {
    display: grid;
    grid-template-columns: 150px repeat(4, 1fr);
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: 150px repeat(4, 1fr);
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Result

จากโค้ดตัวอย่างอธิบายได้ว่าเรากำหนดขนาด column 150px และ 1fr ซ้ำกัน 4 รอบ ซึ่งผลลัพธ์ก็เหมือนกัน แต่อ่านง่ายกว่าวิธีแรก

Grid Alignment

ใน CSS Grid การจัดตำแหน่ง (Alignment) สามารถควบคุมได้ทั้งในแนวแกนหลัก (Primary Axis) และแกนรอง (Secondary Axis) โดยใช้คุณสมบัติที่คล้ายกับ Flexbox

Aligning Columns

การจัดตำแหน่งคอลัมน์ใน CSS Grid ใช้ justify-content เพื่อควบคุมการกระจายตัวของคอลัมน์ เช่น:

ตัวอย่างการใช้ justify-content ใน CSS Grid

<style>
  .container {
      display: grid;
      justify-content: center;
  }
</style>
<div class="container">
  <header>Header</header>
  <section>Content</section>
  <footer>Copyright @2025</footer>
</div>

<style>
  .container {
      display: grid;
      justify-content: center;
  }
</style>
<div class="container">
  <header>Header</header>
  <section>Content</section>
  <footer>Copyright @2025</footer>
</div>

Result

จากผลลัพท์ก็จะเป็นการกำหนดตำแหน่งของ cell ให้อยู่ตรงกลางและจะสังเกตุว่า Grid จะมีการคำนวณความกว้างของ columns โดยอัตโนมัติซึ่งจะใช้ความกว้างของเนื้อหาที่ยาวที่สุดของ element ลูกๆ ในแต่ละแถว

ซึ่งหากเราไม่ต้องการให้กำหนดความกว้างแบบนี้ เราก็สามาถกำหนด ความกว้างให้กับ column ได้เองเลยโดยเพิ่มคุณสมบัติ grid-template-columns

ตัวอย่างการใช้ justify-content ใน CSS Grid

<style>
  .container {
      display: grid;
      grid-template-columns: 200px;
      justify-content: center;
  }
</style>
<div class="container">
  <header>Header</header>
  <section>Content</section>
  <footer>Copyright @2025</footer>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 200px;
      justify-content: center;
  }
</style>
<div class="container">
  <header>Header</header>
  <section>Content</section>
  <footer>Copyright @2025</footer>
</div>

Result

นอกจากจะใช้ center แล้วก็จะมี start กับ end ซึ่งจะคล้ายกับ flex-start กับ flex-end และยังสามารถใช้ space-between space-around และ space-evenly เมื่อมี columns มากกว่า 1 อันอีกด้วย

ตัวอย่างการใช้ justify-content ใน CSS Grid

<style>
  .container {
      display: grid;
      grid-template-columns: 120px 120px;
      justify-content: space-around;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 120px 120px;
      justify-content: space-around;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Result

อีกหนึ่งคุณสมบัติที่อยากแนะนำให้รู้จักก็คือ justify-items

ตัวอย่างการใช้ justify-items ใน CSS Grid

<style>
  .container {
      display: grid;
      justify-items: center;
  }
</style>
<div class="container">
  <header>Navbar</header>
  <section>Content</section>
  <footer>Copyright @2025</footer>
</div>

<style>
  .container {
      display: grid;
      justify-items: center;
  }
</style>
<div class="container">
  <header>Navbar</header>
  <section>Content</section>
  <footer>Copyright @2025</footer>
</div>

Result

จากตัวอย่างจะสังเกตุและสงสัยว่าทำไมความกว้างใน column ของแต่ละแถวถึงไม่เท่ากันเหมือนตอนใช้ justify-content: center;

ซึ่งความเป็นจริงก็คือ justify-items จะเป็นการกำหนด element ลูกที่อยู่ให้อยู่ตรงกลางภายใน cell นั้นเอง

Aligning rows

การจัดตำแหน่งแถวใน CSS Grid ใช้ align-content เพื่อควบคุมการกระจายตัวของแถว เช่น:

ตัวอย่างการใช้ align-content ใน CSS Grid

<style>
  .container {
      display: grid;  
      height: 300px;  
      align-content: space-between;
      border: 2px solid red;
  }
</style>
<div class="container">
  <header>Navbar</header>
  <section>Content</section>
  <footer>Copyright @2025</footer>
</div>

<style>
  .container {
      display: grid;  
      height: 300px;  
      align-content: space-between;
      border: 2px solid red;
  }
</style>
<div class="container">
  <header>Navbar</header>
  <section>Content</section>
  <footer>Copyright @2025</footer>
</div>

Result

จากตัวอย่าง align-content ถูกกำหนดค่าให้เป็น space-between element ลูกๆ จึงขยับแถวให้ห่างระหว่างกัน

สิ่งที่สำคัญในการจัดตำแหน่ง row

การจัดตำแหน่งของ row คือคุณจำเป็นต้องกำหนดความสูงที่ชัดเจนให้กับ element หลัก ที่กำหนด layout mode เป็น grid เพราะถ้าหากไม่มีการกำหนดความสูงให้ชัดเจน การใช้ align-content และ align-items จะไม่มีผล

ในการจัด align row ก็จะมีการจัดการ content ที่อยู่ใน cell เช่นเดียวกันนั่นก็คือ align-items

ตัวอย่างการใช้ align-items ใน CSS Grid

<style>
  .container {
      display: grid;
      height: 300px;
      align-items: center;
      border: 2px solid red;
  }
</style>
<div class="container">
  <header>Navbar</header>
  <section>Content</section>
  <footer>Copyright @2025</footer>
</div>

<style>
  .container {
      display: grid;
      height: 300px;
      align-items: center;
      border: 2px solid red;
  }
</style>
<div class="container">
  <header>Navbar</header>
  <section>Content</section>
  <footer>Copyright @2025</footer>
</div>

Result

จากตัวอย่างก็จะเป็นการจัด content ให้อยู่กื่งกลางในแต่ละ cell ที่มีความสูง 100px นั่นเอง

การใช้ระหว่าง items กับ content?

ใน CSS Grid การเลือกใช้ justify-content/ align-content หรือ justify-items/ align-items ขึ้นอยู่กับว่าคุณต้องการจัดตำแหน่งโครงสร้างกริดหรือไอเท็มภายในเซลล์โดยสามารถแยกการใช้งานได้ดังนี้:

1. เมื่อใดควรใช้ justify-content และ align-content

ใช้เมื่อคุณต้องการจัดตำแหน่งโครงสร้างกริดทั้งหมดภายในคอนเทนเนอร์
มีผลต่อการกระจายคอลัมน์ (justify-content) หรือแถว (align-content) ในกริด
เหมาะสำหรับกรณีที่กริดมีพื้นที่ว่างเหลือ และคุณต้องการควบคุมการกระจายตัวของคอลัมน์หรือแถว

ตัวอย่างการใช้ justify-content กับ align-content ใน CSS Grid

<style>
  .container {  
      display: grid;  
      grid-template-columns: 120px 120px;  
      grid-template-rows: 50px 50px;  
      justify-content: center; /* จัดคอลัมน์ให้อยู่ตรงกลาง */  
      align-content: space-between; /* กระจายแถวให้มีช่องว่างระหว่างกัน */  
      height: 300px; /* ต้องมีพื้นที่ว่างในกริด */  
}
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
  .container {  
      display: grid;  
      grid-template-columns: 120px 120px;  
      grid-template-rows: 50px 50px;  
      justify-content: center; /* จัดคอลัมน์ให้อยู่ตรงกลาง */  
      align-content: space-between; /* กระจายแถวให้มีช่องว่างระหว่างกัน */  
      height: 300px; /* ต้องมีพื้นที่ว่างในกริด */  
}
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Result

2. เมื่อใดควรใช้ justify-items และ align-items

ใช้เมื่อคุณต้องการจัดตำแหน่ง ไอเท็มภายในเซลล์ ของกริด
มีผลต่อการจัดตำแหน่ง ไอเท็มแต่ละตัว ในแนวนอน (justify-items) หรือแนวตั้ง (align-items)
เหมาะสำหรับกรณีที่คุณต้องการควบคุมการจัดวางไอเท็มภายในเซลล์โดยไม่กระทบโครงสร้างกริด

ตัวอย่างการใช้ justify-items กับ align-items ใน CSS Grid

<style>
  .container {  
      display: grid;  
      grid-template-columns: 1fr 1fr;  
      grid-template-rows: 1fr 1fr;  
      justify-items: center; /* จัดไอเท็มให้อยู่ตรงกลางในแนวนอน */  
      align-items: start; /* จัดไอเท็มให้อยู่ด้านบนในแนวตั้ง */  
      height: 300px; 
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
  .container {  
      display: grid;  
      grid-template-columns: 1fr 1fr;  
      grid-template-rows: 1fr 1fr;  
      justify-items: center; /* จัดไอเท็มให้อยู่ตรงกลางในแนวนอน */  
      align-items: start; /* จัดไอเท็มให้อยู่ด้านบนในแนวตั้ง */  
      height: 300px; 
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Result

3. การใช้งานร่วมกัน

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

ตัวอย่างการใช้ justify-items กับ align-items ใน CSS Grid

<style>
  .container {  
      display: grid;  
      grid-template-columns: 120px 120px;  
      grid-template-rows: 50px 50px;  
      justify-content: center; /* จัดคอลัมน์ให้อยู่ตรงกลาง */  
      align-content: center; /* จัดแถวให้อยู่ตรงกลาง */  
      justify-items: end; /* จัดไอเท็มในเซลล์ให้อยู่ชิดขวา */  
      align-items: start; /* จัดไอเท็มในเซลล์ให้อยู่ด้านบน */  
      height: 300px; /* ต้องมีพื้นที่ว่างในกริด */
}
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
  .container {  
      display: grid;  
      grid-template-columns: 120px 120px;  
      grid-template-rows: 50px 50px;  
      justify-content: center; /* จัดคอลัมน์ให้อยู่ตรงกลาง */  
      align-content: center; /* จัดแถวให้อยู่ตรงกลาง */  
      justify-items: end; /* จัดไอเท็มในเซลล์ให้อยู่ชิดขวา */  
      align-items: start; /* จัดไอเท็มในเซลล์ให้อยู่ด้านบน */  
      height: 300px; /* ต้องมีพื้นที่ว่างในกริด */
}
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Result

Self-alignment

เราสามารถกำหนดการจัดเรียงให้เฉพาะกับ element ลูกๆเฉพาะตัวที่เราต้องการได้โดยการใช้ align-self และ justify-self

ตัวอย่างการใช้ justify-self กับ align-self ใน CSS Grid

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      align-items: center;
      justify-items: center;
  }
  .box:last-of-type {
      align-self: start;
      justify-self: start;
  }
</style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      align-items: center;
      justify-items: center;
  }
  .box:last-of-type {
      align-self: start;
      justify-self: start;
  }
</style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Result

จากตัวอย่างเราได้เลือก element ลูกที่สุดท้ายโดยใช้ pseudo-classes last-of-type และกำหนดให้ align-self และ justify-self อยู่ที่ start ซึ่งจะทำให้ element ลูกนั้นอยู่ที่ด้านบนซ้าย

Grid Item Properties

ใน CSS Grid, Grid Item หมายถึงองค์ประกอบ (element) ที่อยู่ภายใน Grid Container ซึ่งสามารถควบคุมตำแหน่งและขนาดได้อย่างยืดหยุ่นโดยใช้ Grid Line เป็นตัวกำหนดตำแหน่ง

Grid Lines

Grid Line คือเส้นที่แบ่งคอลัมน์และแถวในกริด โดยเส้นเหล่านี้ใช้สำหรับกำหนดตำแหน่งเริ่มต้นและสิ้นสุดของ Grid Item ใน Grid เส้นจะถูกนับจาก 1 (ไม่ใช่ 0) เสมอ โดยเริ่มจากซ้ายไปขวาสำหรับคอลัมน์ และจากบนลงล่างสำหรับแถว

จากรูปแบ่งเส้นเป็น 2 สีดังนี้:

เส้นสีแดง: แสดง Grid Line แนวตั้ง (Column Lines)
เส้นสีน้ำเงิน: แสดง Grid Line แนวนอน (Row Lines)

การนับ Grid Line

แนวตั้ง (Column Lines)

เส้นแนวตั้งเริ่มนับจากซ้ายไปขวา
ในรูปจะมีเส้นแนวตั้งทั้งหมด 5 เส้น ได้แก่:
- 1: เส้นกริดแนวตั้งแรก (ซ้าย)
- 2, 3, 4: เส้นกริดกลาง
- 5: เส้นกริดแนวตั้งสุดท้าย (ขวา)

แนวนอน (Row Lines)

เส้นแนวนอนเริ่มนับจากบนลงล่าง
ในรูปจะมีเส้นแนวนอนทั้งหมด 5 เส้น ได้แก่:
- 1: เส้นกริดแนวนอนแรก (บน)
- 2, 3, 4: เส้นกริดกลาง
- 5: เส้นกริดแนวนอนสุดท้าย (ล่าง)

การ Inspect ดู Grid Line ใน Browser

หากคุณต้องการตรวจสอบ Grid Line และโครงสร้างของ CSS Grid ในเบราว์เซอร์ คุณสามารถใช้ DevTools ที่มีในเบราว์เซอร์ยอดนิยม เช่น Google Chrome หรือ Firefox ได้อย่างง่ายดาย โดยทำตามขั้นตอนดังนี้:

ขั้นตอนการ Inspect Grid Line

เปิด DevTools

คลิกขวาที่หน้าเว็บ แล้วเลือก Inspect หรือกด F12 บนคีย์บอร์ด
ไปที่แท็บ Elements เพื่อดูโครงสร้าง HTML

เลือก Grid Container

คลิกที่องค์ประกอบ (Element) ที่เป็น Grid Container เช่น <div class="container">
ในส่วนของ Styles จะมีการแสดงคุณสมบัติ CSS เช่น display: grid;

เปิดใช้งาน Grid Overlay

ใน DevTools ของ Chrome:
- คลิกที่ไอคอน Grid (มักอยู่ถัดจากชื่อคลาสใน Elements Panel)
- เลือก Show Grid เพื่อแสดงเส้น Grid Line บนหน้าเว็บ
ใน DevTools ของ Firefox:
- ไปที่แท็บ Layout
- เลือก Grid และเปิดใช้งาน Grid Overlay

ดูหมายเลข Grid Line - เมื่อเปิด Grid Overlay แล้ว คุณจะเห็นหมายเลขของ Grid Line ทั้งในแนวนอนและแนวตั้ง - หมายเลขนี้ช่วยให้คุณเข้าใจตำแหน่งเริ่มต้นและสิ้นสุดของ Grid Item ได้ง่ายขึ้น

คำสั่งที่ใช้ควบคุม Grid Items จะเป็นคุณสมบัติ grid-column และ grid-row ใช้สำหรับกำหนดตำแหน่งและขนาดของ Grid Item โดยอ้างอิงจาก Grid Line

`grid-column`

ใช้กำหนดตำแหน่งในแนวนอน (คอลัมน์) ของ Grid Item

Loading...

จากตัวอย่างมีส่วนประกอบ 2 อย่างคือ:

start-line: เส้นเริ่มต้นของคอลัมน์
end-line: เส้นสิ้นสุดของคอลัมน์

ไม่จำเป็นต้องกำหนด end-line ก็ได้สามารถกำหนดแค่ start-line ตัวเดียวได้เลย

ตัวอย่างการใช้ grid-column

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  }
  .item:nth-child(1) {
      grid-column: 1 / 3; /* เริ่มที่เส้นกริดที่ 1 และสิ้นสุดที่เส้นกริดที่ 3 */ 
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  }
  .item:nth-child(1) {
      grid-column: 1 / 3; /* เริ่มที่เส้นกริดที่ 1 และสิ้นสุดที่เส้นกริดที่ 3 */ 
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Result

จากตัวอย่างตำแหน่ง ของ item ที่ 1 ที่กำหนด grid-column: 1 / 3; คือเริ่มที่เส้นกริดที่ 1 และสิ้นสุดที่เส้นกริดที่ 3

`grid-row`

ใช้กำหนดตำแหน่งในแนวตั้ง (แถว) ของ Grid Item

Loading...

จากตัวอย่างมีส่วนประกอบ 2 อย่างคือ:

start-line: เส้นเริ่มต้นของแถว
end-line: เส้นสิ้นสุดของแถว

เช่นเดียวกับ grid-column คือสามารถกำหนดแค่ start-line ตัวเดียวได้เลย

ตัวอย่างการใช้ grid-row

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  }
  .item:nth-child(1) {
      grid-row: 1 / 3; /* เริ่มที่เส้นกริดที่ 2 และสิ้นสุดที่เส้นกริดที่ 4 */ 
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  }
  .item:nth-child(1) {
      grid-row: 1 / 3; /* เริ่มที่เส้นกริดที่ 2 และสิ้นสุดที่เส้นกริดที่ 4 */ 
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Result

จากตัวอย่างตำแหน่ง ของ item ที่ 1 ที่กำหนด grid-row: 1 / 3; คือเริ่มที่เส้นกริดที่ 1 และสิ้นสุดที่เส้นกริดที่ 3

การใช้งานร่วมกัน

สามารถใช้ grid-column และ grid-row ร่วมกันเพื่อกำหนดตำแหน่งทั้งแนวนอนและแนวตั้งของ Grid Item ได้

ตัวอย่างการใช้ grid-column และ grid-row ร่วมกัน

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  }
  .item:nth-child(1) {
      grid-column: 1 / 3; /* ครอบคลุมคอลัมน์ที่ 1 ถึง 2 */  
      grid-row: 2 / 4;    /* ครอบคลุมแถวที่ 2 ถึง 3 */
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  }
  .item:nth-child(1) {
      grid-column: 1 / 3; /* ครอบคลุมคอลัมน์ที่ 1 ถึง 2 */  
      grid-row: 2 / 4;    /* ครอบคลุมแถวที่ 2 ถึง 3 */
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Result

จากตัวอย่างตำแหน่ง ของ item ที่ 1 ที่กำหนด grid-column: 1 / 3; และ grid-row: 2 / 4; คือเริ่มที่เส้นกริดที่ 1 และสิ้นสุดที่เส้นกริดที่ 3 ในแนวนอน และเริ่มที่เส้นกริดที่ 2 และสิ้นสุดที่เส้นกริดที่ 4 ในแนวตั้ง

Grid Template Areas และ Grid Area

`grid-template-areas`

grid-template-areas ใช้สำหรับกำหนดและตั้ง "ชื่อพื้นที่" (Grid Area) ของแต่ละส่วนใน Grid Layout ซึ่งช่วยให้โครงสร้างมีความชัดเจนและอ่านง่าย โดยเฉพาะกับเลย์เอาต์ที่ซับซ้อน มักใช้กับคุณสมบัติ grid-area

การใช้งาน grid-template-areas ให้กำหนดชื่อพื้นที่ Grid Area ผ่าน grid-template-areas ใน Grid Container โดยชื่อเหล่านี้จะใช้อ้างอิงกับแต่ละ Grid Item เพื่อกำหนดตำแนห่งในพื้นที่ต้องการ

Loading...

`grid-area`

grid-area ใช้สำหรับกำหนดตำแหน่งและขนาดพื้นที่ในกริดสำหรับ Grid Item โดยตรง โดยอ้างอิงจาก Grid Line (เส้นกริด)

ซึ่ง grid-area สามารถทำงานได้สองรูปแบบ ได้แก่:

กำหนดตำแหน่งและขนาดโดยอ้างอิง Grid Line (รูปแบบตัวเลข)
กำหนดตำแหน่งโดย อ้างอิงชื่อของพื้นที่ (Area Names) ที่นิยามไว้ใน grid-template-areas

1. การกำหนดตำแหน่งและขนาดโดยอ้างอิง Grid Line (ตัวเลข)

การกำหนดตำแหน่งและขนาดโดยอ้างอิง Grid Line ใช้ค่าตัวเลขเพื่อกำหนดตำแหน่งและขนาดของ Grid Item โดยตรง

grid-area จะอ้างอิงเส้นเริ่มต้น (start-row, start-column) และเส้นสิ้นสุด (end-row, end-column) ของ Item ใน Grid Layout

Loading...

ตัวอย่างการใช้ grid-area โดยอ้างอิง Grid Line

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;

  }
  .item:nth-child(1) {
      grid-area: 1 / 1 / 2 / 3; /* กำหนดพื้นที่ด้วยเส้นกริด */
  }

</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;

  }
  .item:nth-child(1) {
      grid-area: 1 / 1 / 2 / 3; /* กำหนดพื้นที่ด้วยเส้นกริด */
  }

</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Result

2.การกำหนดตำแหน่งโดยอ้างอิงชื่อ (Area Names)

grid-area ยังสามารถใช้ร่วมกับการนิยามชื่อพื้นที่ใน grid-template-areas ซึ่งช่วยให้โครงสร้างมีความชัดเจนและอ่านง่ายขึ้น อย่างเช่นการจัดเลย์เอาต์ที่ซับซ้อน

สมมติเรากำลังสร้างเลย์เอาต์แบบพื้นฐาน เช่นเว็บไซต์ที่มีพื้นที่ Header, Nav, Sidebar, Main, Footer:

ตัวอย่างการใช้ grid-area โดยอ้างอิงชื่อ

index.html

<style>
  .container {  
      display: grid;  
      grid-template-areas:   
      "header header header"  
      "nav main aside"  
      "footer footer footer";  
      grid-template-columns: 1fr 2fr 1fr; /* คอลัมน์แบบ Flexible */  
      grid-template-rows: 100px 1fr 50px; /* ความสูงแต่ละแถว */ 
      height: 100%; 
  }
  header {  
      grid-area: header;  
  }  
  nav {  
      grid-area: nav;  
  }  
  main {  
      grid-area: main;  
  }  
  aside {  
      grid-area: aside;  
  }  
  footer {  
      grid-area: footer;  
  }
</style>
<div class="container">
  <header>Header</header>
  <nav>Sidebar</nav>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

<style>
  .container {  
      display: grid;  
      grid-template-areas:   
      "header header header"  
      "nav main aside"  
      "footer footer footer";  
      grid-template-columns: 1fr 2fr 1fr; /* คอลัมน์แบบ Flexible */  
      grid-template-rows: 100px 1fr 50px; /* ความสูงแต่ละแถว */ 
      height: 100%; 
  }
  header {  
      grid-area: header;  
  }  
  nav {  
      grid-area: nav;  
  }  
  main {  
      grid-area: main;  
  }  
  aside {  
      grid-area: aside;  
  }  
  footer {  
      grid-area: footer;  
  }
</style>
<div class="container">
  <header>Header</header>
  <nav>Sidebar</nav>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

style.css

body,
html {
  height: 100%;
}
header,
nav,
main,
aside,
footer {
  padding: 1rem;
  background-color: var(--color-primary);
  border: 2px solid var(--color-secondary);
  }
  header {
  --color-primary: lightgreen;
  --color-secondary: green;
  }
  nav {
  --color-primary: lightblue;
  --color-secondary: blue;
  }
  main {
  --color-primary: lightcoral;
  --color-secondary: coral;
  }
  aside {
  --color-primary: lightgoldenrodyellow;
  --color-secondary: goldenrod;
  }
  footer {
  --color-primary: lightgray;
  --color-secondary: gray;
  }

body,
html {
  height: 100%;
}
header,
nav,
main,
aside,
footer {
  padding: 1rem;
  background-color: var(--color-primary);
  border: 2px solid var(--color-secondary);
  }
  header {
  --color-primary: lightgreen;
  --color-secondary: green;
  }
  nav {
  --color-primary: lightblue;
  --color-secondary: blue;
  }
  main {
  --color-primary: lightcoral;
  --color-secondary: coral;
  }
  aside {
  --color-primary: lightgoldenrodyellow;
  --color-secondary: goldenrod;
  }
  footer {
  --color-primary: lightgray;
  --color-secondary: gray;
  }

Result

CSS Grid's Fluid Grids

Fluid Grids หมายถึงเทคนิคการสร้างเลย์เอาต์กริดที่ปรับขนาดและจำนวนคอลัมน์อัตโนมัติตามขนาดคอนเทนเนอร์หรือหน้าจอ โดยไม่ต้องใช้ Media Queries โดยใช้ฟีเจอร์หลักของ CSS Grid ดังนี้:

1. `minmax()`

การใช้ minmax กับ CSS Grid จะใช้กำหนดขนาดมากสุดและน้อยที่สุดได้

ตัวอย่างการทำ Fluid Grids ด้วย minmax()

index.html

<style>
.container {
  display: grid;
  grid-template-columns:
    minmax(75px, 1fr)
    minmax(150px, 1fr);
  gap: 16px;
}
</style>

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns:
    minmax(75px, 1fr)
    minmax(150px, 1fr);
  gap: 16px;
}
</style>

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>

Result

จากตัวอย่างอธิบายได้ว่า ในตอนแรกเรามีขนาดของ column เท่ากันทั้ง 2 columns เพราะถูกตั้งค่าไว้ที่ 1fr แต่ column แรกนั้นจะไม่หดลงไปน้อยกว่า 75px ส่วน column ที่สองก็จะไม่หดลงไปน้อยกว่า 150px นี้จึงเป็นการกำหนดค่าความกว้างขั้นต่ำหรือเปรียบเสมือนกำหนด min-width ให้นั้นเอง

ในทำนองเดียวกันเมื่อเรานำไปใช้กับ grid-template-rows ก็จะเป็นการกำหนดความสูงขั้นต่ำหรือ min-height ได้นั้นเอง

2. `auto-fill`

เราสามารถใช้ auto-fill มาใช้ในการสร้างคอลัมน์ให้เต็มพื้นที่โดยไม่สนใจจำนวนไอเท็ม ก็คือหากมีพื้นที่เหลือ จะสร้างคอลัมน์ว่าง (แม้ไม่มีไอเท็ม) เหมาะสำหรับกรณีที่ต้องการคงจำนวนคอลัมน์ให้สม่ำเสมอ

ตัวอย่างการทำ Fluid Grids ด้วย auto-fill

index.html

<style>
  .container {  
      display: grid;  
      grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
      /*grid-template-columns: repeat(6, 1fr)*/  
  }
</style>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

<style>
  .container {  
      display: grid;  
      grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
      /*grid-template-columns: repeat(6, 1fr)*/  
  }
</style>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

Result

ลองใช้ inspect ดู grid โดยใช้ devtools บน browser และลองย่อขนาดฝั่น Result จะสังเกตุได้ว่ามีจำนวนคอลัมน์เพิ่มขึ้นเพราะเมื่อมีพื้นที่ว่าง auto-fill จะสร้างคอลัมน์เพิ่มขึ้นมาเติมพื้นที่ และเมื่อย่อขนาดจนแต่ละ Item จริงมีขนาด 75px ก็จะเห็นว่าจำนวนคอลัมน์จะลดลง

Grid Fundamentals

Grid Container Properties

grid-template-columns

grid-template-rows

grid-auto-flow

Gaps

repeat()

Grid Alignment

Aligning Columns

Aligning rows

Self-alignment

Grid Item Properties

Grid Lines

การนับ Grid Line

แนวตั้ง (Column Lines)

แนวนอน (Row Lines)

grid-column

grid-row

การใช้งานร่วมกัน

Grid Template Areas และ Grid Area

grid-template-areas

grid-area

1. การกำหนดตำแหน่งและขนาดโดยอ้างอิง Grid Line (ตัวเลข)

2.การกำหนดตำแหน่งโดยอ้างอิงชื่อ (Area Names)

CSS Grid's Fluid Grids

1. minmax()

2. auto-fill

`grid-template-columns`

`grid-template-rows`

`grid-auto-flow`

`Gaps`

`repeat()`

`grid-column`

`grid-row`

`grid-template-areas`

`grid-area`

1. `minmax()`

2. `auto-fill`