ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

grid-auto-columns 

grid-auto-columns เป็น Property ใน CSS ใช้เพื่อระบุขนาดสำหรับคอลัมน์ของคอนเทนเนอร์กริดที่มีการสร้างขึ้น

Syntax:

grid-auto-columns: auto|max-content|min-content|length|percentage|minmax(min, max)|initial|inherit;

หากรายการกริดถูกจัดวางไว้ในคอลัมน์ที่ไม่ได้กำหนดขนาดอย่างชัดเจนแทร็กกริด grid-template-columns โดยนัยสำคัญจะถูกสร้างขึ้นเพื่อเก็บไว้ สิ่งนี้สามารถเกิดขึ้นได้โดยการวางตำแหน่งอย่างชัดเจนในคอลัมน์ที่อยู่นอกระยะหรือโดยอัลกอริทึมการจัดตำแหน่งอัตโนมัติเพื่อสร้างคอลัมน์เพิ่มเติม

Property Values:

  • auto : เป็นค่าเริ่มต้น ขนาดถูกกำหนดโดยปริยายตามขนาดของคอนเทนเนอร์

ดังตัวอย่างด้านล่างนี้

<!DOCTYPE html> 
<html> 
	<head> 
		<title> 
			CSS grid-auto-column Property 
		</title> 
			
		<style> 
			.main { 
				display: grid; 
				grid-template-areas: "a a"; 
				grid-gap: 20px; 
				padding: 30px; 
				background-color: green; 
				grid-auto-columns: auto; 
				
			} 
			.GFG { 
				text-align: center; 
				font-size: 35px; 
				background-color: white; 
				padding: 20px 0; 
			} 
		</style> 
	</head> 
		
	<body> 
		<div class = "main"> 
			<div class = "GFG">1</div> 
			<div class = "GFG">2</div> 
			<div class = "GFG">3</div> 
			<div class = "GFG">4</div> 
			<div class = "GFG">5</div> 
		</div> 
	</body> 
</html> 

ผลลัฑธ์ที่ได้

ผลลัพธ์
ผลลัพธ์การใช้ grid-auto-columns Property

จากผลลัพธ์ที่ได้จะเห็นว่า ฝั่งซ้ายและขวานั้นเท่ากัน 

ตัวอย่างที่สอง

<!DOCTYPE html> 
<html> 
	<head> 
		<title> 
			CSS grid-auto-column Property 
		</title> 
			
		<style> 
			.main { 
				display: grid; 
				grid-template-areas: "a a"; 
				grid-gap: 20px; 
				padding: 30px; 
				background-color: green; 
				grid-auto-columns: 8.5cm; 
				
			} 
			.GFG { 
				text-align: center; 
				font-size: 35px; 
				background-color: white; 
				padding: 20px 0; 
			} 
		</style> 
	</head> 
		
	<body> 
		<div class = "main"> 
			<div class = "GFG">1</div> 
			<div class = "GFG">2</div> 
			<div class = "GFG">3</div> 
			<div class = "GFG">4</div> 
			<div class = "GFG">5</div> 
		</div> 
	</body> 
</html> 

จากโค้ดด้านบนเรากำหนดไว้ว่า  grid-auto-columns: 8.5cm;   ผลลัพธ์ที่ได้ดังนี้

ผลลัพธ์
ผลลัพธ์ที่ได้เมื่อกำหนด grid-auto-columns: 8.5cm;

 จากผลลัพธ์เราจะเห็นว่า การวางตำแหน่งหมายเลข 1-5  ด้านขวาจะไม่เท่ากับด้านซ้าย

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML css CodeIgniter Framework

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ขอสอบถามวิธีการเขียน bootstrap 3 ในการสร้าง bar ครับ
โดย benzas00123 พ 22 ม.ค. 2020 3:13 pm บอร์ด HTML CSS
5
250
พ 22 ม.ค. 2020 3:32 pm โดย benzas00123
วันหยุดที่หายไป
โดย noppadonsk พ 22 ม.ค. 2020 11:42 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
132
พ 22 ม.ค. 2020 11:42 am โดย noppadonsk
วิธีการปรับการการแสดงการ รายชื่อของแจ้งเตือน bookmark โดย phpbb
โดย Ittichai_chupol อ 21 ม.ค. 2020 5:45 pm บอร์ด PHP Knowledge
0
91
อ 21 ม.ค. 2020 5:45 pm โดย Ittichai_chupol
pillow vs wand library ความแตกต่างของ library ทั้ง 2 ตัวในการ procress รูปภาพ
โดย benzas00123 อ 21 ม.ค. 2020 5:29 pm บอร์ด Python Knowledge
1
114
อ 21 ม.ค. 2020 5:54 pm โดย mindphp
อยู่ดีๆ ก็ไม่สามารถเชื่อมต่อกับ database ได้ครับ
โดย benzas00123 อ 21 ม.ค. 2020 4:46 pm บอร์ด Programming - C/C++ & java & Python
5
185
อ 21 ม.ค. 2020 5:39 pm โดย benzas00123
ขอถามเกี่ยวกับ library ImageMagick ครับ
โดย benzas00123 อ 21 ม.ค. 2020 3:29 pm บอร์ด Programming - C/C++ & java & Python
2
91
อ 21 ม.ค. 2020 4:23 pm โดย benzas00123
Git Lad จะทำอย่างไรให้ไฟล์ที่อยู่ในโฟร์ย่อย ออกมาครับ
โดย jamepiyawat อ 21 ม.ค. 2020 12:08 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
223
อ 21 ม.ค. 2020 2:04 pm โดย jamepiyawat
ขอทราบวิธีการเขียน python เก็บข้อมูล ip ของผู้ใช้หน่อยครับ
โดย benzas00123 อ 21 ม.ค. 2020 10:54 am บอร์ด Programming - C/C++ & java & Python
1
178
อ 21 ม.ค. 2020 12:20 pm โดย mindphp
ขอสอบถามเกี่ยวกับการอัพโหลดรูปภาพเข้า ฐานข้อมูลครับ
โดย benzas00123 จ 20 ม.ค. 2020 6:29 pm บอร์ด SQL - Database
3
152
อ 21 ม.ค. 2020 2:00 pm โดย mindphp
โปรแกรมแปลงหน่วย เครื่องมือในการแปลงหน่วยความจุคอมพิวเตอร์
โดย prmindphp จ 20 ม.ค. 2020 6:24 pm บอร์ด MindPHP News & Feedback
0
110
จ 20 ม.ค. 2020 6:24 pm โดย prmindphp
เทคนิคทำธุรกิจอสังหาอย่างไรให้มีกำไร
โดย Patty Perfume อ 19 ม.ค. 2020 7:12 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
206
ส 25 ม.ค. 2020 1:29 am โดย Kasey00
ความปลอดภัยด้านสุขภาพ เรื่องที่ทุกคนควรเริ่มต้นใฝ่หา
โดย medalezga อ 19 ม.ค. 2020 4:30 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
234
ศ 24 ม.ค. 2020 9:32 am โดย LEG
วิธีการนำชื่อข้อมูลในชื่อในฐานข้อมูล ในไฟล์ XML ของ module joomla
โดย jamepiyawat ส 18 ม.ค. 2020 6:44 pm บอร์ด Joomla Developing Knowledge
0
248
ส 18 ม.ค. 2020 6:44 pm โดย jamepiyawat
วิธีการจัดทำการระบบแจ้้งเตือนใน phpbb
โดย Ittichai_chupol ส 18 ม.ค. 2020 5:42 pm บอร์ด PHP Knowledge
0
236
ส 18 ม.ค. 2020 5:42 pm โดย Ittichai_chupol
Pillow library ปรับขนาดรูปเป็นเปอร์เซ็นเพื่อนำไปใช้งานได้สะดวก
โดย benzas00123 ส 18 ม.ค. 2020 5:25 pm บอร์ด Python Knowledge
0
70
ส 18 ม.ค. 2020 5:25 pm โดย benzas00123
Pillow library Optimize รูปภาพเพื่อให้มีขนาดของข้อมูลที่เล็กลง
โดย benzas00123 ส 18 ม.ค. 2020 2:53 pm บอร์ด Python Knowledge
0
210
ส 18 ม.ค. 2020 2:53 pm โดย benzas00123
ตัวช่วยในการคำนวณแคลอรี่สำหรับผู้ที่รักการออกกำลังกาย
โดย prmindphp ส 18 ม.ค. 2020 11:50 am บอร์ด MindPHP News & Feedback
0
205
ส 18 ม.ค. 2020 11:50 am โดย prmindphp
เราจะเก็บรูปข้อมูลของรูปลง database เราจะใช้ data type อะไรครับ
โดย benzas00123 ส 18 ม.ค. 2020 11:31 am บอร์ด SQL - Database
2
226
ส 18 ม.ค. 2020 1:17 pm โดย benzas00123
อยากทราบวิธีการแก้ไขปัญหาการ อัพโหลดไฟล์ excel แล้วไม่รองรับภาษาไทย
โดย Ittichai_chupol ศ 17 ม.ค. 2020 5:58 pm บอร์ด Programming - PHP
7
195
จ 20 ม.ค. 2020 2:05 pm โดย saravana
ต้องการนับจำนวนอักษรเเละตัดอักษรที่เกิน มีปัญหากับภาษาไทย
โดย thatsawan ศ 17 ม.ค. 2020 5:18 pm บอร์ด Programming - C/C++ & java & Python
0
71
ศ 17 ม.ค. 2020 5:18 pm โดย thatsawan