คุณสมบัติ grid-template-columns
คุณสมบัติ grid-template-columns กำหนด
จำนวนและความกว้างของคอลัมน์ที่
องค์ประกอบจะครอบครองในกริดหรือตาราง
คุณสมบัตินี้ระบุในองค์ประกอบแม่
และกำหนดความกว้างของคอลัมน์สำหรับองค์ประกอบลูก
ในค่าของคุณสมบัติเราระบุความกว้างของคอลัมน์
ในหน่วย
สำหรับขนาดใดๆ ก็ได้
เมื่อระบุค่าในคุณสมบัติเป็นพิกเซล
ขนาดของคอลัมน์จะตรงกับค่านั้นๆ อย่างแม่นยำ
ถ้าเรากำหนดคำว่า auto คอลัมน์จะ
เติมพื้นที่ว่างทั้งหมดที่มีอยู่ การใช้
หน่วย fr (เศษส่วน) หมายความว่า
พื้นที่ทั้งหมดจะถูกแบ่ง
ออกเป็นส่วนเท่าๆ กัน ข้อดีของ
fr คือความสามารถในการปรับตัวให้เข้ากับ
คอนเทนเนอร์หรือความละเอียดหน้าจอที่ต่างกัน
เนื่องจาก fr แค่แบ่งพื้นที่ออกเป็นจำนวน
เศษส่วนที่ระบุโดยไม่ยึดติดกับขนาดที่แน่นอนเป็นพิกเซล
ไวยากรณ์
selector {
grid-template-columns: width ของ column;
}
ตัวอย่าง
มากำหนดความกว้างของคอลัมน์สำหรับ องค์ประกอบต่างๆ ในกริดของเรา:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
มากำหนดให้คอลัมน์แรกและคอลัมน์ที่สามมี ความกว้างคงที่ในหน่วยพิกเซล และให้คอลัมน์ที่สอง เติมพื้นที่ว่างที่มีอยู่โดยอัตโนมัติ:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
คราวนี้ใช้คุณสมบัติ
grid-template-columns
ทำให้คอลัมน์แรกและคอลัมน์ที่สอง
ครอบครองหนึ่งส่วนของคอนเทนเนอร์
และคอลัมน์ที่สามครอบครองสามส่วน:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
ค่าที่ระบุในหน่วย fr
สามารถอยู่ในรูปเศษส่วนได้ มา
เปลี่ยนตัวอย่างก่อนหน้า โดยระบุ
ความกว้างสำหรับคอลัมน์ที่สองและสาม
เป็นเลขทศนิยม:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
มาใช้ฟังก์ชัน repeat()
ในคุณสมบัติ grid-template-columns
เพื่อบอกคอนเทนเนอร์ว่าคอลัมน์ทั้งสาม
ควรมีความกว้างเท่ากัน:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
คราวนี้มาเปลี่ยนตัวอย่างก่อนหน้า โดยเพิ่มคอลัมน์ที่สี่ซึ่งจะครอบครองสอง เศษส่วนของคอนเทนเนอร์เข้าไปด้วย:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
มากำหนดให้คอลัมน์สองคอลัมน์แรกมีความกว้างหนึ่งเศษส่วน ของคอนเทนเนอร์ และคอลัมน์สองคอลัมน์สุดท้ายมีความกว้างสองเศษส่วน:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
คราวนี้มากำหนดความกว้างของคอลัมน์โดย
รวมค่าที่ระบุด้วยฟังก์ชัน repeat() และหน่วย fr อิสระเข้าด้วยกัน:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
นอกจากนี้ในฟังก์ชัน repeat() สามารถระบุ
ค่า auto-fill ซึ่งจะเติม
คอนเทนเนอร์ของเราด้วยคอลัมน์ที่เหมือนกันและมีความกว้างตามที่ต้องการ:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
สะดวกมากที่จะระบุฟังก์ชัน minmax ร่วมกับ auto-fill
ซึ่งกำหนดช่วงความกว้างของคอลัมน์
จากค่าต่ำสุดถึงค่าสูงสุด
ถ้าความกว้างของคอนเทนเนอร์ไม่สามารถบรรจุ
คอลัมน์ทั้งหมดได้ คอลัมน์บางส่วนจะย้ายไปยัง
บรรทัดใหม่ ในขณะที่คอลัมน์ในแต่ละแถว
จะกระจายตัวในแถวนั้นอย่างสม่ำเสมอ มาปรับเปลี่ยน
ตัวอย่างก่อนหน้า โดยระบุฟังก์ชัน minmax ในนั้น
เพื่อให้เห็นรูปแบบการวางคอลัมน์ที่แตกต่างกัน
ให้ลองปรับความกว้างหน้าต่างเบราว์เซอร์ของคุณ:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
คราวนี้ลองใช้คุณสมบัติ auto-fit
ซึ่งแตกต่างจาก auto-fill ตรงที่
มันจะปรับจำนวนคอลัมน์ให้เหมาะกับ
ความกว้างของคอนเทนเนอร์ที่มีอยู่ โดยขยายหรือ
ย่อคอลัมน์:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
นอกเหนือจาก fr แล้ว ยังสามารถ
ใช้ค่าในหน่วย % ซึ่งก็กำหนดเช่นกันว่า
คอลัมน์จะครอบครองส่วนใดของคอนเทนเนอร์
โดยจะคำนวณขนาดของ
คอลัมน์ในหน่วย % ก่อน จากนั้นพื้นที่ว่างที่เหลือ
จะถูกแบ่งออกเป็นเศษส่วน:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ตัวอย่าง
ลองใช้คุณสมบัติ
grid-template-columns และ
grid-template-rows ร่วมกัน:
<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>
#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
สร้างตารางที่มีเก้าเซลล์ จัดเรียง
เป็นสามแถว โดยแถวที่สองและแถวที่สามมีความกว้างเท่ากัน
และแต่ละคอลัมน์มีความกว้างต่างกัน:
<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>
#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;
}
:
ตัวอย่าง
คราวนี้ในตารางจากตัวอย่างก่อนหน้า ทำให้แถวบนสุดมีความกว้างสองเศษส่วน และคอลัมน์แรกมีความกว้างครึ่งเศษส่วน:
<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>
#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;
}
:
ดูเพิ่มเติม
-
คุณสมบัติ
grid-template-rows,
ซึ่งกำหนดจำนวนและความสูงของแถวในกริด -
คุณสมบัติ
grid-auto-columns,
ซึ่งกำหนดจำนวนและความกว้างของคอลัมน์ในกริดโดยนัย
