3 Columns (แบบที่ 3)

Template แบบ 3 คอลัมน์ โดยมีคอลัมน์ด้านข้างอยู่ทางด้านซ้ายของเนื้อหา ทั้งสองคอลัมน์ โดยมีแต่ละคอลัมน์กว้าง 220 พิกเซล

<main class="leftsidebar clear">
	<article class=content>
		.....
	</article>
	<div class="sidebar ggrid collapse">
		<aside class="block6 float-left">
			.....
		</aside>
		<aside class="block6 float-left">
			.....
		</aside>
	</div>
</main>

โครงสร้างของ Layout แบบนี้เป็นดังโค้ดด้านบนครับ โดยมีแนวคิดจากการใช้ Layout แบบ 2 คอลัมน์โดยมีแถบข้างอยูด้านซ้าย และขยายขนาดของแถบข้างให้สามารถบรรจุกริดขนาด 220+220 พิกเซลได้ ด้วย CSS ด้านล่าง โดยจะใช้กริดแบบสองคอลัมน์ที่สร้างขึ้น เป็น Sidebar ทั้งสองตัวนั่นเอง

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

ขนาด 440px นั่นคือขนาดของ Sidebar ทั้งสองรวมกันนั่นเองครับ และหากต้องการกำหนดขนาดของ Sidebar ก็สามารถคำนวณได้ตามที่ผมอธิบายไว้ โดยอาจใช้ร่วมกับการกำหนดกริดให้แตกต่างกันเพิ่มเติมได้ด้วยครับ

สุดท้ายแล้วขนาดของ Sidebar จริงๆที่สามารถใช้งานในแต่ละอัน ก็ไม่ถึง 220px หรอกครับ เนื่องจากมันจะต้องถูกหักออกจากช่องว่างระหว่างกริดอีกประมาณ 11 พิกเซล เหลือเป็นพื้นที่ของ Sidebar จริงเพียง 209px