Tailwind CSS cung cấp một hệ thống lưới cho phép người dùng chia trang web thành các cột và hàng bằng các tiện ích grid-cols và grid-row. Nó cũng cung cấp các tiện ích bắt đầu và kết thúc cột lưới để kiểm soát kích thước và vị trí của các phần tử trên các cột lưới. Các tiện ích này cho phép người dùng chỉ định vị trí bắt đầu và kết thúc của một phần tử trong bố cục lưới.
Bài viết này sẽ giải thích phương pháp làm cho các cột bắt đầu hoặc kết thúc tại đường lưới thứ n cụ thể trong Tailwind CSS.
Làm cách nào để Cột bắt đầu hoặc kết thúc tại Đường lưới thứ n trong Tailwind?
Để làm cho các cột bắt đầu hoặc kết thúc ở đường lưới thứ n trong Tailwind, hãy sử dụng “ col-start-
Bước 1: Chỉ định vị trí bắt đầu và kết thúc của các phần tử lưới trong chương trình HTML
Tạo một chương trình HTML và sử dụng “ col-start-
< thân hình >
< h1 lớp học = 'trung tâm văn bản text-2xl' >
Tailwind CSS - Bắt đầu cột / Kết thúc
h1 >
< div lớp học = 'lưới grid-cols-4 gap-3 m-3' >
< div lớp học = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div lớp học = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div lớp học = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div lớp học = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div lớp học = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
thân hình >
Ở đây, trong phần tử cha
- “ lưới ” được sử dụng để tạo bố cục dạng lưới.
- “ lưới-cols-4 ” chỉ định rằng lưới phải có 4 cột có kích thước bằng nhau.
- “ khoảng cách-3 ” lớp đặt khoảng cách 3 đơn vị giữa mỗi mục lưới.
- “ m-3 ” lớp thêm lề 3 đơn vị xung quanh vùng chứa lưới.
Trong các phần tử
- “ col-start-2 ” thuộc tính xác định rằng mục lưới bắt đầu ở cột 2.
- “ col-span-2 ” chỉ ra rằng mục lưới chiếm 2 cột.
- “ col-start-1 ” được sử dụng để bắt đầu mục lưới từ cột 1.
- “ col-end-3 ” xác định rằng mục lưới kết thúc ở cột 3.
- “ col-start-3 ” chỉ ra rằng mục lưới bắt đầu từ cột thứ hai.
- “ col-end-5 ” thuộc tính kết thúc mục lưới ở cột 5.
- “ col-span-3 ” xác định rằng mục lưới chiếm 3 cột.
- “ bg-teal-500 ” đặt màu xanh mòng két cho nền của tất cả các mục lưới.
- “ p-5 ” thêm phần đệm 5 đơn vị vào nội dung bên trong các mục lưới.
Bước 2: Xác minh đầu ra
Để đảm bảo rằng các vị trí bắt đầu và kết thúc của cột lưới đã được áp dụng, hãy xem trang web HTML:
Đầu ra ở trên chỉ ra rằng các vị trí bắt đầu và kết thúc của cột lưới đã được áp dụng thành công theo vị trí mà chúng được chỉ định.
Phần kết luận
Để làm cho các cột bắt đầu hoặc kết thúc tại đường lưới thứ n trong Tailwind, hãy chọn “ col-start-