ทุกสิ่งที่คุณต้องรู้เพื่อใช้ CSS Grid อย่างมืออาชีพ

ทุกสิ่งที่คุณต้องรู้เพื่อใช้ CSS Grid อย่างมืออาชีพ เครื่องมือ CSS Grid ทั้งหมดที่คุณต้องการเพื่อสร้างเลย์เอาต์เว็บไซต์ขั้นพื้นฐานและขั้นสูงในรูปแบบที่ตอบสนองซึ่งดูดีในทุกอุปกรณ์ CSS Grid Handbook - คู่มือฉบับสมบูรณ์เกี่ยวกับ Grid Containers และ Grid Item

CSS Grid มอบเครื่องมือในการสร้างเลย์เอาต์เว็บไซต์ขั้นพื้นฐานและขั้นสูงในรูปแบบที่ตอบสนองซึ่งดูดีบนอุปกรณ์มือถือ แท็บเล็ต และเดสก์ท็อป

บทช่วยสอนนี้กล่าวถึงทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อใช้ CSS Grid อย่างมืออาชีพ

สารบัญ

1. CSS Grid คืออะไร?
2. Grid Container vs. Grid Item: ความแตกต่างคืออะไร?
3. gridค่าใน CSS คืออะไร ?
4. inline-gridค่าใน CSS คืออะไร ?
5. คุณสมบัติสำหรับการระบุเค้าโครงของกริด
6. คุณสมบัติของ Grid Container คืออะไร?
7. grid-template-columnsคุณสมบัติของ CSS Grid คืออะไร ?
8. grid-template-rowsคุณสมบัติของ CSS Grid คืออะไร ?
9. justify-contentคุณสมบัติของ CSS Grid คืออะไร ?
10. justify-itemsคุณสมบัติของ CSS Grid คืออะไร ?
11. align-contentคุณสมบัติของ CSS Grid คืออะไร ?
12. align-itemsคุณสมบัติของ CSS Grid คืออะไร ?
13. คุณสมบัติของรายการกริดคืออะไร?
14. justify-selfคุณสมบัติของ CSS Grid คืออะไร ?
15. align-selfคุณสมบัติของ CSS Grid คืออะไร ?
16. grid-column-startคุณสมบัติของ CSS Grid คืออะไร ?
17. grid-column-endคุณสมบัติของ CSS Grid คืออะไร ?
18. grid-columnคุณสมบัติของ CSS Grid คืออะไร ?
19. grid-row-startคุณสมบัติของ CSS Grid คืออะไร ?
20. grid-row-endคุณสมบัติของ CSS Grid คืออะไร ?
21. grid-rowคุณสมบัติของ CSS Grid คืออะไร ?
22. grid-areaคุณสมบัติของ CSS Grid คืออะไร ?
23. grid-template-areasคุณสมบัติของ CSS Grid คืออะไร ?
24. วิธีใช้minmax()ฟังก์ชัน CSS เพื่อกำหนดขนาดกริดต่ำสุดและสูงสุด
25. วิธีใช้repeat()ฟังก์ชัน CSS เพื่อกำหนดเส้นตารางด้วยรูปแบบซ้ำๆ
26. ภาพรวม

ดังนั้นโดยไม่ต้องกังวลใจอีกต่อไป มาทำความเข้าใจว่า CSS Grid คืออะไร

---

CSS Grid คืออะไร?

CSS Grid Layout Module ทำให้เบราว์เซอร์แสดงองค์ประกอบ HTML ที่เลือกเป็นโมเดลกล่องตาราง

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

บันทึก:

• "แบบสองมิติ" หมายถึงโมดูลกริดที่อนุญาตให้วางโมเดลนอกกล่องพร้อมกันในแถวและคอลัมน์
• ใช้Flexboxหากคุณต้องการปรับขนาดและเปลี่ยนตำแหน่งองค์ประกอบเพียงมิติเดียว

Grid Container vs. Grid Item: ความแตกต่างคืออะไร?

คอนเทนเนอร์กริดเป็นองค์ประกอบ HTMLที่มีdisplayค่าของคุณสมบัติเป็นgridหรือinline-grid

รายการกริดคือรายการลูกโดยตรงของคอนเทนเนอร์กริด

คอนเทนเนอร์กริด (พื้นที่สีเหลืองขนาดใหญ่ในรูปภาพ) เป็นองค์ประกอบ HTML ที่มีค่าของคุณสมบัติการแสดงเป็นกริดหรืออินไลน์กริด รายการกริด (กล่องเล็กภายในคอนเทนเนอร์สีเหลือง) เป็นรายการย่อยโดยตรงของคอนเทนเนอร์กริด

ค่าใน CSS คืออะไร ?grid

gridบอกให้เบราว์เซอร์แสดงองค์ประกอบ HTML ที่เลือกเป็นโมเดลกริดบ็อกซ์ระดับบล็อก

displayกล่าวอีกนัยหนึ่งคือ การตั้ง ค่าคุณสมบัติขององค์ประกอบ เพื่อ gridเปลี่ยนโมเดลกล่องให้เป็นโมดูลโครงร่างกริดระดับบล็อก

นี่คือตัวอย่าง:

section {
  display: grid;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้gridค่าเพื่อแปลงองค์ประกอบของเอกสาร HTML <section>จาก<section>โหนดปกติเป็นโมเดลกล่องกริดระดับบล็อก

บันทึก:

• คำdisplay: gridสั่งจะสร้างเฉพาะคอนเทนเนอร์กริดแบบคอลัมน์เดียว ดังนั้น รายการกริดจะแสดงในโฟลว์เลย์เอาต์ปกติ (รายการหนึ่งอยู่ด้านล่างรายการอื่น)
• การแปลงโหนดเป็นโมเดลกริดบ็อกซ์ทำให้ลูกโดยตรงขององค์ประกอบกลายเป็นรายการกริด
• คำdisplay: gridสั่งมีผลกับโมเดลกล่องและลูกโดยตรงเท่านั้น ไม่ส่งผลกระทบต่อโหนดหลาน

ตอนนี้เรามาพูดถึงinline-gridคุณค่า

ค่าใน CSS คืออะไร ?inline-grid

inline-gridบอกให้เบราว์เซอร์แสดงองค์ประกอบ HTML ที่เลือกในรูปแบบกล่องกริดระดับอินไลน์

displayกล่าวอีกนัยหนึ่งคือ การตั้ง ค่าคุณสมบัติขององค์ประกอบ เพื่อ inline-gridเปลี่ยนโมเดลกล่องให้เป็นโมดูลเค้าโครงกริดระดับอินไลน์

นี่คือตัวอย่าง:

section {
  display: inline-grid;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้inline-gridค่าเพื่อแปลงองค์ประกอบของเอกสาร HTML <section>จาก<section>โหนดปกติเป็นโมเดลกล่องกริดระดับอินไลน์

บันทึก:

• การแปลงโหนดเป็นโมเดลกริดบ็อกซ์ทำให้ลูกโดยตรงขององค์ประกอบกลายเป็นรายการกริด
• คำdisplay: inline-gridสั่งมีผลกับโมเดลกล่องและลูกโดยตรงเท่านั้น ไม่ส่งผลกระทบต่อโหนดหลาน

คุณสมบัติสำหรับการระบุเค้าโครงของกริด

ในการแปลงองค์ประกอบ HTML ปกติเป็นโมเดลกล่องกริด (หรืออินไลน์กริด) โมดูลโครงร่างกริดจะจัดเตรียมคุณสมบัติสองประเภทสำหรับการวางตำแหน่งกล่องกริดและชายน์โดยตรง:

• Grid container's properties
• Grid item's properties

What Are the Grid Container's Properties?

A grid container's properties specify how browsers should layout items within the grid box model.

Note: We define a grid container's property on the container, not its items.

The eight (8) types of grid container properties are:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows
• justify-content
• justify-items
• align-content
• align-items

Let's discuss the eight types now.

What Is CSS Grid's grid-template-columns Property?

grid-template-columns specifies the number and widths of columns browsers should display in the selected grid container.

Example 1: How to create a two-column grid container

section {
  display: grid;
  grid-template-columns: 95px 1fr;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display two columns of different widths in the selected <section> grid container.

Note: We used the fr (fraction) unit to scale the second column relative to the fraction of available space in the grid container.

Example 2: How to create a three-column grid container

section {
  display: grid;
  grid-template-columns: 15% 60% 25%;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display three columns of different widths in the selected <section> grid container.

Note:

• You can use the grid-auto-columns property to specify default column widths for all the grid container's columns. For instance, grid-auto-columns: 150px will set default widths of 150px for all columns. But a grid-template-columns declaration will override it.
• Explicit grid columns are the columns you explicitly define with the grid-template-columns property.
• Implicit grid columns are the columns browsers create automatically. We use the grid-auto-columns properties to specify track sizes for implicit columns.

Tip:

• Use the CSS repeat() function to specify grid-template-columns values with repeated patterns. We will discuss the repeat() function later in this tutorial.
• Use the CSS column-gap property to create gaps between grid columns.

What Is CSS Grid's grid-template-rows Property?

grid-template-rows specifies the number and heights of rows browsers should display in the selected grid container.

Example 1: How to create a three-row grid container

section {
  display: grid;
  grid-template-rows: 95px 1fr 70px;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-rows property to display three rows of different heights in the selected <section> grid container.

หมายเหตุ:เราใช้frหน่วย (เศษส่วน)เพื่อปรับขนาดแถวที่สองเทียบกับเศษส่วนของพื้นที่ว่างในคอนเทนเนอร์กริด

ตัวอย่างที่ 2: วิธีสร้างคอนเทนเนอร์กริดสามแถวและสี่คอลัมน์

section {
  display: grid;
  grid-template-rows: 90px 300px 1fr;
  grid-template-columns: auto auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้grid-template-rowsคุณสมบัติเพื่อแสดงสามคอลัมน์ที่มีความสูงต่างกันใน<section>คอนเทนเนอร์กริด ที่เลือก

บันทึก:

• คุณสามารถใช้grid-auto-rowsคุณสมบัติเพื่อระบุความสูงของแถวเริ่มต้นสำหรับแถวของคอนเทนเนอร์กริดทั้งหมด ตัวอย่างเช่นgrid-auto-rows: 100pxจะกำหนดความสูงเริ่มต้นของ100pxสำหรับทุกแถว แต่grid-template-rowsการประกาศจะลบล้างมัน
• แถวกริดที่ชัดเจนคือแถวที่คุณกำหนดอย่างชัดเจนด้วยgrid-template-rowsคุณสมบัติ
• แถวตารางโดยนัยคือแถวที่เบราว์เซอร์สร้างขึ้นโดยอัตโนมัติ เราใช้grid-auto-rowsคุณสมบัติเพื่อระบุ ขนาด แทร็กสำหรับแถวโดยนัย

เคล็ดลับ:

• ใช้ฟังก์ชัน CSS repeat()เพื่อระบุgrid-template-rowsค่าที่มีรูปแบบซ้ำๆ เราจะพูดถึงrepeat()ฟังก์ชันนี้ในภายหลังในบทช่วยสอนนี้
• ใช้คุณสมบัติCSSrow-gapเพื่อสร้างช่องว่างระหว่างแถวของตาราง

คุณสมบัติของ CSS Grid คืออะไร ?justify-content

ปรับเนื้อหาระบุว่าเบราว์เซอร์ควรวางตำแหน่งคอลัมน์ของคอนเทนเนอร์กริดตามแกนแถวอย่างไร

บันทึก:

• แกนแถวบางครั้งเรียกว่าแกนอินไลน์
• คุณสมบัติ นี้justify-contentใช้งานได้หากความกว้างของคอลัมน์ทั้งหมดน้อยกว่าความกว้างของคอนเทนเนอร์กริด กล่าวอีกนัยหนึ่ง คุณต้องมีพื้นที่ว่างตามแกนแถวของคอนเทนเนอร์เพื่อจัดแนวคอลัมน์ให้ชิดซ้ายหรือขวา

คุณสมบัติjustify-contentยอมรับค่าต่อไปนี้:

• start
• center
• end
• stretch
• space-between
• space-around
• space-evenly

เรามาพูดถึงค่าเหล่านี้กัน

อะไรอยู่justify-content: startใน CSS Grid?

startวางตำแหน่งคอลัมน์ของคอนเทนเนอร์กริดด้วยขอบเริ่มต้นของแถว

ปรับตำแหน่งค่าเริ่มต้นของเนื้อหาของคอลัมน์ไปยังขอบเริ่มต้นแถวของคอนเทนเนอร์กริด

นี่คือตัวอย่าง:

section {
  display: grid;
  justify-content: start;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้startค่าเพื่อวางตำแหน่ง<section>คอลัมน์ของขอบแถวเริ่มต้นของคอนเทนเนอร์กริด

อะไรอยู่justify-content: centerใน CSS Grid?

centerวางตำแหน่งคอลัมน์ของคอนเทนเนอร์กริดให้อยู่กึ่งกลางของแกนแถวของกริด

ปรับตำแหน่งค่ากึ่งกลางของเนื้อหาให้อยู่ในตำแหน่งกึ่งกลางของคอนเทนเนอร์กริด

นี่คือตัวอย่าง:

section {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้centerค่าเพื่อวางตำแหน่ง<section>คอลัมน์ของ "ให้อยู่กึ่งกลางของคอนเทนเนอร์กริด"

อะไรอยู่justify-content: endใน CSS Grid?

endวางตำแหน่งคอลัมน์ของคอนเทนเนอร์กริดด้วยขอบท้ายแถว

ปรับตำแหน่งค่าสิ้นสุดของเนื้อหาของคอลัมน์ไปยังขอบท้ายแถวของคอนเทนเนอร์กริด

นี่คือตัวอย่าง:

section {
  display: grid;
  justify-content: end;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้endค่าเพื่อวางตำแหน่ง<section>คอลัมน์ของขอบแถวท้ายแถวของคอนเทนเนอร์กริด

อะไรอยู่justify-content: space-betweenใน CSS Grid?

space-betweenทำสิ่งต่อไปนี้:

• วางตำแหน่งคอลัมน์แรกของคอนเทนเนอร์กริดด้วยขอบเริ่มต้นของแถว
• วางตำแหน่งคอลัมน์สุดท้ายของคอนเทนเนอร์ด้วยขอบท้ายแถว
• สร้างระยะห่างระหว่างคอลัมน์แต่ละคู่ระหว่างคอลัมน์แรกและคอลัมน์สุดท้าย

justify-content's space-between value creates even spacing between each pair of columns between the first and last grid column

Here's an example:

section {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-between value to create even spacing between each pair of columns between the first and last grid column.

What is justify-content: space-around in CSS Grid?

space-around assigns equal spacing to each side of a grid container's columns.

Therefore, the space before the first column and after the last one is half the width of the space between each pair of columns.

justify-content's space-around value assigns equal spacing to each side of the grid container's columns

Here's an example:

section {
  display: grid;
  justify-content: space-around;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the grid container's columns.

What is justify-content: space-evenly in CSS Grid?

space-evenly assigns even spacing to both ends of a grid container and between its columns.

justify-content's space-evenly value assigns even spacing to both ends of the grid container and between its columns

Here's an example:

section {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the grid container and between its columns.

What Is CSS Grid's justify-items Property?

justify-items specifies the default justify-self value for all the grid items.

The justify-items property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values.

What is justify-items: stretch in CSS Grid?

stretch is justify-items' default value. It stretches the grid container's items to fill their individual cells' row (inline) axis.

justify-items' stretch value stretches grid items to fill their individual cells' row axis

Here's an example:

section {
  display: grid;
  justify-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the stretch value to stretch the grid items to fill their individual cells' row axis.

What is justify-items: start in CSS Grid?

start positions a grid container's items with the row-start edge of their individual cells' row axis.

justify-items' start value positions grid items to their individual cells' row-start edge

Here's an example:

section {
  display: grid;
  justify-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the start value to position the grid items to their individual cells' row-start edge.

What is justify-items: center in CSS Grid?

center positions a grid container's items to the center of their individual cells' row axis.

justify-items' center value positions grid items to their individual cells' center

Here's an example:

section {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

ข้อมูลโค้ดด้านบนใช้centerค่าเพื่อวางตำแหน่งรายการกริดให้อยู่กึ่งกลางของแกนแถวของแต่ละเซลล์

อะไรอยู่justify-items: endใน CSS Grid?

endวางตำแหน่งรายการของคอนเทนเนอร์กริดด้วยขอบท้ายแถวของแกนแถวของแต่ละเซลล์

ค่าสิ้นสุดของรายการที่จัดชิดขอบจะจัดตำแหน่งรายการกริดไปยังขอบท้ายแถวของแต่ละเซลล์

นี่คือตัวอย่าง:

section {
  display: grid;
  justify-items: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้endค่าเพื่อวางตำแหน่งรายการกริดไปยังขอบท้ายแถวของเซลล์แต่ละเซลล์

คุณสมบัติของ CSS Grid คืออะไร ?align-content

align-contentระบุว่าเบราว์เซอร์ควรจัดแนวแถวของคอนเทนเนอร์กริดตามแกนคอลัมน์ของคอนเทนเนอร์อย่างไร

บันทึก:

• แกนคอลัมน์บางครั้งเรียกว่าแกนบล็อก
• คุณสมบัติalign-contentจะทำงานถ้าความสูงของแถวทั้งหมดน้อยกว่าความสูงของคอนเทนเนอร์กริด กล่าวอีกนัยหนึ่ง คุณต้องมีพื้นที่ว่างตามแกนคอลัมน์ของคอนเทนเนอร์เพื่อจัดเรียงแถวขึ้นหรือลง

คุณสมบัติalign-contentยอมรับค่าต่อไปนี้:

• start
• center
• end
• stretch
• space-between
• space-around
• space-evenly

เรามาพูดถึงค่าเหล่านี้กัน

อะไรอยู่align-content: startใน CSS Grid?

startจัดแนวแถวของคอนเทนเนอร์กริดให้ตรงกับขอบเริ่มต้นของคอลัมน์ของแกนคอลัมน์ของกริด

ค่าเริ่มต้นของการจัดแนวเนื้อหาจะจัดแนวแถวให้ชิดขอบเริ่มต้นคอลัมน์ของคอนเทนเนอร์กริด

นี่คือตัวอย่าง:

section {
  display: grid;
  align-content: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้startค่าเพื่อจัด<section>แถวของแถวให้ตรงกับขอบเริ่มต้นคอลัมน์ของคอนเทนเนอร์กริด

อะไรอยู่align-content: centerใน CSS Grid?

centerจัดแนวแถวของคอนเทนเนอร์กริดให้อยู่กึ่งกลางของแกนคอลัมน์ของกริด

align-content's center value aligns rows to the center of the grid container

section {
  display: grid;
  align-content: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the center value to align the <section>'s rows to the center of the grid container.

What is align-content: end in CSS Grid?

end aligns a grid container's rows with the column-end edge of the grid's column axis.

align-content's end value aligns rows to the grid container's column-end edge

Here's an example:

section {
  display: grid;
  align-content: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the end value to align the <section>'s rows to the grid container's column-end edge.

What is align-content: space-between in CSS Grid?

space-between does the following:

• It aligns a grid container's first row with its column-start edge.
• It aligns the container's last row with the column-end edge.
• It creates even spacing between each pair of rows between the first and last row.

การจัดตำแหน่งเนื้อหาช่องว่างระหว่างค่าสร้างระยะห่างระหว่างแถวแต่ละคู่ระหว่างแถวกริดแรกและแถวสุดท้าย

นี่คือตัวอย่าง:

section {
  display: grid;
  align-content: space-between;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้space-betweenค่าเพื่อสร้างระยะห่างระหว่างแถวแต่ละคู่ระหว่างแถวกริดแรกและแถวสุดท้าย

อะไรอยู่align-content: space-aroundใน CSS Grid?

space-aroundกำหนดระยะห่างเท่ากันให้กับแต่ละด้านของแถวของคอนเทนเนอร์กริด

ดังนั้นช่องว่างก่อนแถวแรกและหลังแถวสุดท้ายคือครึ่งหนึ่งของความกว้างของช่องว่างระหว่างแถวแต่ละคู่

ค่าช่องว่างรอบ ๆ ของเนื้อหาจะกำหนดระยะห่างที่เท่ากันให้กับแต่ละด้านของแถวของคอนเทนเนอร์กริด

นี่คือตัวอย่าง:

section {
  display: grid;
  align-content: space-around;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้space-aroundค่าเพื่อกำหนดระยะห่างที่เท่ากันให้กับแต่ละด้านของแถวของคอนเทนเนอร์กริด

อะไรอยู่align-content: space-evenlyใน CSS Grid?

space-evenlyกำหนดระยะห่างเท่ากันให้กับปลายทั้งสองของคอนเทนเนอร์กริดและระหว่างแถว

ค่าช่องว่างเท่า ๆ กันของเนื้อหาจะกำหนดระยะห่างที่เท่ากันให้กับปลายทั้งสองของคอนเทนเนอร์กริดและระหว่างแถว

นี่คือตัวอย่าง:

section {
  display: grid;
  align-content: space-evenly;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

ลองใช้ StackBlitz

เราใช้space-evenlyค่านี้เพื่อกำหนดระยะห่างเท่ากันให้กับปลายทั้งสองด้านของคอนเทนเนอร์กริดและระหว่างแถว

คุณสมบัติของ CSS Grid คืออะไร ?align-items

จัดรายการระบุalign-selfค่าเริ่มต้นสำหรับรายการกริดทั้งหมด

คุณสมบัติalign-itemsยอมรับค่าต่อไปนี้:

• stretch
• start
• center
• end

เรามาพูดถึงค่าสี่ค่าด้านล่างกัน

อะไรอยู่align-items: stretchใน CSS Grid?

stretchเป็นค่าเริ่มต้นalign-itemsสำหรับ มันยืดรายการของคอนเทนเนอร์กริดเพื่อเติมแกนคอลัมน์ (บล็อก) ของแต่ละเซลล์

ค่าการยืดของรายการจัดแนวจะยืดรายการกริดเพื่อเติมแกนคอลัมน์ของแต่ละเซลล์

นี่คือตัวอย่าง:

section {
  display: grid;
  align-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้stretchค่าเพื่อยืดรายการกริดเพื่อเติมแกนคอลัมน์ของแต่ละเซลล์

อะไรอยู่align-items: startใน CSS Grid?

startจัดแนวรายการของคอนเทนเนอร์กริดให้ตรงกับขอบเริ่มต้นของคอลัมน์ของแกนคอลัมน์ของแต่ละเซลล์

ค่าเริ่มต้นของ align-ites จะจัดแนวรายการกริดให้ตรงกับขอบเริ่มต้นของคอลัมน์ของแต่ละเซลล์

นี่คือตัวอย่าง:

section {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้startค่าเพื่อจัดแนวรายการกริดให้ตรงกับขอบเริ่มต้นของคอลัมน์ของแต่ละเซลล์

อะไรอยู่align-items: centerใน CSS Grid?

centerจัดแนวรายการของคอนเทนเนอร์กริดให้อยู่กึ่งกลางของแกนคอลัมน์ของแต่ละเซลล์

ค่ากึ่งกลางของรายการที่จัดตำแหน่งจะจัดรายการกริดให้อยู่กึ่งกลางของเซลล์แต่ละเซลล์

นี่คือตัวอย่าง:

section {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้centerค่าเพื่อจัดแนวรายการกริดให้อยู่กึ่งกลางของแกนคอลัมน์ของแต่ละเซลล์

อะไรอยู่align-items: endใน CSS Grid?

endจัดแนวรายการของคอนเทนเนอร์กริดให้ตรงกับขอบท้ายคอลัมน์ของแกนคอลัมน์ของแต่ละเซลล์

ค่าสิ้นสุดของรายการที่จัดตำแหน่งจะจัดรายการกริดให้ตรงกับขอบท้ายคอลัมน์ของแต่ละเซลล์

นี่คือตัวอย่าง:

section {
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้endค่าเพื่อจัดแนวรายการกริดให้ตรงกับขอบท้ายคอลัมน์ของแต่ละเซลล์

ตอนนี้เราทราบประเภทของคุณสมบัติของคอนเทนเนอร์กริด CSS แล้ว เราสามารถพูดคุยเกี่ยวกับคุณสมบัติของรายการกริดได้

คุณสมบัติของรายการกริดคืออะไร?

คุณสมบัติของรายการกริดจะระบุวิธีที่เบราว์เซอร์ควรจัดวางรายการที่ระบุภายในโมเดลกริดบ็อกซ์

Note: We define a grid item's property on the item, not its container.

The ten (10) types of grid item properties are:

• justify-self
• align-self
• grid-column-start
• grid-column-end
• grid-column
• grid-row-start
• grid-row-end
• grid-row
• grid-area
• grid-template-areas

Let's discuss the ten types now.

What Is CSS Grid's justify-self Property?

justify-self specifies how browsers should position the selected grid item along its cell's row (inline) axis.

The justify-self property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values.

What is justify-self: stretch in CSS Grid?

stretch is justify-self's default value. It stretches the selected grid item to fill its cell's row (inline) axis.

justify-self's stretch value stretches the selected grid item to fill its cell's row axis

Here's an example:

.grid-item1 {
  justify-self: stretch;
}

Try it on StackBlitz

ตัวอย่างด้านบนใช้stretchค่าเพื่อยืดgrid-item1เพื่อเติมแกนแถวของเซลล์

อะไรอยู่justify-self: startใน CSS Grid?

startวางตำแหน่งรายการกริดที่เลือกด้วยขอบเริ่มต้นแถวของแกนแถวของเซลล์

ค่าเริ่มต้นของ justify-self จะวางตำแหน่งรายการกริดที่เลือกไว้ที่ขอบเริ่มต้นแถวของเซลล์

นี่คือตัวอย่าง:

.grid-item1 {
  justify-self: start;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้startค่าเพื่อวางตำแหน่งgrid-item1ที่ขอบเริ่มต้นแถวของเซลล์

อะไรอยู่justify-self: centerใน CSS Grid?

centerวางตำแหน่งรายการกริดที่เลือกไว้ตรงกลางแกนแถวของเซลล์

ค่ากึ่งกลางของ justify-self จะวางตำแหน่งรายการกริดที่เลือกไว้ที่กึ่งกลางเซลล์

นี่คือตัวอย่าง:

.grid-item1 {
  justify-self: center;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้centerค่าเพื่อจัดตำแหน่งgrid-item1ให้อยู่กึ่งกลางเซลล์

อะไรอยู่justify-self: endใน CSS Grid?

endวางตำแหน่งรายการกริดที่เลือกด้วยขอบท้ายแถวของแกนแถวของเซลล์

ค่าสิ้นสุดของ justify-self จะวางตำแหน่งรายการกริดที่เลือกไว้ที่ขอบท้ายแถวของเซลล์

นี่คือตัวอย่าง:

.grid-item1 {
  justify-self: end;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้endค่าเพื่อวางตำแหน่งgrid-item1ที่ขอบท้ายแถวของเซลล์

คุณสมบัติของ CSS Grid คืออะไร ?align-self

align-selfระบุว่าเบราว์เซอร์ควรจัดตำแหน่งรายการกริดที่เลือกตามแกนคอลัมน์ (บล็อก) ของเซลล์อย่างไร

คุณสมบัติalign-selfยอมรับค่าต่อไปนี้:

• stretch
• start
• center
• end

เรามาพูดถึงค่าสี่ค่าด้านล่างกัน

อะไรอยู่align-self: stretchใน CSS Grid?

stretchเป็นalign-selfค่าเริ่มต้นของ ขยายรายการกริดที่เลือกให้เต็มแกนคอลัมน์ (บล็อก) ของเซลล์

ค่ายืดของ align-self จะยืดรายการกริดที่เลือกเพื่อเติมแกนคอลัมน์ของเซลล์

นี่คือตัวอย่าง:

.grid-item1 {
  align-self: stretch;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้stretchค่าที่จะยืดgrid-item1เพื่อเติมแกนคอลัมน์ของเซลล์

อะไรอยู่align-self: startใน CSS Grid?

startจัดแนวรายการกริดที่เลือกให้ตรงกับขอบเริ่มต้นของคอลัมน์ของแกนคอลัมน์ของเซลล์

ค่าเริ่มต้นของ align-self จะจัดแนวรายการกริดที่เลือกให้ตรงกับขอบเริ่มต้นของคอลัมน์ของเซลล์

นี่คือตัวอย่าง:

.grid-item1 {
  align-self: start;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้startค่าเพื่อจัดแนวให้ชิดgrid-item1กับขอบเริ่มต้นของคอลัมน์ของเซลล์

อะไรอยู่align-self: centerใน CSS Grid?

centerจัดแนวรายการกริดที่เลือกให้อยู่กึ่งกลางของแกนคอลัมน์ของเซลล์

ค่ากึ่งกลางของ align-self จะจัดรายการกริดที่เลือกให้อยู่กึ่งกลางของเซลล์

นี่คือตัวอย่าง:

.grid-item1 {
  align-self: center;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้centerค่าเพื่อจัดตำแหน่งgrid-item1ให้อยู่กึ่งกลางเซลล์

อะไรอยู่align-self: endใน CSS Grid?

endจัดรายการกริดที่เลือกให้ตรงกับขอบท้ายคอลัมน์ของแกนคอลัมน์ของเซลล์

ค่าสิ้นสุดของ align-self จะจัดรายการกริดที่เลือกให้ตรงกับขอบปลายคอลัมน์ของเซลล์

นี่คือตัวอย่าง:

.grid-item1 {
  align-self: end;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้endค่าเพื่อจัดแนว grid-item1 ให้ตรงกับขอบท้ายคอลัมน์ของเซลล์

คุณสมบัติของ CSS Grid คืออะไร ?grid-column-start

grid-column-startระบุว่ารายการกริดที่เลือกควรเริ่มต้น (หรือขยาย) ตามแกนแถว (อินไลน์) ของคอนเทนเนอร์กริด

คุณสมบัติgrid-column-startยอมรับค่าต่อไปนี้:

• auto
• <column-line-number>
• span <number-of-columns>

ตัวอย่างที่ 1: วิธีเริ่มรายการกริดที่เลือกโดยอัตโนมัติตามโฟลว์ของคอลัมน์ปกติ

.grid-item1 {
  grid-column-start: auto;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้autoค่าเพื่อเริ่มอัตโนมัติgrid-item1ตามโฟลว์เค้าโครงคอลัมน์ปกติ

ตัวอย่างที่ 2: วิธีเริ่มรายการกริดที่เลือกที่บรรทัดคอลัมน์ 3

.grid-item1 {
  grid-column-start: 3;
}

ลองใช้ StackBlitz

The snippet above used the grid-column-start property to start grid-item1 at column line 3.

Example 3: How to span the selected grid item across two columns

.grid-item1 {
  grid-column-start: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two columns.

What Is CSS Grid's grid-column-end Property?

grid-column-end specifies where the selected grid item should end (or span) along the grid container's row (inline) axis.

The grid-column-end property accepts the following values:

• auto
• <column-line-number>
• span <number-of-columns>

Example 1: How to auto-end the selected grid item following the normal column flow

.grid-item1 {
  grid-column-end: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-end grid-item1 according to the normal layout flow.

Example 2: How to end the selected grid item at column line 3

.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Try it on StackBlitz

ตัวอย่างด้านบนใช้grid-column-endพร็อพเพอร์ตี้เพื่อสิ้นสุดgrid-item1ที่คอลัมน์บรรทัดที่ 3

ตัวอย่างที่ 3: วิธีขยายรายการกริดที่เลือกในสองคอลัมน์

.grid-item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้span 2ค่าเพื่อขยายgrid-item1ระหว่างสองคอลัมน์

คุณสมบัติของ CSS Grid คืออะไร ?grid-column

ตารางคอลัมน์เป็นชวเลขสำหรับคุณสมบัติgrid-column-startและgrid-column-end

กล่าวอีกนัยหนึ่งแทนที่จะเขียนว่า:

.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

คุณสามารถใช้grid-columnคุณสมบัติเพื่อย่อรหัสของคุณดังนี้:

.grid-item1 {
  grid-column: 1 / 3;
}

นี่คือไวยากรณ์ของคอลัมน์กริด:

grid-column: grid-column-start / grid-column-end;

คุณสมบัติของ CSS Grid คืออะไร ?grid-row-start

grid-row-startระบุว่ารายการกริดที่เลือกควรเริ่มต้น (หรือขยาย) ตามแกนคอลัมน์ (บล็อก) ของคอนเทนเนอร์กริด

คุณสมบัติgrid-row-startยอมรับค่าต่อไปนี้:

• auto
• <row-line-number>
• span <number-of-rows>

ตัวอย่างที่ 1: วิธีเริ่มรายการกริดที่เลือกโดยอัตโนมัติตามโฟลว์ของแถวปกติ

.grid-item1 {
  grid-row-start: auto;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้autoค่าเพื่อเริ่มอัตโนมัติgrid-item1ตามโฟลว์เค้าโครงแถวปกติ

ตัวอย่างที่ 2: วิธีเริ่มรายการกริดที่เลือกที่แถวบรรทัดที่ 3

.grid-item1 {
  grid-row-start: 3;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้grid-row-startพร็อพเพอร์ตี้เพื่อเริ่มต้นgrid-item1ที่บรรทัดที่ 3

ตัวอย่างที่ 3: วิธีขยายรายการกริดที่เลือกข้ามสองแถว

.grid-item1 {
  grid-row-start: span 2;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้span 2ค่าเพื่อครอบคลุมgrid-item1สองแถว

คุณสมบัติของ CSS Grid คืออะไร ?grid-row-end

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

คุณสมบัติgrid-row-endยอมรับค่าต่อไปนี้:

• auto
• <column-line-number>
• span <number-of-columns>

ตัวอย่างที่ 1: วิธีสิ้นสุดรายการกริดที่เลือกโดยอัตโนมัติตามการไหลของแถวปกติ

.grid-item1 {
  grid-row-end: auto;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้autoค่าเพื่อสิ้นสุดอัตโนมัติgrid-item1ตามโฟลว์เค้าโครงแถวปกติ

ตัวอย่างที่ 2: วิธีสิ้นสุดรายการกริดที่เลือกที่แถวบรรทัดที่ 5

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้grid-row-endคุณสมบัติเพื่อสิ้นสุดgrid-item1ที่แถวบรรทัดที่ 5

ตัวอย่างที่ 3: วิธีการขยายรายการตารางที่เลือกข้ามสามแถว

.grid-item1 {
  grid-row-end: span 3;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้span 3ค่าเพื่อครอบคลุมgrid-item1สามแถว

คุณสมบัติของ CSS Grid คืออะไร ?grid-row

แถวตารางเป็นชวเลขสำหรับคุณสมบัติgrid-row-startและgrid-row-end

กล่าวอีกนัยหนึ่งแทนที่จะเขียนว่า:

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

คุณสามารถใช้grid-rowคุณสมบัติเพื่อย่อรหัสของคุณดังนี้:

.grid-item1 {
  grid-row: 1 / 5;
}

นี่คือไวยากรณ์ของแถวกริด:

grid-row: grid-row-start / grid-row-end;

คุณสมบัติของ CSS Grid คืออะไร ?grid-area

คุณสามารถใช้ คุณสมบัติ พื้นที่กริดเพื่อวัตถุประสงค์ต่อไปนี้:

1. เป็นชวเลขสำหรับgrid-column-start, grid-column-end, grid-row-start, และgrid-row-endคุณสมบัติ
2. เพื่อระบุชื่อรายการกริด

เรามาพูดถึงจุดประสงค์สองประการด้านล่างกัน

วิธีใช้grid-areaเป็นชวเลข

นี่คือไวยากรณ์สำหรับการใช้grid-areaคุณสมบัติเป็นชวเลขสำหรับ คุณสมบัติ grid-column-start, grid-column-end, grid-row-startและgrid-row-end:

.your-grid-item {
  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
}

ดังนั้น แทนที่จะเขียนว่า

.grid-item1 {
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: span 2;
}

ลองใช้ StackBlitz

คุณสามารถใช้grid-areaคุณสมบัติเพื่อย่อรหัสของคุณดังนี้:

.grid-item1 {
  grid-area: 3 / 1 / 5 / span 2;
}

ลองใช้ StackBlitz

วิธีใช้grid-areaระบุชื่อรายการกริด

นี่คือไวยากรณ์สำหรับการใช้grid-areaคุณสมบัติเพื่อระบุชื่อของรายการกริด:

.your-grid-item {
  grid-area: item-name;
}

นี่คือตัวอย่าง:

.grid-item1 {
  grid-area: firstDiv;
}

.grid-item2 {
  grid-area: middleDiv;
}

.grid-item2 {
  grid-area: lastDiv;
}

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
</section>

การใช้grid-areaเพื่อกำหนดรายการกริดที่มีชื่อทำให้คุณสมบัติคอนเทนเนอร์กริดของคุณgrid-template-areasใช้ชื่อเพื่อกำหนดขนาดและตำแหน่งของรายการ

คุณสมบัติของ CSS Grid คืออะไร ?grid-template-areas

พื้นที่เทมเพลตกริดระบุพื้นที่ที่คุณต้องการวางรายการกริดที่มีชื่อภายในคอนเทนเนอร์กริด

ข้อควรจำ:เราใช้คุณสมบัติ CSS grid-areaเพื่อตั้งชื่อรายการกริด

ตัวอย่างที่ 1: วิธีวางรายการกริดที่มีชื่อในสามคอลัมน์

.grid-item1 {
  grid-area: firstDiv;
}

section {
  display: grid;
  grid-template-areas: "firstDiv firstDiv firstDiv . .";
  background-color: orange;
  margin: 50px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้grid-template-areasพร็อพเพอร์ตี้เพื่อวางgrid-item1ในพื้นที่สามคอลัมน์แรก

หมายเหตุต่อไปนี้:

• เครื่องหมายคำพูด ( "") กำหนดแต่ละแถวของตาราง
• สัญลักษณ์จุด ( .) กำหนดรายการกริดที่ไม่มีชื่อ
• เราใช้อักขระช่องว่างเพื่อแยกคอลัมน์กริด

ตัวอย่างที่ 2: วิธีระบุตำแหน่งของรายการกริดที่มีชื่อหลายรายการ

.grid-item1 {
  grid-area: header;
}

.grid-item2 {
  grid-area: article;
}

.grid-item3 {
  grid-area: footer;
}

.grid-item4 {
  grid-area: sidebar;
}

.grid-item5 {
  grid-area: ads1;
}

.grid-item6 {
  grid-area: ads2;
}

.grid-item7 {
  grid-area: ads3;
}

section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas:
    "header header header header header"
    "sidebar article article article ads1"
    "sidebar article article article ads1"
    "sidebar article article article ads1"
    "sidebar article article article ads2"
    "sidebar article article article ads3"
    "sidebar footer footer footer footer";
  background-color: orange;
  margin: 30px;
}

ลองใช้ StackBlitz

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

สิ่งสำคัญที่ต้องรู้เกี่ยวกับgrid-template-areasอสังหาริมทรัพย์

ต่อไปนี้เป็นข้อมูลสำคัญ 4 ประการที่ต้องจำไว้เมื่อใช้grid-template-areasพร็อพเพอร์ตี้:

1. grid-template-areasไม่อนุญาตให้มีเซลล์ว่าง

คุณสมบัติgrid-template-areasต้องการให้คุณระบุรายการสำหรับเซลล์กริดทั้งหมด

ตัวอย่างเช่น พิจารณาส่วนย่อยนี้:

grid-template-areas:
  "header header"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

ด้านบนเป็นgrid-template-areasค่าที่ไม่ถูกต้องเนื่องจากแถวแรกไม่สมบูรณ์

กล่าวอีกนัยหนึ่ง แถวแรกเป็นแถวเดียวที่มีสองคอลัมน์ อย่างไรก็ตามgrid-template-areasคาดว่าแถวทั้งหมดในคอนเทนเนอร์กริดจะมีจำนวนคอลัมน์เท่ากัน

2. คุณสามารถใช้จุดเพื่อระบุเซลล์ว่าง

สมมติว่าคุณต้องการเว้นว่างบางเซลล์ไว้ ในกรณีนั้น ให้ใช้จุด ( .) หรือจุดที่ไม่เว้นวรรคหลายจุด ( ....)

นี่คือตัวอย่าง:

grid-template-areas:
  "header header . . ."
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้ สัญลักษณ์จุด เว้นระยะ สาม จุด ( .) เพื่อระบุเซลล์ว่างสามเซลล์

3. grid-template-areasไม่อนุญาตให้วางรายการในหลายตำแหน่ง

คุณสมบัติgrid-template-areasไม่สามารถวางรายการสองครั้งภายในคอนเทนเนอร์กริด

ตัวอย่างเช่น พิจารณาส่วนย่อยนี้:

grid-template-areas:
  "header header header header header"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer header header header";

ด้านบนเป็นgrid-template-areasค่าที่ไม่ถูกต้องเนื่องจากheaderรายการใช้พื้นที่กริดสองพื้นที่

4. grid-template-areasอนุญาตพื้นที่สี่เหลี่ยมเท่านั้น

ที่พักgrid-template-areasไม่สามารถสร้างพื้นที่ที่ไม่ใช่รูปสี่เหลี่ยมผืนผ้า (เช่น รูปตัว T หรือรูปตัว L)

ตัวอย่างเช่น พิจารณาส่วนย่อยนี้:

grid-template-areas:
  "header header header header header"
  "sidebar ads1 ads1 ads1 ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

ด้านบนเป็นgrid-template-areasค่าที่ไม่ถูกต้องเนื่องจากads1รายการสร้างพื้นที่กริดที่ไม่ใช่สี่เหลี่ยม

ตอนนี้เราทราบประเภทของคุณสมบัติของรายการกริด CSS แล้ว เราสามารถพูดคุยเกี่ยวกับวิธีกำหนดขนาดกริดต่ำสุดและสูงสุดได้

วิธีใช้minmax()ฟังก์ชัน CSS เพื่อกำหนดขนาดกริดต่ำสุดและสูงสุด

minmax()เป็นฟังก์ชัน CSS Grid สำหรับกำหนดขนาดกริดต่ำสุดและสูงสุด

ไวยากรณ์ของ ฟังก์ชันCSSminmax()

minmax()ยอมรับสองข้อโต้แย้ง นี่คือไวยากรณ์:

minmax(minimum-size, maximum-size)

หมายเหตุต่อไปนี้:

• อาร์กิวเมนต์minimum-sizeระบุขนาดที่เล็กที่สุดสำหรับความยาวเฉพาะ
• อาร์กิวเมนต์maximum-sizeระบุขนาดที่ใหญ่ที่สุดสำหรับความยาวเฉพาะ
• minmax()อาร์กิวเมนต์ของสามารถเป็นความยาว CSS ที่ไม่เป็นค่าลบ หรือคำหลักคำใดคำหนึ่งauto, min-content, max-contentหรือ
• สมมติว่าอาร์กิวเมนต์maximum-sizeน้อยกว่า minimum-sizeในกรณีนั้น เบราว์เซอร์จะไม่สนใจmaximum-sizeและถือว่าฟังก์ชันminmax()เป็นmin()
• หน่วยเป็น หน่วย ที่ถูกต้องสำหรับการfrโต้แย้งminimum-size

วิธีใช้minmax()ฟังก์ชัน CSS

คุณสามารถใช้minmax()ฟังก์ชันเป็นค่าสำหรับคุณสมบัติ CSS ต่อไปนี้:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows

ตัวอย่างของ ฟังก์ชันCSSminmax()

ด้านล่างนี้คือตัวอย่างวิธีminmax()การทำงานของฟังก์ชัน CSS

วิธีกำหนดขนาดกริด70pxต่ำสุดและ สูงสุดของแถว250px

section {
  display: grid;
  grid-template-rows: 50px 100px minmax(70px, 250px);
  grid-template-columns: auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

เราใช้ฟังก์ชัน CSS minmax()เพื่อตั้ง<section>ค่าความสูงของแถวที่สามเป็นค่าต่ำสุด70pxและสูงสุด250pxเป็น

วิธีกำหนดขนาดกริดคอลัมน์30%ขั้นต่ำและ สูงสุด70%

section {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr minmax(30%, 70%) 1fr;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

เราใช้minmax()ฟังก์ชัน CSS เพื่อตั้ง<section>ค่าความกว้างของคอลัมน์ที่สองเป็นค่าต่ำสุด30%และค่าสูงสุด70%เป็น

หมายเหตุ:คุณสามารถใช้ฟังก์ชัน CSS repeat()เพื่อระบุgrid-template-rowsหรือgrid-template-columnsค่าที่มีรูปแบบซ้ำๆ ได้ เรามาพูดถึงrepeat()ฟังก์ชั่นกัน

วิธีใช้repeat()ฟังก์ชัน CSS เพื่อกำหนดเส้นตารางด้วยรูปแบบซ้ำๆ

ฟังก์ชันrepeat() CSS ช่วยให้คุณเขียนค่าที่กระชับและอ่านง่ายขึ้นเมื่อระบุแทร็กตาราง หลายรายการ ที่มีรูปแบบซ้ำๆ

บันทึก:

• แทร็กอ้างอิงถึงคอลัมน์ (หรือแถว) ของคอนเทนเนอร์กริด
• คุณสามารถใช้repeat()เป็นค่าสำหรับ CSS grid-template-columnsหรือgrid-template-rowsคุณสมบัติ

ไวยากรณ์ของ ฟังก์ชันCSSrepeat()

repeat()ยอมรับสองข้อโต้แย้ง นี่คือไวยากรณ์:

repeat(number-of-repetition, track-list-to-repeat)

อาร์กิวเมนต์ 1:number-of-repetition

อาร์กิวเมนต์number-of-repetitionระบุจำนวนครั้งที่เบราว์เซอร์ควรทำซ้ำรายการแทร็กที่ระบุ (อาร์กิวเมนต์ที่สอง)

อาร์กิวเมนต์number-of-repetitionสามารถเป็นค่าใดก็ได้ต่อไปนี้:

• จำนวน1หรือหลายรายการ
• auto-fill
• auto-fit

auto-fillvs. auto-fit: ต่างกันอย่างไร?

ค่าauto-fillและauto-fitจะสร้างแทร็กโดยอัตโนมัติตามต้องการเพื่อเติมคอนเทนเนอร์กริดโดยไม่ทำให้เกิดโอเวอร์โฟลว์

ความแตกต่างระหว่างค่าทั้งสองคือการauto-fitยุบแทร็กเปล่าเป็นศูนย์พิกเซล ( 0px) แต่auto-fillแสดงทั้งแทร็กที่ว่างเปล่าและเต็ม

หมายเหตุ:แทร็กว่างคือคอลัมน์หรือแถวที่ไม่มีรายการตาราง

อาร์กิวเมนต์ 2:track-list-to-repeat

อาร์กิวเมนต์track-list-to-repeatระบุรูปแบบแทร็กที่คุณต้องการทำซ้ำในแกนแนวนอนหรือแนวตั้งของคอนเทนเนอร์กริด

กล่าวอีกนัยหนึ่งtrack-list-to-repeatประกอบด้วยค่าหนึ่งค่าหรือมากกว่าที่ระบุขนาดของแทร็กที่เบราว์เซอร์ควรทำซ้ำภายในคอนเทนเนอร์กริด

หมายเหตุ: สมมติ ว่าคุณnumber-of-repetitionเป็นauto-fillหรือ auto-fitในกรณีนั้น คุณสามารถใช้เฉพาะขนาดคงที่เป็นtrack-list-to-repeatอาร์กิวเมนต์

ตัวอย่างของ ฟังก์ชันCSSrepeat()

ด้านล่างนี้คือตัวอย่างวิธีrepeat()การทำงานของฟังก์ชัน CSS

วิธีสร้างคอนเทนเนอร์กริดสามคอลัมน์ที่มี70pxความกว้างของคอลัมน์

section {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้repeat()ฟังก์ชัน CSS เพื่อสร้าง70pxคอลัมน์กว้าง สามคอลัมน์

ด้านล่างเป็นคุณสมบัติที่ไม่repeat()เทียบเท่ากับด้านบนgrid-template-columns:

grid-template-columns: 70px 70px 70px;

วิธีสร้างคอนเทนเนอร์กริดสี่คอลัมน์ที่มีความกว้างหนึ่ง50pxและสาม90pxคอลัมน์

section {
  display: grid;
  grid-template-columns: 50px repeat(3, 90px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

ตัวอย่างด้านบนใช้repeat()ฟังก์ชัน CSS เพื่อสร้าง90pxคอลัมน์กว้าง สามคอลัมน์

ด้านล่างเป็นคุณสมบัติที่ไม่repeat()เทียบเท่ากับด้านบนgrid-template-columns:

grid-template-columns: 50px 90px 90px 90px;

วิธีสร้างคอนเทนเนอร์กริดห้าคอลัมน์ที่มีความกว้างหนึ่ง40pxและสอง60px 1frคอลัมน์

section {
  display: grid;
  grid-template-columns: 40px repeat(2, 60px 1fr);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้repeat()ฟังก์ชัน CSS เพื่อสร้าง60px 1frคอลัมน์กว้าง สองคอลัมน์

ด้านล่างเป็นคุณสมบัติที่ไม่repeat()เทียบเท่ากับด้านบนgrid-template-columns:

grid-template-columns: 40px 60px 1fr 60px 1fr;

หมายเหตุ:เราใช้frหน่วย (เศษส่วน)เพื่อปรับขนาดคอลัมน์ที่สามและห้าโดยเทียบกับเศษส่วนของพื้นที่ว่างในคอนเทนเนอร์กริด

วิธีเติมคอนเทนเนอร์กริดโดยอัตโนมัติด้วย70pxคอลัมน์กว้าง

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้ฟังก์ชัน CSS repeat()เพื่อเติมคอนเทนเนอร์กริดโดยอัตโนมัติด้วย70pxคอลัมน์กว้าง

วิธีเติมคอนเทนเนอร์กริดโดยอัตโนมัติด้วยคอลัมน์กว้าง ต่ำสุด 50pxและสูงสุด1fr

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้ CSS repeat()และminmax()ฟังก์ชันเพื่อเติมคอนเทนเนอร์กริดโดยอัตโนมัติด้วย50pxคอลัมน์ที่มีความกว้างขั้นต่ำและสูงสุด1frที่

หมายเหตุ หมายถึง หน่วยเศษส่วน1frหนึ่ง หน่วย

วิธีปรับคอนเทนเนอร์กริดให้พอดีโดยอัตโนมัติโดยมีคอลัมน์กว้าง ต่ำสุด 50pxและสูงสุด1fr

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

ลองใช้ StackBlitz

ข้อมูลโค้ดด้านบนใช้ ฟังก์ชัน CSS repeat()และminmax()เพื่อให้พอดีกับคอนเทนเนอร์กริดโดยอัตโนมัติโดยมีคอลัมน์กว้างขั้นต่ำและ50pxสูงสุด1fr

ภาพรวม

ในบทความนี้ เราได้กล่าวถึงเครื่องมือ CSS Grid ทั้งหมดที่คุณต้องสร้างเลย์เอาต์เว็บไซต์ขั้นพื้นฐานและขั้นสูงในรูปแบบตอบสนองที่ดูดีบนอุปกรณ์ทั้งหมด

ฉันหวังว่าคุณจะพบว่าบทความนี้มีประโยชน์

ขอบคุณที่อ่าน!

หากคุณชอบบทช่วยสอนนี้ คุณสามารถรับเวอร์ชันคู่มือได้ที่ Amazon เป็นคู่มืออ้างอิงฉบับย่อที่มีประโยชน์สำหรับ CSS Grid

ที่มา: https://www.freecodecamp.org

#css

What is GEEK

Buddha Community

13 Cool Simple CSS Grid layout examples

Collection of free hand-picked simple CSS grid examples. Also, it includes a bunch of front-end techniques, tips, and tricks for your future reference. Hope you will like these freebies and find them useful. Happy coding!

• Styling the last row of a grid with CSS selectors
• Grid Animation Effects
• Simple grid mixin
• Simple Grid CSS Grid
• Simple CSS Grid Hover
• Simple css Grid – Responsive
• Simple css grid system using scss
• CSS variables simple CSS grid
• Super Simple CSS Grid
• 3D Grid UI
• Aspect ratio Grid boxes with CSS Variables
• Simple grid system
• Simple Grid template

#layouts #css grid #grid #layouts #css #css grid layout

9 Free CSS Masonry Grid Layouts

This is a collection of free CSS Masonry grids. I have found around the Codepen! This Masonry grid allows you to easily create grid layouts in HTML and CSS without having to program the whole thing in JavaScript. CSS Masonry grids are a great way to help layout elements in a grid-like format. If you need some inspiration for your next design layout, see the free CSS Masonry grids below.

• CSS Masonry Grid Animation Effects
• Using vanilla JS to implement masonry grid
• Bootstrap Masonry Grid Template
• Vanilla JS Masonry Grid Layout Method
• Responsive masonry grid made with ReactJS and flex-box
• Display Images On Your Website With The Masonry Grid (Vanilla JS)
• Create a Masonry Style Image Grid with Infinite Scroll in Vanilla JS
• Isotope & Fancybox Masonry image grid with good animation
• Build a CSS Masonry grid Layout with just HTML and CSS

#layouts #css grid #grid #css masonry #css #free

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

How it works is that we will have a div that will have the image as a background. On that, we put our text element, using blend-mode it will show through the image.

The result you can see and touch on this Codepen.

#css #css3 #html-css #css-grids #learning-css #html-css-basics

The Ultimate CSS Grid Cheat Sheet in 2021🎖️

Let’s refresh Our CSS Grid Memory. Here’s a Cheat Sheet of everything you can do with Grid to get started in 2021!🎖️

#css #css3 #css-grid #learning-css #html-css #web-development #webdev