Bước 4: Thiết kế Layout với hệ thống lưới - Grid System
Đối với web design, hệ thống lưới được nhiều người dùng nhất đó là multi-columns và modular.1. MULTI-COLUMNS :
Đối với hệ thống lưới multi-columns, các bạn có thể tham khảo thêm tại 2 website
http://960.gs/
960 Grid System đơn giản là hệ thống lưới cho nội dung website có độ rộng là 960 pixel.
Với hệ thống lưới này có 2 phần : 12 column và 16 column.
Trong hệ thống 12 column, mỗi cột sẽ có độ rộng là 60px, lề trái và phải mỗi bên là 10 px, khoảng cách giữa các cột là 20px. Ngoài ra, ta có thể linh hoạt kết hợp các cột lại như sau :
Từ đó, ta thấy độ rộng các cột có thể là 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 và 940 pixel.
Tương tự, trong hệ thống 16 column, mỗi cột sẽ có độ rộng là 40 px. Ta cũng có thể kết hợp chúng lại như sau :
Độ rộng mỗi cột có thể là 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 và 940 pixel.
Đây là một ví dụ cho việc sử dụng hệ thống 12 column, các bạn có thể tham khảo thêm nhiều ví dụ khác tại website của 960 Grid System
Ngoài 960 Grid System, các bạn còn có thể sử dụng 978 Grid System, tham khảo tại website :
http://978.gs/
Với hệ thống Grid này, các bạn xem demo tại đây để biết thêm về kích thước cũng như khoảng cách của mỗi cột
http://978.gs/demo/
2. MODULAR GRID
Modular Grid là hệ thống lưới mà không chỉ chia ra nhiều cột mà còn chia nhiều hàng, tạo thành các hình vuông hay hình chữ nhật đều nhau, giúp cho việc thiết kế linh hoạt hơn
Với hệ thống lưới này, khi chia các phần trong website của bạn sẽ dễ dàng hơn, mình cũng rất hay sử dụng Grid này
Dưới đây là một ví dụ website sử dụng modular grid
Thật đơn giản để thực hiện phải không các bạn?
Share This:
Jillur Rahman
I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.
No Comment to " Bước 4: Thiết kế Layout với hệ thống lưới - Grid System "