ตัวแทนตาราง CSS

1
2
3
4
5
6
7
8

ทดลองด้วยตัวเอง

ตัวแทนองค์ประกอบเครือง

ในการทำให้ตัวแทน HTML ทำงานเป็นตัวแทนองค์ประกอบเครือง คุณจำเป็นต้อง display คุณสมบัตินี้ตั้งค่าเป็น grid หรือ inline-grid

ตัวแทนองค์ประกอบเครืองประกอบด้วยองค์ประกอบเครืองที่จัดวางในคอลัมน์และบรรทัด

grid-template-columns ทางแบบ

grid-template-columns คุณสมบัตินี้กำหนดจำนวนคอลัมน์ในการจัดเครือง และสามารถกำหนดความกว้างของคอลัมน์

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

หากคุณต้องการให้เครืองจัดไปด้วย 4 คอลัมน์ โปรดกำหนดความกว้างของ 4 คอลัมน์นี้; หากทุกคอลัมน์ควรมีความกว้างเท่ากัน จัดให้เป็น "auto"

ตัวอย่าง

สร้างเครืองที่มี 4 คอลัมน์

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

ทดลองด้วยตัวเอง

จำเป็นต้องสังเกตหากมีสิ่งที่จะทำงานที่มากกว่า 4 รายการในเครือง 4 คอลัมน์ แล้วเครืองจะเพิ่มบรรทัดใหม่และใส่สิ่งที่จะทำงานนั้นในบรรทัดนั้น

grid-template-columns คุณสมบัตินี้ยังสามารถใช้เพื่อกำหนดขนาดของคอลัมน์ (ความกว้าง)

ตัวอย่าง

ตั้งค่าขนาดของ 4 คอลัมน์นี้

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

ทดลองด้วยตัวเอง

grid-template-rows ทางแบบ

grid-template-rows คุณสมบัตินี้กำหนดความสูงของแต่ละคอลัมน์

1
2
3
4
5
6
7
8

ค่าของมันเป็นรายการที่แยกด้วยอวุธ ที่ในแต่ละค่ากำหนดความสูงของแถวตามลำดับ

ตัวอย่าง

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

ทดลองด้วยตัวเอง

justify-content ทางแบบ

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

1
2
3
4
5
6
7
8

จำเป็นต้องสังเกตความกว้างของเครืองต้องเล็กกว่าความกว้างของตัวแทนองค์ประกอบเพื่อให้คุณสมบัติ justify-content ทำงานได้

ตัวอย่าง

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

.grid-container {
  display: grid;
  justify-content: space-around;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

.grid-container {
  display: grid;
  justify-content: space-between;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

.grid-container {
  display: grid;
  justify-content: center;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

.grid-container {
  display: grid;
  justify-content: start;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

.grid-container {
  display: grid;
  justify-content: end;
}

ทดลองด้วยตัวเอง

align-content ทางแบบ

align-content คุณสมบัติใช้สำหรับการจัดลำดับของเครืองภายในตัวแทน

1
2
3
4
5
6
7
8

จำเป็นต้องสังเกตความสูงของเครืองต้องต่ำกว่าความสูงของตัวแทน เพื่อที่ตัวแปร align-content จะทำงานได้

ตัวอย่าง

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

ทดลองด้วยตัวเอง