Hướng dẫn grid html - lưới html
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ế. 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 3 hay 4Đầ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 .container { display: grid; grid-template-columns: auto auto; background-color: #3e2723; padding: 10px; border-radius: 10px; } .item { background-color: #80cbc4; border: 1px solid #fff; padding: 20px; font-size: 30px; text-align: center; } 5Một layout dạng lưới này phải có một element cha với 5 được set là 7 hay 8.Khi dùng 9, chúng ta sẽ được một container chứa grid dưới dạng blockHTML
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
Và chúng ta sẽ có: Chúng ta có thể thay đổi kích thước các cột như sau: 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
Và chúng ta sẽ có:Chúng ta có thể thay đổi kích thước các cột như sau: CSS
Và chúng ta sẽ có: Chúng ta có thể thay đổi kích thước các cột như sau:Các bạn có thể tùy biến layout của bạn ở đây Tương tự như 9, 1 sẽ khiến tạo một container inline.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:Các bạn có thể tùy biến layout của bạn ở đây
0Tương tự như 9, 1 sẽ khiến tạo một container inline. Chúng ta cũng có thể tùy biến được các hàng (rows) một cách đơn giản.Khoảng cách trong Grid HTML 1CSS 2 Chúng ta cũng có thể tùy biến được các hàng (rows) một cách đơn giản. Khoảng cách trong Grid |