CSS Grid là gì ? Cùng tìm hiểu về CSS Grid

Khi ứng dụng web ngày càng trở nên phức tạp hơn, chúng ta cần có cách tự nhiên hơn nữa để dễ dàng thực hiện viết layout cao cấp. Và như vậy, với CSS Grid Layout Module, ta sẽ có một giải pháp mới để tạo layout, nhanh và hiệu quả hơn nữa.

Trong bài giới thiệu, ta sẽ được làm quen với tính năng CSS còn khá mới này, tìm hiểu các dạng trình duyệt được hỗ trợ, kèm theo một số ví dụ về cách hoạt động của nó.

CSS Grid Layout Module là gì?
Ý tưởng chính đằng sau Grid Layout là chia web page thành nhiều cột và hàng, cùng với khả năng chỉ định vị trí và kích thước của các building block element dựa trên kích thước, vị trí, và layer của hàng và cột ta đã tạo.
Lưới ô cũng mang đến cách thức thay đổi vị trí của phần tử rất dễ dàng với chỉ CSS mà không thay đổi đến HTML. Phương thức mới này có thể được sử dụng với media query để thay đổi layout tại các breakpoint khác.
Ví Dụ:

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9

[highlighter]

to be continued