Kết nối

Tìm hiểu về Grid, bố cục xây dựng giao diện trang web trong CSS

360 lượt xem 
 Cập nhật lần cuối: 19/05/2019 lúc 00:44:30
Thể loại: CSS/CSS3, Thiết kế Web 

Grid là một module tạo bố cục website trong CSS bằng cách hỗ trợ hệ thống bố cục theo dạng lưới 2 chiều, gồm hàng và cột. Trước khi có Grid, bạn có thể tạo giao diện website theo nhiều kiểu khác nhau như sử dụng thẻ div, sử dụng bảng biểu (table).

Grid ra đời nhằm đơn giản hóa việc xây dựng giao diện website và hoạt động rất tốt với Flexbox. Flexbox cũng là 1 module hỗ trợ xây dựng bố cục nhưng áp dụng với các bố cục một chiều đơn giản. Khi Grid và Flexbox kết hợp với nhau, lập trình viên có thể tạo ra nhiều bố cục website phức tạp và đa dạng hơn.

Trình duyệt hỗ trợ Grid

Điều mà nhiều lập trình viên lo lắng đó là các trình duyệt phổ biến có hỗ trợ Grid hay không. May mắn là hiện nay Grid được rất nhiều trình duyệt khác nhau hỗ trợ và bạn có thể yên tâm áp dụng Grid để làm bố cục website cho mình.

Grid được nhiều trình duyệt hiện nay hỗ trợ. Ảnh: css-tricks.com.

Các khái niệm về Grid

Trước khi bắt đầu xây dựng bố cục trang web với Grid, bạn phải làm quen với các khái niệm về Grid như sau.

Vùng chứa Grid

Vùng chứa Grid (Grid Container) là vùng giao diện sử dụng grid. Vùng này có phong cách CSSdisplay: grid;. Ví dụ tạo 1 lớp tên là .grid-container trong thẻ div là vùng chứa grid như sau.

<!DOCTYPE html>
<html>
<head>
	<title>Grid CSS --- DAMMIO.COM</title>
	<style>
		.grid-container
		{
			display: grid;
		}

	</style>
</head> 

<body>
<div class="grid-container">
  <!-- Nội dung của Grid ở đây -->
</div>
</body>

</html>

Phần tử Grid

Trong vùng chứa Grid chứa nhiều phần tử con, gọi là phần tử Grid (Grid Item). Nếu chỉ nói đến một phần tử Grid riêng biệt nào đó trong Grid gọi là Grid Cell. Nếu một nhóm các phần tử Grid gom chung với nhau gọi là vùng Grid (Grid Area). Các phần tử có thể được sắp xếp theo hàng và cột.

Ví dụ một Grid chứa 3 phần tử con trên 1 hàng như sau. Ví dụ có sử dụng 1 số lớp tô màu để bạn dễ nhìn hơn.

<!DOCTYPE html>
<html>
<head>
    <title>Grid CSS --- DAMMIO.COM</title>
    <style>
        .grid-container
        {
            	display: grid;
	   	grid-template-columns: auto auto auto; /* Grid chứa 3 cột */
        }

	.grid-item{ height:100px;}
	.item-1 { background-color:pink; }
	.item-2 { background-color:lightblue; }
	.item-3 { background-color:yellow; }
 
    </style>
</head> 
 
<body>
<div class="grid-container">
  	<div class="grid-item item-1">A --- dammio.com</div>
	<div class="grid-item item-2">B ---- dammio.com</div>
	<div class="grid-item item-3">C --- dammio.com</div>
</div>
</body>
 
</html>
 

Đường viền Grid

Để ngăn cách mỗi phần tử trong Grid, bạn có thể sử dụng các đường viền (border) ở mỗi phần tử Grid như sau.

<!DOCTYPE html>
<html>
<head>
    <title>Grid CSS --- DAMMIO.COM</title>
    <style>
        .grid-container
        {
            	display: grid;
		grid-template-columns: auto auto auto;
        }

	.grid-item
	{ 
		height:100px;
		border:1px solid #AAA;
	}
		
    </style>
</head> 
 
<body>
<div class="grid-container">
  	<div class="grid-item item-1">A --- dammio.com</div>
	<div class="grid-item item-2">B ---- dammio.com</div>
	<div class="grid-item item-3">C --- dammio.com</div>
</div>
</body>
 
</html>

Khoảng trắng giữa các phần tử Grid

Nếu bạn muốn ngăn cách phần tử trong Grid bằng một khoảng trống, việc bạn cần làm là chỉ cần thêm thuộc tính margin ở mỗi phần tử Grid. Nếu bạn chỉ muốn điều chỉnh khoảng cách giữa văn bản và đường viền ở mỗi Grid thì bạn có thể dùng thuộc tính padding. Ví dụ tạo khoảng cách 10px giữa các phần tử Grid như sau.

<!DOCTYPE html>
<html>
<head>
    <title>Grid CSS --- DAMMIO.COM</title>
    <style>
        .grid-container
        {
            display: grid;
			grid-template-columns: auto auto auto;
        }

		.grid-item
		{ 
			height:50px;
			border:1px solid #AAA;
			margin: 5px;
			background-color:yellow;
		}
		
    </style>
</head> 
 
<body>
<div class="grid-container">
  	<div class="grid-item item-1">A --- dammio.com</div>
	<div class="grid-item item-2">B ---- dammio.com</div>
	<div class="grid-item item-3">C --- dammio.com</div>
	<div class="grid-item item-1">D --- dammio.com</div>
	<div class="grid-item item-2">E ---- dammio.com</div>
	<div class="grid-item item-3">F --- dammio.com</div>
</div>
</body>
 
</html>

Tuy nhiên, có 1 cách tốt hơn đó là bạn định nghĩa bằng 3 thuộc tính có sẵn của grid ở vùng chứa đó là: grid-column-gap (khoảng trống theo hàng), grid-row-gap (khoảng trống theo cột) và grid-gap (khoảng trống theo hàng và cột). Ví dụ tạo khoảng trống giữa hàng và cột là 10px như sau. Kết quả hiển thị cũng gần tương tự như cách trên.

<!DOCTYPE html>
<html>
<head>
    <title>Grid CSS --- DAMMIO.COM</title>
    <style>
        .grid-container
        {
            display: grid;
			grid-template-columns: auto auto auto;
			grid-gap:10px;
        }

		.grid-item
		{ 
			height:50px;
			border:1px solid #AAA;
			background-color:yellow;
		}
		
    </style>
</head> 
 
<body>
<div class="grid-container">
  	<div class="grid-item item-1">A --- dammio.com</div>
	<div class="grid-item item-2">B ---- dammio.com</div>
	<div class="grid-item item-3">C --- dammio.com</div>
	<div class="grid-item item-1">D --- dammio.com</div>
	<div class="grid-item item-2">E ---- dammio.com</div>
	<div class="grid-item item-3">F --- dammio.com</div>
</div>
</body>
 
</html>

Thuộc tính

Như vậy, bạn đã hiểu sơ về Grid và các khái niệm thông qua các ví dụ trên. Phần này liệt kê đầy đủ các thuộc tính CSS mà bạn có thể sử dụng với Grid như sau.

Thuộc tính áp dụng cho vùng chứa Grid (Grid Container)

Danh sách thuộc tính:

  • display: cách hiển thị vùng chứa
  • grid-template-columns: định nghĩa độ rộng các cột trong grid
  • grid-template-rows: định nghĩa độ rộng các dòng trong grid
  • grid-template-areas: định nghĩa vùng Grid theo tên lớp tham chiếu
  • grid-template: cách tắt để định nghĩa grid-template-rows, grid-template-columns, và grid-template-trên cùng 1 thuộc tính.
  • grid-column-gap: khoảng trống dòng
  • grid-row-gap: khoảng trống cột
  • grid-gap: định nghĩa khoảng trống cho dòng và cột
  • justify-items: canh phần tử theo dòng
  • align-items: canh phần tử theo cột
  • place-items: canh phần tử theo dòng lẫn cột
  • justify-content: canh nội dung theo dòng
  • align-content: canh nội dung theo cột
  • place-content: canh nội dung theo dòng và cột
  • grid-auto-columns: tạo cột tự động
  • grid-auto-rows: tạo dòng tự động
  • grid-auto-flow: tạo dòng, cột tự động
  • grid: hiển thị vùng chứa dạng lưới

Thuộc tính áp dụng cho phần tử Grid (Grid Item)

Danh sách thuộc tính:

  • grid-column-start: cột bắt đầu, dùng để tạo phần tử chứa nhiều cột
  • grid-column-end: cột kết thúc, dùng để tạo phần tử chứa nhiều cột
  • grid-row-start: dòng bắt đầu, dùng để tạo phần tử chứa nhiều dòng
  • grid-row-end: dòng kết thúc, dùng để tạo phần tử chứa nhiều dòng
  • grid-column: cột
  • grid-row: dòng
  • grid-area: vùng lưới
  • justify-self: canh theo dòng
  • align-self: canh theo cột
  • place-self: canh theo dòng và cột

Grid trong thiết kế bố cục Web

Grid cho phép bạn tạo một ma trận bố cục 2 chiều gồm các dòng và các cột. Ở mỗi dòng, cột và mỗi phần tử trong Grid bạn có thể chỉnh sửa phong cách vì vậy Grid cũng rất thích hợp để tạo bố cục trang Web. Ngoài ra, các bảng biểu, các trò chơi có dạng bàn cờ như ca rô, cờ vua,… để rất thích hợp dùng Grid để xây dựng giao diện.

Ví dụ tạo một giao diện Grid đơn giản dùng Grid. Trong ví dụ này, chúng ta sử dụng thuộc tính grid-template-areas để định dạng cấu trúc bố cục website và một số phong cách CSS khác.

<!DOCTYPE html>
<html>
<head>
    <title>Grid CSS --- DAMMIO.COM</title>
    <style>
        .grid-container
        {
            display: grid;
			grid-template-areas:
			'header header header'
			'sidebar-1 content sidebar-2'
			'footer footer footer';
        }

		.header
		{ 
			padding:5px;
			grid-area: header;
			width:100%;
			height:100px;
			background-color:yellow;
		}
		
		.sidebar-1
		{
			padding:5px;
			grid-area: sidebar-1;
			background-color:pink;
		}
		
		.sidebar-2
		{
			padding:5px;
			grid-area: sidebar-2;
			background-color:lightgreen;
		}
		
		.content
		{
			padding:5px;
			grid-area: content;
			background-color: #BB8FCE;
		}
		.footer
		{
			padding:5px;
			grid-area: footer;
			border:1px dashed #AAA;
		}
		
    </style>
</head> 
 
<body>
<div class="grid-container">
  	<div class="grid-item header"><h3>Phần Header --- dammio.com</h3></div>
	<div class="grid-item sidebar-1">
		Phần Sidebar 1 ---- dammio.com<br/>
		Phần Sidebar 1 ---- dammio.com<br/>
		Phần Sidebar 1 ---- dammio.com<br/>
		Phần Sidebar 1 ---- dammio.com<br/>
	</div>
	<div class="grid-item content">
		Phần nội dung Web --- dammio.com<br/>
		Phần nội dung Web --- dammio.com<br/>
		Phần nội dung Web --- dammio.com<br/>
		Phần nội dung Web --- dammio.com<br/>
		Phần nội dung Web --- dammio.com<br/>
		Phần nội dung Web --- dammio.com<br/>
		Phần nội dung Web --- dammio.com<br/>
		Phần nội dung Web --- dammio.com<br/>
		Phần nội dung Web --- dammio.com<br/>
	</div>
	<div class="grid-item sidebar-2">
		Phần Siderbar 2 --- dammio.com
	</div>
	<div class="grid-item footer">
		Phần Footer ---- dammio.com
	</div>
</div>
</body>
 
</html>

Grid dùng trong thiết kế Web đáp ứng

Theo quan sát của DAMMIO.COM, khi dùng Grid trong thiết kế Web đáp ứng, bạn phải thiết kế phong cách riêng cho từng độ rộng thiết bị màn hình khác nhau, có thể sử dụng @Media CSS. Việc này có thể khiến bạn mất nhiều thời gian hơn, nếu bạn rất am hiểu về @Media CSS thì có thể thiết kế giao diện theo hướng này. Tuy nhiên, theo chúng tôi bạn nên dùng 1 số framework như Bootstrap, Skeleton, Foundation (Zurb), Buma, Pure, Semantic UI,… để thiết kế giao diện vì các framework đã tích hợp sẵn nhiều tính năng cho thiết kế web đáp ứng (Web Responsive) và cũng giúp bạn tiết kiệm nhiều thời gian hơn khi thiết kế. Chúc bạn may mắn!

Bình luận Facebook

1
Để lại bình luận

avatar
1000
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Các tác giả bình luận
Các tác giả bình luận gần đây
  Theo dõi  
mới nhất cũ nhất được bình chọn nhiều nhất
Thông báo của
trackback

[…] Tìm hiểu về Grid, bố cục xây dựng giao diện trang web trong CSS – 16 tháng 05, 2019 lúc 8:45:09 Chiều […]