2 Columns Right Sidebar Template

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

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

ข้อสังเกตุนะครับ เราสามารถเปลี่ยนตำแหน่งของแถบข้างจากซ้ายเป็นขวาได้โดยการเปลี่ยน class จาก leftsidebar เป็น rightsidebar เท่านั้น

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

.rightsidebar {
	padding-right: 220px;
}
.rightsidebar > .sidebar {
	margin-right: -220px;
	width: 220px;
}

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