Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Grid Template Columns trong Tailwind CSS
Bạn đang tìm kiếm một cách để tạo ra các layout đẹp và linh hoạt cho trang web của mình? Hãy tham khảo bài viết về Grid Template Columns trong Tailwind CSS để hiểu rõ hơn về cách sử dụng tính năng này để quản lý các cột và kích thước của chúng trong một lưới.
Với Grid Template Columns, bạn có thể dễ dàng tạo ra các layout linh hoạt và đẹp cho trang web của mình. Bài viết này cung cấp cho bạn một hướng dẫn chi tiết về cách sử dụng các lớp trong Tailwind CSS đơn giản để tạo ra các cột và kích thước của chúng trong một lưới. Giờ chúng ta sẽ đi sâu vào từng bước để hiểu cách sử dụng Grid Template Columns trong Tailwind CSS.
1. Grid Template Columns trong Tailwind CSS là gì?
Grid Template Columns là một tính năng của Tailwind CSS, cho phép bạn tạo ra các cột và thiết kế layout dễ dàng hơn bằng cách xác định trước các kích thước của các cột và khoảng cách giữa chúng. Bằng cách sử dụng Grid Template Columns, bạn có thể linh hoạt định nghĩa số lượng cột, kích thước và khoảng cách giữa chúng, giúp cho việc xây dựng giao diện trở nên nhanh chóng và dễ dàng hơn.
Tailwind CSS cung cấp một loạt các lớp tiện ích để quản lý Grid Template Columns, giúp bạn tạo các khu vực khác nhau trên trang web của mình và định vị các phần tử trong đó một cách dễ dàng và chính xác. Tôi đã tổng hợp sơ lược về các thuộc tính mà Tailwind CSS hỗ trợ cho Grid Columns như sau:
Bài viết này được đăng tại [free tuts .net]
|
Class
|
Properties
|
|---|---|
| grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); |
| grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
| grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
| grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)); |
| grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); |
| grid-cols-7 | grid-template-columns: repeat(7, minmax(0, 1fr)); |
| grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)); |
| grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)); |
| grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)); |
| grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)); |
| grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); |
| grid-cols-none | grid-template-columns: none; |
Ví dụ: grid-cols-3 là thiết lập lưới grid với ba cột. Khi sử dụng lớp tiện ích này, một khu vực sẽ được chia thành ba cột bằng nhau, giúp định vị các phần tử trong khu vực đó một cách dễ dàng và chính xác. Tương tự như grid-cols-1 và các lớp tiện ích khác của Grid Template Columns trong Tailwind CSS, bạn có thể linh hoạt định nghĩa kích thước và khoảng cách giữa các cột để phù hợp với nhu cầu thiết kế của mình.
2. Sử dụng Grid Template Columns trong Tailwind CSS
Để sử dụng Grid Template Columns trong Tailwind CSS, bạn cần thiết lập một lớp cho phần tử chứa lưới của bạn. Điều này sẽ giúp bạn tạo một lưới linh hoạt, có thể đáp ứng được nhiều kiểu thiết kế khác nhau. Bạn có thể tùy chỉnh số lượng cột trong lưới của bạn bằng cách sử dụng lớp grid-cols-{n}. Chẳng hạn, nếu bạn muốn tạo một lưới với 4 cột, bạn chỉ cần thêm lớp grid-cols-4 vào phần tử lưới của bạn. Bằng cách này, bạn có thể tạo ra một nền tảng cơ bản để phát triển các trang web với nhiều kiểu thiết kế khác nhau.
Bạn cũng có thể sử dụng lớp col-span-{n} để thiết lập kích thước của từng cột. Ví dụ, nếu bạn muốn cột đầu tiên chiếm 2 cột, bạn có thể thêm lớp col-span-2 vào phần tử cột đó.
Dưới đây là một ví dụ về cách sử dụng Grid Template Columns trong Tailwind CSS để tạo một lưới với 4 cột và kích thước của các cột là 1/4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freetuts - Tìm hiểu về Grid Template Columns trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="grid grid-cols-4 gap-4">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
</div>
</div>
</body>
</html>Còn kết quả sau khi chạy ở dưới đây:
Hình ảnh sử dụng class grid-cols-4
Trong ví dụ này, tôi đã sử dụng lớp tiện ích grid-cols-4 để tạo một lưới grid với 4 cột. Lớp tiện ích gap-4 được sử dụng để tạo khoảng cách 4px giữa các phần tử trong lưới grid. Các phần tử trong lưới grid này được định dạng với chiều cao 12px.
Kết quả là một lưới grid với 4 cột được tạo ra, các phần tử được định vị chính xác trong khu vực đó, giúp cho việc thiết kế trở nên dễ dàng và nhanh chóng hơn. Bạn có thể sử dụng lớp tiện ích này để tạo các layout cho các trang web hoặc ứng dụng của mình một cách dễ dàng.
3. Áp dụng có điều kiện với Grid Template Columns trong Tailwind CSS
Trong Tailwind CSS, bạn có thể điều kiện áp dụng các lớp utility cho các trạng thái khác nhau của phần tử sử dụng variant modifiers. Ví dụ, để áp dụng lớp grid-cols-6 chỉ khi trỏ chuột vào phần tử, bạn có thể sử dụng lớp hover:grid-cols-6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Freetuts - Tìm hiểu về Grid Template Columns trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="grid grid-cols-1 hover:grid-cols-6">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
</div>
</div>
</body>
</html>Còn hình ảnh kết quả sẽ trông như này:
Hình ảnh khi áp dụng grid-cols-1
Hình ảnh khi được áp dụng class grid-cols-6
Trong ví dụ này, các lớp grid và grid-cols-1 được áp dụng cho phần tử div theo mặc định, lớp này đặt màn hình thành lưới và chỉ định rằng phần tử phải có một cột.
Tuy nhiên, khi di chuột qua phần tử div, lớp hover:grid-cols-6 được áp dụng theo điều kiện, đặt số cột thành 6. Điều này có nghĩa là phần tử div sẽ mở rộng để chiếm nhiều không gian hơn theo chiều ngang khi nó đang được di chuột qua, đây có thể là một hiệu ứng hữu ích để tạo các phần tử giao diện người dùng tương tác như menu hoặc nút.
Lưu ý rằng thuộc tính hover chỉ là một trong nhiều thuộc tính dựa trên trạng thái mà Tailwind cung cấp. Tương tự, bạn có thể sử dụng các variant modifiers khác để áp dụng lớp utility cho các trạng thái khác nhau, chẳng hạn như focus, active, disabled, và nhiều hơn nữa.
4. Tùy chỉnh giá trị với Grid Template Columns trong Tailwind CSS
Bạn có thể tùy chỉnh giá trị của lưới Grid Columns trong Tailwind bằng cách chỉnh sửa trong tệp của mình. Thay vì sử dụng các giá trị mặc định, bạn có thể tạo kích thước phù hợp với nhu cầu của mình để tạo ra các bố cục độc đáo và hiệu quả hơn. Có 2 cách để bạn có thể tùy chỉnh giá trị của Grid Columns trong Tailwind:
Cách 1: Định nghĩa giá trị
Để có thể thêm mới hoặc tùy biến các giá trị bên trong lưới Grid Columns thì điều bắt buộc là bạn phải cài đặt Tailwind CSS về project mà chính các bạn đang làm. Nếu bạn chưa biết cách cài đặt thì có thể đọc lại bài viết hướng dẫn cài đặt Tailwind CSS vào project (Tailwind CLI) của chúng tôi tại đây. Sau khi bạn đã cài đặt về project thành công, chúng ta đã có thể bắt đầu thực hiện.
Đầu tiên bạn tìm và mở đến file ‘tailwind.config.js’ có nội dung như dưới đây:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}Giờ bạn có truy cập trực tiếp vào thuộc tính CSS grid-template-columns, để bạn có thể tạo các giá trị cột tùy chỉnh của riêng mình một cách tổng quát hoặc phức tạp và cụ thể cho trang web của mình.
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
// Simple 16 column grid
'16': 'repeat(16, minmax(0, 1fr))',
// Complex site-specific column configuration
'footer': '200px minmax(900px, 1fr) 100px',
}
}
}
}Cách 2: Không cần định nghĩa
Nếu bạn gặp tình huống cần sử dụng một giá trị grid-template-columns cụ thể mà không có trong giao diện của bạn, bạn có thể tạo một thuộc tính mới ngay lập tức bằng cách sử dụng bất kỳ giá trị nào bạn chọn bằng cách đặt nó trong dấu ngoặc vuông. Cú pháp như sau: grid-cols-[*giá trị*]:
<div class="grid grid-cols-[200px_minmax(900px,_1fr)_100px]"> <!-- ... --> </div>
5. Kết luận
Với Grid Template Columns trong Tailwind CSS, bạn có thể dễ dàng tạo ra các layout linh hoạt và đẹp cho trang web của mình. Bằng cách sử dụng các lớp CSS đơn giản, bạn có thể quản lý các cột và kích thước của chúng trong một lưới. Hy vọng bài viết này giúp bạn hiểu rõ hơn về Grid Template Columns trong Tailwind CSS và cách sử dụng nó để tạo ra các layout tuyệt vời cho trang web của bạn.
