Lưới css

Xin chào các bạn, mình đã trở lại rồi đây. Trong phần 1 mình đã giới thiệu cho các bạn về CSS Flexbox - một trong những hệ thống bố trí cục bộ 1 chiều được sử dụng ở hầu hết các trang Web hiện tại. Ở phần 2 này, mình tiếp tục chia sẻ cho các bạn một hệ thống bố trí cục bộ dựa trên lưới 2 chiều với cả chiều dọc và chiều ngang, đó là CSS Grid. Chúng ta bắt đầu tìm hiểu nào

Thuộc tính cơ bản của CSS Flexbox và CSS Grid

2. Lưới CSS

CSS Grid là một hệ thống bố cục cục bộ dựa trên lưới 2. Mục tiêu đích không làm gì khác hơn là thay đổi hoàn toàn cách chúng ta thiết kế giao diện người dùng dựa trên lưới

Bố cục lưới phù hợp để thiết kế các trang web có độ phức tạp cao

CSS Grid giới hạn thuộc tính hiển thị với 2 value is grid and inline-grid

Hộp chứa lưới

.grid-container {
     display: grid / inline-grid;
}

• display : grid tạo lưới cấp khối (cấp độ khối)
• display : inline-grid tạo ra một lưới cấp độ nội tuyến (cấp độ nội tuyến)

2. 1 Các thuộc tính cho thành phần cha (bộ chứa lưới)

grid-template-columns và grid-template-row. chia lưới thành các cột hàng

lưới-mẫu-cột. tương ứng với các cột số, các giá trị sẽ tương ứng với chiều rộng của các cột lần lượt từ trái sáng phải

lưới-mẫu-hàng. tương ứng với các số hàng, các giá trị sẽ tương ứng với chiều cao của các hàng lần lượt từ trên xuống dưới

grid-template-columns:...;

________số 8_______

Thí dụ. tạo bố cục dạng lưới, chia bố cục thành 5 cột và 3 hàng tương ứng với chiều rộng và chiều cao chứa trong 2 thuộc tính trên

grid-template-columns: [first] 60px [line2] 70px [line3] auto [col4-start] 60px [five] 70px [end];

inline-grid0

inline-grid1. đây là các tên chú thích cho từng hàng từng cột, có thể sử dụng hoặc không sử dụng. Lưu cú pháp tên cú pháp sẽ là [tên muốn đặt cho cột hoặc hàng]

Ngoài ra, chúng ta có thể sử dụng phương thức lặp lại (số cột trên dòng, độ rộng cột) để chia cột và hàng trên lưới. Mình ví dụ inline-grid2 nghĩa là grid được chia làm 4 cột và mỗi cột tương ứng 25% tương ứng với các chữ viết inline-grid3

grid-template-khu vực. sắp xếp bố cục một cách nhanh chóng, đi vào ví dụ luôn luôn nhé

Giả sử bạn muốn thiết kế bố cục như sau

In layout on chia làm 4 cột và 3 hàng. header chiếm chọn hàng 1, content chiếm 2 phần, sidebar chiếm 1 phần, footer chiếm chọn hàng cuối còn 1 phần nằm giữa nội dung và sidebar. Vì vậy chúng ta có 4 khối. tiêu đề, nội dung, thanh bên và chân trang

inline-grid4

inline-grid5

inline-grid4

inline-grid7

inline-grid4

inline-grid9

inline-grid4

.grid-container {2

Tạo class cho item-header với thuộc tính .grid-container {3

Tạo lớp cho mục-nội dung với thuộc tính .grid-container {4

Tạo class cho item-sidebar với thuộc tính .grid-container {5

Tạo class cho item-footer với thuộc tính .grid-container {6

Sau đó chúng ta thiết lập thuộc tính grid-template-areas cho grid-container như sau

.grid-container {7

.grid-container {8

.grid-container {9

Mình giải thích qua nhé. item-header ở hàng đầu tiên sẽ chiếm 4 cột do đó sẽ là toàn bộ hàng đầu tiên sẽ là 4 tiêu đề giá trị, tương tự như chân trang. Ở hàng thứ 2, item-content sẽ chiếm 2 cột nên sẽ là 2 giá trị nội dung. Dấu chấm là bỏ trống lấy 2 phần. At item-sidebar will get 1 column should value is 1 sidebar. Theo mình nghĩ thì việc tạo layout theo khu vực cũng khá đơn giản và nhanh chóng

•      display: grid / inline-grid;0. is a shortand(gộp chung) cho 2 thuộc tính grid-template-columns và grid-template-row
•      display: grid / inline-grid;1. set size cho các đường lưới
  • grid-column-gap và grid-row-gap. đây là 2 thuộc tính cũ
  • col-gap và row-gap là 2 thuộc tính mới được sử dụng hiện tại

     display: grid / inline-grid;2

     display: grid / inline-grid;3

     display: grid / inline-grid;4

     display: grid / inline-grid;5

     display: grid / inline-grid;6

     display: grid / inline-grid;7

     display: grid / inline-grid;8

}

• }0. điều chỉnh nội dung bên trong một mục lưới dọc theo hàng trục
  • }1

}2

• }3. Thuộc tính này được căn chỉnh theo chiều dọc của mạng lưới theo hàng
  • }4

}2

2. 2. Các thuộc tính cho thành phần con (grid item)

}6. xác định vị trí bắt đầu và kết thúc của mục trong lưới

Thí dụ. item1 bắt đầu cột 1 và kết thúc ở cột 4, item2 bắt đầu ở cột 1 và kết thúc ở cột 2, item3 bắt đầu ở cột 1 và kết thúc ở cột 3

}7
}8
}9
}

display : grid1
}8
display : grid3
}

display : grid5
}8
display : grid7
}

display : grid9. is shortand(gộp chung) của các thuộc tính grid-column-start, grid-column-end, grid-row-start, grid-row-end

display : inline-grid0. định nghĩa tên cho mục chứa trong container. Tham chiếu tới các thuộc tính grid-template-areas trong grid container

• Thuộc tính này mình đã đề cập đến trong mục grid-template-areas
• display : inline-grid1

display : inline-grid2

}

• display : inline-grid4. Chỉnh sửa nội dung bên trong một mục lưới dọc theo hàng

display : inline-grid1

display : inline-grid6

}

pause

Vì thế là mình đã kết thúc bài viết chia sẻ về cách thiết kế bố cục sử dụng CSS Flexbox và CSS Grid. Hi vọng bài viết sẽ giúp các bạn trong quá trình tìm hiểu và làm việc.