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

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

เมื่อระบุค่าในหน่วยพิกเซลในคุณสมบัติ ขนาดขององค์ประกอบจะตรงกับค่าที่ระบุพอดี หากเรากำหนดคำว่า auto คอลัมน์และแถวจะ เติมเต็มพื้นที่ว่างทั้งหมดที่มี การใช้ หน่วย fr (เศษส่วน) หมายถึง ว่าพื้นที่ทั้งหมดจะถูกแบ่งออก เป็นส่วนเท่าๆ กัน ข้อได้เปรียบของ fr คือความสามารถในการปรับตัวต่อ คอนเทนเนอร์หรือความละเอียดหน้าจอที่ต่างกัน เนื่องจาก fr แค่แบ่งพื้นที่ออกเป็นจำนวน เศษส่วนที่ระบุโดยไม่ยึดติดกับขนาดที่แน่นอนในพิกเซล

ไวยากรณ์

cssตัวเลือก {
  grid-template: ความกว้างและจำนวนแถว / ความกว้างและจำนวนคอลัมน์;
}

ตัวอย่าง

เรามาสร้างตารางโดยใช้คุณสมบัติ grid-template กัน:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง

ทีนี้ลองกำหนดให้แถวที่สองและแถวที่สามมี ความกว้างเท่ากัน และแต่ละคอลัมน์มีความกว้างต่างกัน:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง

ทีนี้ในตารางจากตัวอย่างที่แล้ว ลองทำให้แถวบนสุดกว้างสองเศษส่วน และคอลัมน์แรกกว้างครึ่งเศษส่วน:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ดูเพิ่มเติม