Giới thiệu về CSS Grid

CSS Grid là một cách để sắp xếp các phần tử đồng thời theo chiều ngang và chiều dọc. Đây là một phương pháp tiên tiến hơn so với Flexbox, nhưng cũng phức tạp hơn để làm chủ.

Để tạo một grid, bạn cần đặt thuộc tính display của phần tử thành giá trị grid:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
}

Sau đó, phần tử sẽ trở thành một lưới hai chiều, trong đó các phần tử được sắp xếp theo chiều dọc (cột) và chiều ngang (hàng). Khu vực tại giao điểm của một cột và một hàng được gọi là một ô (cell).

Với các thuộc tính đặc biệt, bạn có thể sắp xếp các phần tử theo cả hàng lẫn cột. Điều này cho phép dễ dàng tạo ra, ví dụ, những thứ như thế này:

Trong các bài học tiếp theo, trước tiên chúng ta sẽ học cách sắp xếp các phần tử theo cột, sau đó chuyển sang học về hàng, và cuối cùng kết hợp tất cả lại với nhau.