2 Columns Left Sidebar Template

Template เรื่มต้นของ GCSS แบบ 2 คอลัมน์อีกแบบหนึ่ง โดยมี Sidebar อยู่ด้านขวา

<main class="leftsidebar [wide] clear">
	<article class=content>
		.....
	</article>
	<aside class=sidebar>
		.....
	</aside>
</main>

ซึ่งจุดเด่นของ GCSS คือ ถึงแม้ว่าเราจะต้องการให้ Sidebar อยู่ด้านซ้าย เราก็ยังสามารถบังคับให้ Sidebar แสดงผลถัดจากเนื้อหาเมื่อแสดงผลบนอุปกรณ์มือถือได้ (ลองย่อหน้าเพจนี้ดูก็ได้ครับ)

แถบข้างของ GCSS จะมีขนาดคงที่ ที่ 300 พิกเซล เสมอครับไม่ว่าจะแสดงผลบนหน้าจอขนาดใดๆ โดยที่ content จะมีการปรับขนาดตามเนื้อที่ ที่เหลืออยู่ ยกเว้นเมื่อมีการปรับ Layout เป็นแบบ 1 คอลัมน์ โดยที่จุดเปลี่ยนเป็น 1 คอลัมน์จะอยู่ที่หน้าจอขนาด 768 พิกเซล

หากต้องการปรับเปลี่ยนขนาดของคอลัมน์สามารถทำได้ โดยการใส่คลาส wide ลงไปด้วย จะทำให้แถบข้างมีขนาดกว้างขึ้น

.leftsidebar {
	padding-left: 220px;
}
.leftsidebar > .sidebar {
	margin-left: -220px;
	width: 220px;
}

หรือกำหนดขนาดของแถบข้างด้วยตัวเอง โดยใช้คำสั่ง CSS ด้านบน โดยระบุขนาดที่ต้องการ (220px) ให้ตรงกันทั้ง 3 รายการ (margin-left เป็นค่าติดลบ)