Trong Tailwind CSS, khoảng cách hàng giúp một phần tử chiếm hai hàng trở lên trong lưới. Nó được sử dụng để xác định số hàng mà một phần tử sẽ chiếm/span. Nó cho phép người dùng điều chỉnh kích thước và vị trí của mục lưới trên nhiều hàng và tạo các bố cục khác nhau. Hơn nữa, nó có thể được sử dụng để tạo bố cục lưới linh hoạt và đáp ứng cho các trang web.
Bài viết này sẽ minh họa phương pháp tạo khoảng cách hàng trong Tailwind CSS.
Cách tạo khoảng cách hàng trong Tailwind?
Để tạo khoảng cách giữa các hàng trong Tailwind, hãy tạo một chương trình HTML. Sau đó, sử dụng “ hàng-span-
Để triển khai thực tế, hãy xem các bước được cung cấp:
Bước 1: Tạo Cột Span trong Chương trình HTML
Tạo một chương trình HTML và sử dụng “ hàng-span-
< thân hình >
< div lớp học = 'lưới grid-row-4 grid-flow-col gap-3 m-3 text-center' >
< div lớp học = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div lớp học = 'bg-teal-500 p-5' > 2 < / div >
< div lớp học = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div lớp học = 'bg-teal-500 p-5' > 4 < / div >
< div lớp học = 'bg-teal-500 p-5' > 5 < / div >
< div lớp học = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / thân hình >
Ở đây, trong phần tử cha
- “ lưới ” lớp được sử dụng để tạo bố cục dạng lưới.
- “ lưới-hàng-4 ” đặt số hàng trong lưới thành 4.
- “ grid-flow-col ” lớp đặt các mục lưới theo chiều ngang trong các cột.
- “ 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 áp dụng lề 3 đơn vị xung quanh vùng chứa lưới.
- “ trung tâm văn bản ” lớp đặt văn bản của từng mục lưới vào trung tâm.
Trong các phần tử
- “ hàng-span-3 ” chỉ định rằng phần tử sẽ trải dài trên 3 hàng trong lưới.
- “ hàng-span-2 ” chỉ ra rằng phần tử sẽ trải dài trên 2 hàng trong lưới.
- “ hàng-span-4 ” chỉ định rằng phần tử sẽ trải rộng trên 4 hàng trong lưới.
- “ bg-teal-500 ” lớp đặt màu xanh mòng két cho nền của mục lưới.
- “ p-5 ” lớp thêm phần đệm 5 đơn vị vào nội dung bên trong các mục con.
Bước 2: Xác minh đầu ra
Xem trang web HTML để xác minh xem khoảng hàng đã được áp dụng hay chưa:
Trong đầu ra ở trên, có thể thấy rằng khoảng hàng đã được áp dụng thành công theo nó được chỉ định.
Phần kết luận
Để kéo dài các hàng trong Tailwind, hãy sử dụng “ hàng-span-
” tiện ích trong chương trình HTML và chỉ định số lượng hàng mà mỗi phần tử sẽ kéo dài. Để xác minh, hãy xem các thay đổi trên trang web HTML. Bài viết này minh họa phương pháp tạo khoảng cách hàng trong Tailwind CSS.