Hướng dẫn display: grid trong css
CSS Grid Layout là gì, ở bài viết này mình muốn giới thiệu một chút về nó qua một số ví dụ đơn giản để mọi người thấy được sự tiện dụng của nó để sau này có thể áp dụng được Grid Layout vào thực tế. Show CSS Grid Layout là gìHệ thống Grid Layout của CSS cung cấp một hệ thống bố cục dạng lưới, với cột và hàng (Khá giống với col và row của Bootstrap) mà không còn cần sử dụng đến Đầu tiên, cái chúng ta cần quan tâm nhất là nó có thể sử dụng ở gần như tất cả các trình duyệt hiện đại. Thuộc tính displayMột layout dạng lưới này phải có một element cha với Khi dùng HTML
CSS
Và chúng ta sẽ có: Chúng ta có thể thay đổi kích thước các cột như sau: CSS
Các bạn có thể tùy biến layout của bạn ở đây Tương tự như CSS
Chúng ta cũng có thể tùy biến được các hàng (rows) một cách đơn giản. CSS
Khoảng cách trong GridChúng ta cũng có thể thay đổi hoảng cách giữa các cột/hàng bằng cách sử dụng một số thuộc tính sau: CSS
Hoặc có thể viết ngắn gọn lại là Đường kẻĐường kẻ giữa các hàng gọi là row lines, giữa các cột là column lines Lấy ví dụ nào, chúng ta sẽ để ô 1 và 6 bắt đầu từ column line 1 và kết thúc ở column line 3 HTML
CSS
Và với thuộc tính
Thuộc tính grid-areaThuộc tính
Demo Đặt tên cho các item của GridChúng ta có thể gán tên cho từng item với thuộc tính HTML
CSS
Demo Qua bài viết này chúng ta đã được làm quen với các thuộc tính và cách sử dụng cơ bản của hệ thống Grid Layout CSS, bài viết sau chúng ta sẽ áp dụng hế thống này vào trong việc thiết kế một layout website đơn giản để mọi người có thể hình dung ra ứng dụng thực tế của hệ thống khá thú vị này. Thank you for attention! |