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

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

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

ไวยากรณ์

cssตัวเลือก {
  grid-template-rows: ความกว้างแถว;
}

ตัวอย่าง

มาลองกำหนดความกว้างของแถวสำหรับ องค์ประกอบต่างๆในกริดของเรากัน:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง

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

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง

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

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

Результат:

ตัวอย่าง

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

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

Результат:

ตัวอย่าง

ลองระบุฟังก์ชัน repeat() ในคุณสมบัติ grid-template-rows ซึ่งจะบอกคอนเทนเนอร์ว่าแถวทั้งสาม ควรมีความกว้างเท่ากัน:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#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>

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr) 2fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#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>

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง

คราวนี้ลองตั้งค่าความกว้างของแถว โดยผสมค่าที่ระบุด้วย ฟังก์ชัน repeat() และหน่วย fr อิสระ:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง

นอกจากนี้ในฟังก์ชัน repeat() ยังสามารถระบุ ค่า auto-fill ซึ่งจะเติม คอนเทนเนอร์ของเราด้วยแถวที่เหมือนกันตามความกว้างที่เราต้องการ:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง

สะดวกมากถ้าใช้ auto-fill ร่วมกับ ฟังก์ชัน minmax ซึ่งกำหนดช่วงความกว้างของแถว ตั้งแต่ค่าต่ำสุดถึงค่าสูงสุด หากความกว้างของคอนเทนเนอร์ไม่สามารถบรรจุ แถวทั้งหมดได้ บางแถวจะถูกย้าย ไปยังบรรทัดใหม่ โดยที่แถวในบรรทัดนั้น จะกระจายตัวอย่างสม่ำเสมอ ลองเปลี่ยน ตัวอย่างก่อนหน้า โดยระบุฟังก์ชัน minmax ลงไป:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง

คราวนี้ลองระบุคุณสมบัติ auto-fit ซึ่งแตกต่างจาก auto-fill ตรงที่ มันจะปรับจำนวนแถวให้เหมาะสมกับ ความกว้างของคอนเทนเนอร์ที่มีอยู่ โดยขยายหรือ ย่อแถว:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง

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

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

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

Результат:

ตัวอย่าง

ลองใช้คุณสมบัติ grid-template-columns และ grid-template-rows ร่วมกัน:

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-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ตัวอย่าง

ลองใช้คุณสมบัติ grid-template-columns และ grid-template-rows สร้างตารางจากเก้าช่องเซลล์ จัดวาง เป็นสามแถว โดยที่แถวที่สองและแถวที่สามมีความกว้างเท่ากัน และแต่ละคอลัมน์มีความกว้างต่างกัน:

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-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  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-rows: 2fr 1fr 1fr;
  grid-template-columns: 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ดูเพิ่มเติม