CSS grid-template-columns ความสามารถ

หลักสูตรแนะนำ:

รายละเอียดและการใช้งาน

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

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

อ่านเพิ่มเติม:CSS คู่มือ:

grid-template-rows คุณสมบัติCSS การจัดเรียงเก็บข้อมูล

grid-template-rows คุณสมบัติคู่มือ CSS:

grid-template คุณสมบัติ

ตัวอย่าง

ตัวอย่าง 1

สร้างโครงสร้างเนื้อหาสี่คอลัมน์ และกำหนดขนาดของคอลัมน์:
  .grid-container {
  สร้างตัวแทนตัวแบบเก็บข้อมูลสี่คอลัมน์:
grid-template-columns: 30px 200px auto 100px;

}

grid-template-columns: auto auto auto auto;

ตัวอย่าง 2

สร้างโครงสร้างเนื้อหาสี่คอลัมน์ และกำหนดขนาดของคอลัมน์:
  .grid-container {
  display: grid;
grid-template-columns: 30px 200px auto 100px;

}

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

CSS ระบบการเขียนlengthgrid-template-columns: none|auto|max-content|min-content|

ค่าทางตัวเลือก |initial|inherit;

ค่า คำอธิบาย
none ค่าเริ่มต้น. สร้างคอลัมน์เมื่อมีความจำเป็น。
auto ขนาดของคอลัมน์ขึ้นอยู่กับขนาดของตัวแทนและขนาดของสิ่งที่อยู่ในคอลัมน์。
max-content ตั้งค่าขนาดของคอลัมน์ตามขนาดของสิ่งที่ใหญ่ที่สุดในคอลัมน์。
min-content ตั้งค่าขนาดของคอลัมน์ตามขนาดของสิ่งที่เล็กที่สุดในคอลัมน์。
length ตั้งค่าขนาดของคอลัมน์โดยใช้ค่ายาวที่ถูกต้อง. อ่านต่อไป:หน่วยมาตรายาว.
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น. อ่านต่อไป: initial.
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของเธอ. อ่านต่อไป: inherit.

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: none
การสืบทอด: ไม่
การสร้างอนุภาค สนับสนุน. อ่านต่อไป:คุณสมบัติที่เกี่ยวข้องกับอนุภาค.
เวอร์ชั่น: CSS Grid Layout Module Level 1
ระบบการเขียนภาษา JavaScript: object.style.gridTemplateColumns="50px 50px 50px"

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางระบุเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44