• fans
  • 1036 reader
  • followers

960 Grid là một CSS Framework, mục đích của nó là giúp những người thiết kế web có thể tiết kiệm thời gian, công sức cho những công việc phải lặp đi lặp lại. Tuy đây là một framework rất phổ biến nhưng lại thiếu trầm trọng tài liệu hướng dẫn. Nếu đây là lần đầu tiên bạn mới làm quen với 960 Grid, thì bạn không khỏi bối rối khi xem mã của nó. Trong bài này chúng ta sẽ khám phá những tính năng của 960 Grid và cách sử dụng nó.

Trước đây tôi luôn nghĩ là những CSS Framework không thực sự cần thiết bởi vì CSS rất đơn giản và trực quan. Chúng ta không cần phải nhờ đến sự hỗ trợ của framework để hoàn thành giao diện một trang web. Cho đến khi có nhiều người email về hỏi cách sử dụng 960 Grid, qua tìm hiểu sơ qua về framework này, thì tôi biết rằng …. rất có thể tôi đã sai lầm khi nghĩ về các CSS Framework.

Đã bao nhiêu lần bạn phải float một cột sang trái, một cột sang phải, float logo sang trái, navigation sang phải, tính toán kích thước của từng thành phần để khỏi bị vỡ giao diện v.v..? Tôi cũng vậy và còn nhiều designer khác cũng thế. 960 Grid ra đời để giúp bạn giản lược những bước này và cho phép bạn bắt tay ngay vào phần trình bày nội dung.

960 Grid hoạt động như thế nào

960 Grid được thiết kế dựa trên một mạng lưới tọa độ. Các thành phần của trang web sẽ được sắp xếp nằm trong những mạng lưới này và toàn bộ trang web có chiều rộng là 960 Pixel. Sở dĩ nó là 960 mà không phải là những số khác là vì kích thước này phù hợp với đa số các độ phân giải màn hình và cũng rất dễ để chia đều cho các cột. Các cột có margin là 20px, đây cũng là kích thước margin phổ biến nhất để nội dung nhìn thoáng đãng và không bị rối.

960 grid

960 Grid có 3 mạng lưới chính, giao diện 12 cột, 16 cột và 24 cột. Tuy số lượng cột khác nhau nhưng kích thước không vượt quá 960 Pixel. Trong đa số các trường hợp, bạn có thể sử dụng giao diện 12 cột để thiết kế. Nhưng nếu bạn muốn có mạng lưới nhỏ hơn để tinh chỉnh các thành phần phức tạp hơn, thì bạn có thể sử dụng giao diện 16 và 24 cột. Trong bài này chúng ta sẽ nghiên cứu về giao diện 12 cột, cách áp dụng cho 2 giao diện còn lại hoàn toàn tương tự.

Cách sử dụng 960 Grid

Trước khi bạn có thể sử dụng được 960 Grid, bạn phải download CSS Framework này về đã. Sau khi download và giải nén bạn sẽ có một số thư mục như hình dưới:

960 grid

Trong bài này bạn chỉ cần quan tâm đến thư mục code. Trong đây sẽ có những file CSS như: reset.css, text.css và 960.css. Quan trọng nhất là file 960.css. Hai file kia bạn có thể giữ hoặc xóa tùy ý, nó chỉ có tác dụng reset thôi. Đa phần thì bạn nên giữ lại vì nó chứa những kiểu reset tốt nhất cho trang web.

Bạn cũng nên lưu ý nó có hai phiên bản: một đã nén với dung lượng nhỏ hơn còn một phiên bản chưa nén để chúng ta có thể làm việc với nó. Nếu bạn muốn làm trên trang web thật, thì hãy dùng phiên bản đã nén để giảm dung lượng xuống. Còn nếu bạn đang tập làm thì dùng phiên bản chưa nén để có thể xem code bên trong như thế nào.

Để sử dụng 960 Grid, bạn cần chèn đoạn mã sau vào phần <head> của tài liệu HTML, như cách chúng ta liên kết đến các file CSS thông thường.

<head>
	<meta charset='UTF-8' />
	<title>Izwebz - 960 Grid System Intro</title>
	<link rel='stylesheet' href='css/reset.css' />
	<link rel='stylesheet' href='css/960.css' />
	<link rel='stylesheet' href='css/style.css' />
</head>

Thường thì bạn nên giữ nguyên file 960.css mà không cần thay đổi gì cả. Bạn chèn thêm một file style.css vào và bạn có thể thêm những dòng code của mình vào file này.

Làm việc với 960 Grid System

Khi bạn xem biểu đồ dưới đây, hãy tưởng tượng mỗi một hộp sẽ là một CSS Class trong hệ thống 960 Grid. Để tạo một đối tượng với kích thước bằng các cột này, bạn chỉ cần gán một class tương ứng cho nó. Những CSS Class này được đặt tên theo thứ tự từ grid_1 cho đến grid_12. Class grid_1 sẽ là cột có kích thước nhỏ nhất và grid_12 sẽ là cột có kích thước lớn nhất.

960 grid

Trong giao diện 12 cột mà chúng ta sẽ sử dụng trong bài này, mỗi cột có kích thước là 60px và sẽ tăng dần lên 80px cho mỗi cột kế tiếp. Do vậy nếu bạn muốn một đối tượng có kích thước là 380px thì bạn sẽ phải dùng 5 cột và trong mã HTML bạn sẽ khai báo như sau.

<div class="grid_5"></div>

Với sự trợ giúp của những class này, bạn có thể dựng một giao diện phức tạp chỉ trong vòng một thời gian rất ngắn. Để cho đối tượng có chiều rộng tối đa là 940 Pixel, thì bạn chỉ cần khai báo cho đối tượng đó có class là grid_12 trong tài liệu HTML.

<div id="bigBox" class="grid_12">
	<p>Big box</p>
</div>
960 grid

Để ba cột còn lại nằm song song với nhau thì bạn cần viết mã HTML như sau:

<div id="wrapper" class="container_12">
   <div id="first" class="grid_4">Cột 1</div>
   <div id="second" class="grid_4">Cột 2</div>
   <div id="third" class="grid_4">Cột 3</div>
</div>
960 grid

Ở đây bạn chú ý rằng để hệ thống này hoạt động đúng đắn, bạn phải tạo một thẻ <div class=”container_12″> bao quanh lấy các thành phần khác. Sau đó bạn sẽ đặt tên các class theo số lượng cột mà bạn muốn.

Push và Pull

Nếu bạn xem trong file 960.css khi tải về, bạn sẽ thấy có 2 class là .pull_1 đến .pull_12push_1 đến push_12. Hai Class này được sử dụng để thay đổi vị trí của các thành phần trên trang theo chiều ngang. Ví dụ dưới đây ta có một giao diện 3 cột, vì một lý do nào đó bạn muốn đẩy cột bên tay trái vào trong 1 cột và kéo cột bên tay phải vào trong 2 cột bạn có thể khai báo HTML như sau:

<div id="container" class="container_12">
	<div id="first" class="grid_4 push_1">Push me if you can</div>
	<div id="second" class="grid_4">I am out of this</div>
	<div  id="third" class="grid_4 pull_2">Pull me if you can</div>
</div><!--end #container -->
960 grid

Như bạn thấy trên hình cột màu xanh dương bị đẩy sang bên tay trái 1 cột tương ứng với push_1 (ô màu hồng). Còn cột màu xanh lá cây bị kéo lại 2 ô do tác động của class pull_2.

Suffix và Prefix

Để tạo ra khoảng trống lớn giữa hai thành phần bạn có thể sử dụng hai class là Suffix và Prefix. Để tạo ra khoảng trống bằng 2 cột đằng sau một thành phần dùng Class suffix_2, hoặc tạo ra một khoảng trống bằng 4 cột ở trước một thành phần dùng prefix_4.

Ví dụ ta có 2 thẻ div như sau:

<div id="bigBox" class="grid_12">
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
</div>
960 grid

Bây giờ bạn muốn đẩy thẻ div thứ hai sang bên tay phải, bạn có thể làm như sau:

<div id="bigBox" class="grid_12">
	<div class="grid_3 alpha suffix_5">grid_3</div>
	<div class="grid_3">grid_3</div>
</div>
960 grid

Khi bạn thêm Class suffix_5 vào thẻ div đầu tiên, nó sẽ đẩy thẻ div thứ 2 lùi sang phải 5 ô. Bạn có thể thử với prefix sẽ cho kết quả ngược lại.

Alpha và Omega

Đây là 2 Class đặc biệt của 960 Grid dùng để loại bỏ đường biên margin của đối tượng đầu và cuối. Ví dụ bạn có mã HTML như sau:

<div id="bigBox" class="grid_12">
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
</div>

Khi xem trên trình duyệt bạn sẽ bị như hình dưới. Vấn đề ở đây là do chúng ta lồng 4 thẻ div vào trong một thẻ <div>id=”bigBog” class=”grid_12″</div> và tất nhiên giá trị Margin của nó vẫn còn và làm tăng kích thước của 4 thẻ này lên làm 20px (margin trái + margin phải 10+10 = 20). Đây chính là lý do mà bạn thấy ở hình dưới.

<div id="bigBox" class="grid_12">
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
</div>
960 grid

Để khắc phục bạn có thể sử dụng hai Class đặc biệt là Alpha và Omega.

<div id="bigBox" class="grid_12">
	<div class="grid_3 alpha">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3">grid_3</div>
	<div class="grid_3 omega">grid_3</div>
</div>
960 grid

Với hai Class là alphaomega được thêm vào, bạn sẽ thấy đường biên của hai phần tử đầu và cuối bị mất đi và giao diện của chúng ta hoạt động bình thường.

Tóm tắt

Bài này không quá dài nhưng lại chứa rất nhiều thông tin cho một lần đọc, do vậy cho những ai ngại đọc, đây là những ý chính của bài này

1. Sử dụng Class container_12 hoặc container_16 cho thẻ div bao quanh với những giao diện 12 hoặc 16 cột.
2. Sử dụng Class grid_1 cho đến grid_12 để xác lập độ rộng của từng cột. Nếu bạn muốn cột đó có độ rộng tối đa là 960 Pixel thì cho nó class là grid_12
3. Sử dụng Class Push và Pull để định vị từng phần tử riêng lẻ trên trang mà không cần quan tâm đến vị trí của nó trong tài liệu HTML.
4. Sử dụng Prefix và Suffix để tạo khoảng trắng trước và sau phần tử.
5. Sử dụng Alpha và Omega để loại bỏ đường biên của phần tử đầu và phần tử cuối.

Điểm mạnh và mặt hạn chế của 960 Grid

Như bất cứ cái gì cũng có 2 mặt, 960 Grid cũng có những điểm mạnh và mặt hạn chế như sau. Bạn có thể tham khảo và quyết định xem mình có nên sử dụng CSS framework không.

Điểm mạnh

  • Tiết kiệm thời gian
  • Tương thích nhiều trình duyệt phổ biến
  • Thiết kế theo chuẩn tọa độ

Mặt han chế

  • Phải có kiến thức trên mức cơ bản về CSS.
  • Phụ thuộc vào Framework khiến bạn mất tự do.
  • Thêm nhiều class “vớ vỉn” vào mã HTML.
  • Mất thời gian để học về hệ thống framework đó.
  • Kích thước trang web không thể vượt quá 960 Pixel.

Đây là đoạn mã HTML để tạo ra một trang web 2 cột đơn giản sử dụng 960 Grid

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8' />
	<title>Izwebz - 960 Grid System Intro</title>
	<link rel='stylesheet' href='css/reset.css' />
	<link rel='stylesheet' href='css/960.css' />
	<link rel='stylesheet' href='css/style.css' />
</head>

<body>

<div id="container" class="container_12">
	<div id="header" class="grid_12">This is a header</div>
	<div id="sidebar" class="grid_3"><h1>This is the sidebar</h1></div>
	<div id="mainContent" class="grid_9 omega"><p>This is the content</p></div>
	<div id="footer" class="grid_12">
		<p>Copyright &copy; izwebz. All rights reserved</p>
	</div>
</div><!--end #container -->
	
</body>

</html>
Bạn có sử dụng 960 Grid chưa?

Bạn có sử dụng CSS framework nào không? theo bạn CSS framework có cần thiết không? với tôi, sau một thời gian làm quen với 960 Grid, tôi thấy được những tính năng vượt trội của nó và có thể sẽ sử dụng nó ở những Project sắp tới.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Gáoồgáoố Gáo Càonacusânsầy

    bây giờ là bootstrap 3.0 hicc

  • Đào Đại Dương

    Bài viết rất bổ ích, cám ơn anh đã chia sẻ nhé. Có điều không biết cái này có hỗ trợ responsive không anh nhỉ. Hay lại cần dùng Twitter bootstrap để có responsive?

  • bui
  • Minh

    cái này khá hay và ko phức tạp máy như hiện tại thì phong trào reposive , cái này reposive thế nào nhỉ

  • nothing083

    theo mình biết thì có thể dùng 960 grid với nhiều kích thước mà. Bạn vào địa chỉ: 960.gs chọn vào Custom CSS Generator sẽ ra 1 trang cho phép chỉnh kích thước mình muốn

  • manhcuong

    Ẹc giao diện không thể vượt quá 960 thì chán chết, mình thích nó full màn hình cơ

  • Mr.Daklak

    Ước gì có một Tut về YAML css framework :D

  • http://truongtieuhoc.khonggianwebviet.com/ truong tieu hoc

    cám ơn bạn về bài viết nhưng mình chưa hiểu cho lắm

  • Mr Tri

    thanks đã chia sẻ… chắc tôi chỉ dùng được file reset.css thôi .. vì 960.css ko biết dùng ^^

  • http://webgiavang.com gia vang

    Framework tuyệt vời thế. Cảm ơn bạn đã chia sẽ, mình sẽ áp dụng cho website của mình.

  • Peterbo

    960grid kha hay, nhung co le no hoi phuc tap va kho tiep can. Minh nghi css framework Skeleton co le don gian hon nhieu. Cac ban co the xem xet viec su dung Skeleton thay the cho 960grid.

  • Long Tại Thiên

    Thanks vì bài viết rất hữu ích, nhưng mà do độ tùy biến của framework không cao, nên theo mình, thừa thẻ, thừ class là điều chắc chắn… rối cả lên…

  • Mr.Thang

    Bài viết của bạn rất hay. Mình cũng mới làm quen với 960 Grid, nhưng mình thấy nó hỗ trợ tốt cho việc CSS của mình, đỡ hẳn khâu phải căn chỉnh các thuộc tính của các cột

  • NeverGiveUp

    Thông báo link download đã die.
    Up lại cho anh em:

    Download tại đây

  • http://aol.gn Simon

    DW ơi, cho mình hỏi, mình không hiểu tại sao 4 cột grid_3 lại bị tràn xuống ? trong khi ở ví dụ bên trên có 3 cột grid_4 lại không vấn đề gì !? Theo mình biết thì mỗi cột có margin trái là 10px và margin phải cũng là 10px; cột đầu tiên, các cột ở giữa và cột cuối cùng đều như thế cả. Vậy thì tại sao lại có các class alpha và omega để làm gì ? Theo mình biết thì class alpha để triệt tiêu margin left của cột đầu tiên và omega để triệt tiêu margin phải của cột cuối cùng. Mình thiết nghĩ alpha và omega là để tăng kích thước của toàn trang lên maximum 960px, thay vì chỉ 940px do 2 margin đầu tiên và cuối cùng chiếm dụng mất 20px !

    Thanks ! và mong sớm có giải đáp từ DW hay bất cứ ai có thể giúp ^^

    • http://nothin lxn_ro

      mình test cả trường hợp sd và không sd alpha&omega, thì của mình đều không thấy bị nhảy (tràn xuống) như trên ví dụ. Có điều là khi sd alpha&omega thì ô đầu tiên không bị lùi vào một khoảng biên của ô đầu tiên nữa. theo mình thì alpha&omega chỉ đơn thuần giúp bỏ biên ngoài của ô. Còn với ví dụ này mình nghĩ cách tính của bạn đúng (mình cũng tính thế) và như cách tính đó thì không hề bị tràn xuống mà vừa khít 960px. Thân!

      • Thu Trang

        ở ví dụ sử dụng Alpha và Omega : mỗi cột chịu tác động của 2 class: class=”grid_12″ và class=”grid_3″. mỗi class có margin-left =10, margin-right=10 => mỗi cột có margin-left = 10+ 10= 20, margin-right cũng z.
        grid_3 có kích thước 220px => mỗi cột = 220+20=240px; 4 cột = 240*4=960px
        nên cột thứ 4 bị tràn phải rùi.
        => mún khắc phục nó dùng alpha và omega

        • Gáoồgáoố Gáo Càonacusânsầy

          bạn Thu Trang thân mến: nếu bạn sử dụng class=”grid_3″ có kích thước 220px. mà trong mỗi class=”grid” có margin-left-right là 10px => mỗi class=”grid_3″ có tổng width= 240px. vậy 4 class=”grid_3″ có tổng width= 960px. => nó không bị tràn.

    • Pham anh Dung

      Banj Simon thân mến, theo mình hiểu thì alpha có margin trái =0, omega có margin phải =0 đó bạn

  • long nguyen

    Chúng ta chỉ có thể sử dụng framework này vào những file psd đã thiết kế theo chuẩn 960 grid framework mà thôi :)

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives