960 Grid System ကို အစောပိုင်း ကာလတွေတုန်းက မလေ့လာဖြစ်ပါဘူး။ စသုံးကြည့်တော့ သတိထားမိတာ တစ်ခုက အရင်တုန်းက အသည်းအသန် လုပ်ခဲ့ရတာတွေ ခဏလေးနဲ့ ပြီးသွားတာပါလား။ အရင်ကဆို ဒီဇိုင်းဆွဲပြီး Template Frame ချတဲ့အခါ မကိုက်လို့ ဒီဇိုင်းပြန်ပြင်နဲ့ တော်တော့်ကို အလုပ်ရှုပ်ခဲ့ဖူးပါတယ်။ တစ်ခါတစ်လေ ဒီဇိုင်းဆွဲတော့ အဆင်ပြေတယ်၊ ကုဒ်ရေးတော့ အဆင်မပြေတာတွေ ကြုံဖူးပါတယ်။ အတင်း မဖြစ်ဖြစ်အောင် ဆွဲပေမယ့် တခါတလေမှာ သဘာဝမကျတာတွေ ဖြစ်လာတာတွေ ရှိပါတယ်။ ဒါပေမယ့် အဲဒီလို ပြဿနာတွေကို 960.gs စနစ်ကို အခြေခံပြီး Photoshop ထဲမှာဆွဲပြီး 960.css လေးသုံးလိုက်ရင် ဒီဇိုင်းနဲ့ Frame ကို ညှိဖို့ အင်မတန် လွယ်သွားပါတော့တယ်။

960.gs မှာ အခြားအသုံးဝင်တာတွေ အများကြီး ရှိပါသေးတယ်။ ဒါပေမယ့် ကျွန်တော်ကတော့ ကျွန်တော် Tutorial နဲ့ ဆိုင်တဲ့အပိုင်းကိုပဲ အဓိကထား ပြောသွားမှာ ဖြစ်ပါတယ်။ ကျွန်တော့် Tutorial မှာ 960.css ကို သုံးထားပါတယ်။ အဲဒီတော့ အဲဒါနဲ့ ဆိုင်တာကိုပဲ အဓိကထား ပြောချင်ပါတယ်။ ကြားဖြတ် အစီအစဉ် အနေနဲ့ဆိုပါတော့။

Grid-based Design

960 စနစ်ကို အရင်မသွားခင်မှာ grid-based design အကြောင်းကို အရင် လေ့လာကြည့်ရအောင်၊ တကယ်တော့ အဲဒီ grid-based system ဆိုတာ အင်တာနက်တွေပေါ်လာမှာ အသစ်ဖြစ်လာတဲ့ နည်းပညာတော့ မဟုတ်ပါဘူး။ ဟိုးအရင်ကတည်းက ပုံနှိပ်စနစ်တွေမှာ ရှိပြီးသား Alignment စနစ်အပေါ်မှာ အခြေခံပြီး ဖြစ်လာတာပါ။ Alignment ဆိုတာလည်း တကယ်တော့ ဘယ်ဖက်ကပ်ရိုက်မယ်၊ ညာဖက် ကပ်ရိုက်မယ်၊ အလည်မှာ ထားပါတယ်။ ညှိရိုက်မယ် စသည်ဖြင့် သုံးမျိုးပဲရှိပါတယ်။ သတင်းစားတွေမှာ စီမယ်ဆိုရင်လည်း ဒီအကွက်က ဘယ်ဖက်မှာ ကပ်ထား၊ ဟိုအကွက်တော့ ညာဖက်ကပ် စသည်ဖြင့် စီခဲ့ကြသလိုပါပဲ။ အင်တာနက်စာမျက်နှာ အပေါ်မှာ ပုံ / စာသားစသည်ဖြင့် ပါဝင်တဲ့ Content တွေကို သူ့နေရာနဲ့သူ အကွက်တွေ ချပြီး စီတာကို grid-based system လို့ခေါ်ပါတယ်။

အဲဒီလို စီပေးခြင်းအားဖြင့် အမြင်အာရုံကို ပိုပြီး ဖမ်းစားနိုင်သလို၊ စနစ်ကျမှု သေသပ်လှပမှု၊ Content များ စနစ်တကျ စီထားမှု စသည်ဖြင့် ပုံစံမျိုးစုံ သုံးလို့ ရလာစေပါတယ်။ ကျွန်တော်တို့ Grid-based System တွေကို လေ့လာကြည့်ရအောင်

အပေါ်က နှိုင်းယှဉ်ပြထားတဲ့ ပုံနှစ်ခုကို လေ့လာကြည့်ပါ။ အပေါ်က ပုံမှာတော့ စနစ်တကျရှိတယ်။ စနစ်တကျ စီထားတယ်ဆိုတာ အလွယ်တကူသိနိုင်ပါတယ်။ အောက်မှာ ပြထားတဲ့ပုံမှာတော့ ပြန့်ကျဲနေတဲ့အတွက် လူတွေကို ဆွဲဆောင်နိုင်စွမ်းလည်း မဲ့သွားသလို Content အချင်းချင်း ချိတ်ဆက်မှုကို လျော့တိလျော့ရဲ ဖြစ်စေပါတယ်။ အဆက်အစပ်မဲ့သွားစေပါတယ်။ ဒါကြောင့် ပုံနှိပ်မီဒီယာမှာ ဖြစ်ဖြစ်၊ အွန်လိုင်း Webpage တွေမှာပဲ ဖြစ်ဖြစ် ပါဝင်တဲ့ Content တွေကို အကွက်တွေအပေါ်မှာ အခြေခံပြီး စနစ်တကျ စီထားရပါတယ်။ အဲဒီလို စီတဲ့အခါမှာ ပုံမှန်အတိုင်း စီလို့ရသလို grid-base system တွေအပေါ်မှာ လည်း အခြေခံပြီး စီလို့ရပါတယ်။ grid-based system တွေကို သုံးလိုက်တဲ့အခါ အသုံးပြုသူ အနေနဲ့ ဒီဇိုင်းချသည့် အဆင့်မှစပြီး နောက်ဆုံး web page ရေးပြီးသည်အထိ၊ grid အပေါ်မှာ အခြေခံပြီး ရေးဆွဲတည်ဆောက်သည့်အတွက် စလည်ဆုံး သုံးပါးလုံး ညီညွှတ်မျှတသော ရလဒ်ကို ဖြစ်ပေါ်စေပါတယ်။ 960.gs က အဲဒီလို grid စနစ်တစ်ခု ဖြစ်ပြီး ဘယ်လို Screen Size အတွက်မဆို အဆင်ပြေသော 960px အပေါ်တွင် အခြေခံပြီး တည်ဆောက်ထားပါတယ်။

Grid-System တွေကို ဘာကြောင့် သုံးသင့်တာလဲ

အမြင်သာ အထင်သာဆုံး အားသာချက်ကတော့ လွယ်ကူ မြန်ဆန်သွားတာပါပဲ။ CSS သုံးပြီး grid-based layout တွေကို တည်ဆောက်တဲ့နေရာမှာ အရမ်းလွယ်ကူသွားပါတယ်။ အဲဒီအပြင် Photoshop မှာ Website ကို ရေးဆွဲတဲ့အခါမှာလည်း grid အပေါ်မှာ အခြေခံပြီး ရေးဆွဲရတာ ဖြစ်တဲ့အတွက် အရင်ထက်ပိုပြီး တိတိကျကျ ရေးဆွဲလို့ရလာပါတယ်။ အဲဒီအပြင် Designer အနေနဲ့ CSS အပေါ်မှာ ဘယ်လိုရှိမယ် ဆိုတာကို အရင်လောက် စဉ်းစားစရာ မလိုတော့ပဲ လွပ်လွပ်လပ်လပ် ရေးဆွဲလို့ရလာစေပါတယ်။ CSS3 မှာတော့ အဲဒီလို Grid ပုံစံမျိုးတွေ အလွယ်တကူ ရေးဆွဲလို့ရလာပေမယ့် CSS3 မတိုင်ခင်အထိတော့ Grid-based Layout တွေက အကောင်းဆုံးလို့တောင် ဆိုလို့ရနိုင်ပါတယ်။ အဲဒီအပြင် Grid-based တွေဟာ Browser အစုံမှာ စမ်းသပ်ထားပြီး ဘယ်လို Browser မျိုးမှာမဆို သုံးလို့ရပါတယ်။

960.gs Grid System

အဲဒီ 960.gs ကတော့ လူသုံးအများဆုံး နာမည်အကြီးဆုံးလို့ ဆိုရပါလိမ့်မယ်။ Drupal လို Website တွေတောင် 960.gs အပေါ်မှာ အခြေခံပြီး တည်ဆောက်ထားတာ တွေ့နိုင်ပါတယ်။

960.gs ဆိုတာ နာမည်နဲ့ လိုက်အောင် 960 pixels အကျယ်အပေါ်မှာ အဓိကထားပြီး တည်ဆောက်ထားပါတယ်။ အဲဒီလို ၉၆၀ အကျယ်ကို ရွေးချယ်ရခြင်း အဓိက အကြောင်းအရင်းကတော့ 960 pixel က Screen အရွယ်အစား အတော်များများ အတွက် အဆင်ပြေလို့ပါ။

960 Grid System မှာ 12 Columns၊ 16 Columns နဲ့ 24 Columns ဆိုပြီး သုံးမျိုးရှိပါတယ်။ ကိုယ့်ရဲ့ လိုအပ်ချက်အပေါ်မူတည်ပြီး အဆင်ပြေသလို ရွေးချယ် အသုံးပြုနိုင်ပါတယ်။ 12 Columns ကတော့ Grid အနည်းဆုံးလို့ ဆိုနိုင်ပြီး 24 Columns ကတော့ grid အစိပ်ဆုံး အများဆုံး ဖြစ်ပါတယ်။ 12 Columns Grid မှာဆိုရင် Width အငယ်ဆုံး 60px ကနေ စပြီး 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 နဲ့ အကျယ်ဆုံး 940 အထိရနိုင်ပါတယ်။

16 Columns Grid မှာတော့ အသေးဆုံး Columns က 40 pixels ဖြစ်ပြီး 60 pixel စီတိုးလာပါတယ်။ ဒီတော့ အသေးဆုံး 40px ကနေ စတင်ရေတွက်မယ်ဆိုရင် 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 နဲ့ 940 ဆိုပြီး ရနိုင်ပါတယ်။

24 Columns ကတော့ အစိပ်ဆုံးပါ အငယ်ဆုံးက 30 Pixels သာ ရှိပြီးတစ်ခါတိုးရင် 40 တိုးသွားပါတယ်။ ဒီတော့ 30, 70, 110, 150, 190, 230, 270, 310, 350, 390, 430, …. , 940 အထိရှိပါတယ်။ 24 Columns ကိုတော့ တကယ့်ကို အသေးစိတ် ရေးဆွဲလိုသူတွေသာ အသုံးပြုကြပါတယ်။

Grid Layout အပေါ် အခြေခံ၍ CSS Classes များ အသုံးချခြင်း

ကျွန်တော်တို့ အပေါ်မှာ ၁၂ ကော်လံနဲ့ ၁၆ ကော်လံ တွေမှာ pixels တွေ အပေါ် အခြေခံပြီး ပြခဲ့တာဖြစ်ပါတယ်။ ဒါပေမယ့် CSS မှာတော့ အဲဒီလို pixels တွေကို စဉ်းစားစရာ မလိုတော့ပါဘူး။ Grid က 12 Columns ဆိုရင်grid_1 ဆိုတာ 60 pixels ကို အလိုလို ကိုယ်စားပြုပြီးသား ဖြစ်စေပါတယ်။ ဒီတော့ grid_1, grid_2 ကနေစလို့ grid_12 အထိ သုံးလို့ရမှာ ဖြစ်ပါတယ်။

ကဲ ပိုပြီးမြင်သာ ထင်သာရှိသွားအောင် ၁၂ Column အပေါ် အခြေခံပြီး စမ်းသပ်ကြည့်ရအောင်။ ထုံးစံအတိုင်း 960.css ကို သုံးမှာဆိုတော့ Download မချရသေးသူတွေကတော့ 960.gs ကိုသွားပြီး Download ချပေးဖို့ လိုမှာ ဖြစ်ပါတယ်။ ပုံမှာပြထားတဲ့ ဖိုင်ကို ကိုယ်ရေးမယ့် index.html ရှိတဲ့နေရာကို ကူးထည့် ပေးပါရပါမယ်။

အဲဒီလို ကူးထည့်ပြီးပြီဆိုရင် ကျွန်တော်တို့ လက်တွေ့စမ်းသပ်ကြည့်ရအောင်

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slick Web Layout</title>
<link rel="stylesheet" href="960.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
	<div id="header" class="container_12 clearfix">
		<h1>A simple Grid</h1>
	</div> <!-- end of header -->
	<div id="more-list" class="container_12 clearfix">
		<div class="list grid_4">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class="list grid_4">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class="list grid_4">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div> <!-- end of more list -->
	<div id="featurewrap" class="container_12 clearfix">
		<div id="featured" class="grid_6">
			<h1>This is featured</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div> <!-- end of featured -->
		<div id="blog" class="grid_6">
			<div class="blogpost">
				<h1>Blog Header 1</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div> <!-- end of blogpost -->
			<div class="blogpost">
				<h1>Blog Header 2</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div> <!-- end of blogpost -->
		</div> <!-- end of blog -->
	</div> <!-- end of featurewrap -->
</body>
</html>

အဲဒီ HTML ကို Run ကြည့်မယ်ဆိုရင် 960 Grid System ရဲ့ အံ့ဩဖွယ်ရာ စွမ်းဆောင်မှုကို တွေ့ရမှာ ဖြစ်ပါတယ်။ အဓိက သုံးသွားတာ စကားလုံး သုံးလုံးခန့်သာ ရှိပြီး container_12 ဆိုတာရယ်၊ grid_* နဲ့ စတာရယ်ပဲ ပါပါတယ်။ နောက် clearfix ဆိုတာ ပါပါသေးတယ်။ container_12 ဆိုတာကတော့ 12 Columns ကို သုံးမယ်လို့ ဆိုလိုပါတယ်။ clearfix ဆိုတာကတော့ အထဲမှာ ပါတဲ့ Content တွေအားလုံး ရှင်းလင်းလိုက်တာပါ။ grid_ နဲ့ စတာတွေကတော့ grid system ရဲ့ ဘယ်အပိုင်းတွေယူမယ်ဆိုတာ သတ်မှတ်ပေးတာပါ။ အဲဒီအပြင် ကျွန်တော်တို့ သတ်မှတ်သွားတာတွေကို ပုံနဲ့ ပြန်ကြည့်လိုက်ရအောင်

ပုံတွေ ဘာတွေ ဘာမှမပါတဲ့အတွက် Grid System ကို ပိုပြီး နားလည်လွယ်မယ်လို့ ထင်ပါတယ်။ အဲဒီမှာ grid-based layout ကိုလည်း တွေ့နိုင်မှာ ဖြစ်သလို Grid တွေအတွက် naming system ကိုလည်း တွေ့နိုင်ပါလိမ့်မယ်။ နောက်ခံမှာရှိတဲ့ Grid အရေအတွက် လေးခုဆို grid_4 လုပ်လိုက်ရုံပါပဲ။ ခြောက်ခုဆို grid_6 ပေါ့။ ဒါပေမယ့် container ထဲ ထည့်ပေးဖို့လိုပါမယ်။ မဟုတ်ရင် ဘယ် 12 Columns လား၊ 16 Columns လား ကွဲပြားမှာ မဟုတ်တော့ပါဘူး။

အပေါ်မှာလည်း ကျွန်တော်တို့ သုံးထားပါတယ်။ 4 + 4 + 4 = 12 ပေါ့။ အဲဒီတော့ 12 Columns တွေက သုံးပိုင်းခွဲတဲ့ နေရာမှာ အင်မတန် သင့်တော် အဆင်ပြေတယ်လို့ ဆိုနိုင်ပါတယ်။

အဲဒီလိုပါပဲ။ ၄ ကော်လံ အတွက်ဆို 16 Columns က အဆင်အပြေဆုံးဖြစ်ပါလိမ့်မယ်။ 4 + 4 + 4 + 4 = 16 ဆိုရင် ၄ ကော်လံတွင် အသင့်တော်ဆုံး အနေအထားပါ။

အဲဒီလို grid တွေကို သုံးတဲ့နေရာမှာ အထူးသတိပြုရမယ့် အချက်ကတော့ grid တွေကို container ထဲမှာသာ သုံးရမှာ ဖြစ်ပါတယ်။ 12 Columns အတွက်ဆို container_12၊ 16 Columns ဆိုရင် container_16 အထဲမှာ သုံးပေးမှာသာ နေရာတကျ ဖြစ်ပါလိမ့်မယ်။

အရင်တုန်းက 960.gs ကို တစ်ခါမှ မသုံးဖူးသူ ဆိုရင်တော့ ခုချိန်မှာ မိုက်လှချေလား၊ ရှယ်ပဲလို့ ထအော်ကြမှာ သေချာပါတယ်။

Push Me, Pull Me

ဒါကို မြန်မာလို နားလည်အောင် ဘာသာပြန်ရမယ် ဆိုရင်တော့ ဟိုဖက်တိုးလိုက်၊ ဒီဖက်တိုးလိုက်၊ တိုးရင်းနဲ့ ရွေ့လိုက်၊ ရွေ့ရင်းနဲ့တိုးလိုက် လို့ဆိုရမယ်ထင်ပါတယ်။ pull ဆိုတော့ ဆွဲမယ်၊ push ဆိုတော့ တွန်းမယ်ပေါ့။ အဓိကကတော CSS class တွေကို ဆွဲမယ်၊ တွန်းမယ်လို့ အဓိပ္ပါယ်ရပါတယ်။

အပေါ်က ပုံတွေမှာ ကြည့်မယ်ဆိုရင် grid တွေကြားမှာ Whitespace တွေ ခြားထားတာ တွေ့ပါလိမ့်မယ်။ အဲဒီ white space တွေကို push နဲ့ pull ကို သုံးပြီးသုံးနိုင်ပါတယ်။ ဒါပေမယ့် တစ်ခါ push လုပ်ရင် pull လုပ်ရင် grid တစ်ခုစီ ဆွဲပါတယ်။ တွန်းပါတယ်။

ထုံးစံအတိုင်း နမူနာ တစ်ခုလောက် လုပ်ကြည့်ရအောင်။ ပိုပြီး သဘောပေါက် လွယ်မှာ ဖြစ်ပါတယ်။

အပေါ်မှာ ပြထားတဲ့အတိုင်း နမူနာရေး ကြည့်မယ်ဆိုရင်

<div class = "grid_6 push_3">
         <p>logo</p>
</div>
<div class = "grid_3 pull_6">
         <p>text column</p>
</div>
<div class = "grid_3">
         <p>text column</p>
</div>

<div class="grid_12">
         <p>big box</p>
</div>

အဲဒီလိုလေး ရေးကြည့်မယ်ဆိုရင်

logo က  အလည်ကို ရောက်သွားတာ တွေ့ရပါလိမ့်မယ်။ ရေးတဲ့ နေရာမှာတော့ logo ကို အရင်ဆုံး ရေထားတာတာ ဖြစ်ပေမယ့် တကယ်တန်း ပြတဲ့အခါမှာ အလည်ရောက်သွားတာ သတိထားမိပါလိမ့်မယ်။

White Space တွေ Grid မှာ သုံးမယ်ဆိုရင်

တစ်ခါတစ်လေမှာ grid တွေကို သုံးပြီး Site ကို Frame ချတယ်ဆိုပေမယ့် ဖြည့်စရာမလိုတဲ့ နေရာတွေ ရှိနိုင်ပါတယ်။ အဲဒီလို နေရာတွေမှာ စာတွေလည်း ဘာမှမပါဘူး။ ဒီအတိုင်း White Space အနေနဲ့ ထားချင်တယ်ဆိုရင် prefix_ နဲ့ suffix_ ကိုသုံးပြီးထားနိုင်ပါတယ်။ prefix ကတော့ ရှေ့မှာ ထားတာ ဖြစ်ပြီး suffix ကတော့ နောက်မှာ ထားတာဖြစ်ပါတယ်။ ကျွန်တော်ရေးတဲ့ tutorials မှာ ပါပြီးဖြစ်တဲ့အတွက် ထပ်မရေးတော့ပါဘူး။

အချုပ်ဆိုရသော်

ခုလောက်အထိ Grid System ကို လေ့လာပြီးပြီဆိုရင် ကျွန်တော်တို့ HTML5 and CSS3 Tutorial ကို ဆက်လို့ရပါပြီ။ ဒီတော့ လေ့လာခဲ့သမျှ ထဲကနေ အဓိကကျတဲ့ အချက်အလက်တွေကို ပြန်စုကြည့်ရအောင်

• container_12 ကို 12 Columns အတွက်သုံးပြီး container_16 ကိုတော့ 16 Columns အတွက် သုံးပါတယ်
• grid_1, grid_2, grid_3 စတာတွေကို container တွေနဲ့ တွဲပြီးသုံးနိုင်ပါတယ်။ grid_* တွေရဲ့ Pixel တွေဟာ column တွေအပေါ်မှာ မူတည်မှာ ဖြစ်ပါတယ်။
• Push and pull ကို class တွေကို ဆွဲတဲ့နေရာမှာ တွန်းတဲ့ နေရာမှာ သုံးနိုင်ပါတယ်။
• prefix နဲ့ suffix ကို white space တွေ ရှေ့မှာ နောက်မှာ ထားချင်တဲ့အခါ သုံးနိုင်ပါတယ်။
• အခြား အသုံးဝင် အဖိုးတန်တာတွေ 960.gs မှာ ရှိနေပါသေးတယ်။ လိုအပ်ရင် လိုအပ်သလို လေ့လာသွားပါ။

ကျွန်တော်ရေးသမျှထဲမှာ မရှင်းလင်းသည်များ သိချင်သည်များ ရှိပါက ကွန်မင့်မှာ မေးနိုင်ပါတယ်ခင်ဗျာ။

အားလုံးပဲ ရွှင်လန်း ချမ်းမြေ့ပါစေခင်ဗျာ

Reference: sixreivisions

5 Responses

1. trh says:

   January 21, 2011 at 5:24 PM

   Bro, I am an avid reader of your HTML5 & CSS3 series. Your articles are vivid & easy-to-understand. Keep up the good work

   Reply
   • THIHA says:

     January 21, 2011 at 5:35 PM

     Thanks, bro. I will keep on writing.

     Reply
2. junemoe says:

   April 29, 2011 at 2:57 PM

   အစ်ကို့ရဲ့ ပို့စ်တော်တော်များများကို ဖတ်ပါတယ် –
   ကျွန်တော့်အတွက် အရမ်းအကျိုးရှိပါတယ် –
   ကျေးဇူးလည်းတင်ပါတယ် –
   Grid System ကို အရင်က မသိခဲ့ပါဘူး – တလောက ကွန်ပျူတာပညာရှင်များအသင်းကဖွင့်ပေးခဲ့တဲ့
   India က အဖွဲ့လာသင်တဲ့အတန်းမှာ Grid System ကိုသုံးပြီး Photoshop မှာ Design ဆွဲရင် Layout ချတဲ့အခါအရမ်းအဆင်ပြေမှန်း သိခဲ့ရပါတယ် –
   အစ်ကိုပြောမှ 960.gs ကို စသိတာပါ –
   ကျေးဇူးပါအစ်ကို – လာမယ့်ပို့စ်တွေကိုလည်း မျှော်နေပါတယ် -

   Reply
3. Yar Zar Aung says:

   April 30, 2011 at 2:11 PM

   Grid 960 is a yesterday story .. Today newspaper has its title, 1140 CSS Grid : chk cssgrid(dot)net .. Great tutorial tough ..

   Reply
4. tulip says:

   August 16, 2011 at 12:51 PM

   Thanks alot brother ko Thi Ha.

   Valuable tutorials!!!

   Reply