BÀI MỚI NHẤT
MỚI CẬP NHẬT

Place Items trong Tailwind CSS

Tìm hiểu về tính năng Place Items trong Tailwind CSS và cách sử dụng nó để định vị phần tử trên trang web của bạn. Bằng cách sử dụng các class được cung cấp bởi Tailwind, bạn có thể tùy chỉnh và định vị phần tử của mình dễ dàng hơn bao giờ hết.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Trong thế giới phát triển web hiện nay, Tailwind CSS là một trong những thư viện CSS phổ biến được sử dụng để tăng tốc độ thiết kế và tối ưu hóa mã nguồn. Với nhiều thuộc tính và class hữu ích, Tailwind CSS giúp cho việc thiết kế giao diện trở nên nhanh chóng và dễ dàng hơn bao giờ hết.

Trong bài viết này, chúng ta sẽ tìm hiểu về một trong những thuộc tính quan trọng của Tailwind CSS - place-items. Chúng ta sẽ cùng nhau khám phá cách sử dụng thuộc tính này để định vị các phần tử trong một container một cách linh hoạt và hiệu quả.

1. Place Items trong Tailwind CSS là gì?

Trong Tailwind CSS, place-items là một thuộc tính dùng để định vị các phần tử bên trong một container, bao gồm cả các phần tử con bên trong. Thuộc tính này được sử dụng kết hợp với thuộc tính display với giá trị là grid hoặc inline-grid.

Bài viết này được đăng tại [free tuts .net]

Thuộc tính place-items cho phép bạn định vị cả chiều dọcchiều ngang của các phần tử con. Các giá trị của place-items bao gồm:

  • place-items-start: căn chỉnh các phần tử con vào phía trên bên trái của container.
  • place-items-end: căn chỉnh các phần tử con vào phía dưới bên phải của container.
  • place-items-center: căn chỉnh các phần tử con vào giữa của container.
  • place-items-stretch: kéo các phần tử con đến kích thước đầy đủ của container.
  • place-items-baseline: căn chỉnh các phần tử con theo đường gốc.

Giờ chúng ta hãy cùng nhau tìm hiểu place-items thông qua từng ví dụ dưới đây để xem chúng stylesheet ra sao nhé!

2. Sử dụng Place Items trong Tailwind CSS

Thuộc tính place-items-start của Place Items

Để đặt các phần tử lưới ở vị trí bắt đầu của vùng lưới trên cả hai trục, bạn có thể sử dụng thuộc tính place-items-start. Đây là một tính năng hữu ích khi bạn muốn căn chỉnh các phần tử trên trang web. Bằng cách căn chỉnh các phần tử, trang web trông cân bằng hơn và dễ đọc hơn.

Ví dụ minh họa như:

<!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ề Place Items trong Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="container mx-auto">
    <div class="grid grid-cols-3 gap-4 place-items-start ...">
      <div>01</div>
      <div>02</div>
      <div>03</div>
      <div>04</div>
      <div>05</div>
      <div>06</div>
    </div>
  </div>
</body>
</html>

Kết quả thực tế sẽ trông như này:

place items trong tailwind css 1 jpg

Hình ảnh sử dụng class place-items-start

Thuộc tính place-items-start được áp dụng trên container, có nghĩa là tất cả các phần tử con bên trong sẽ được căn chỉnh lên phía trên bên trái của container. Các phần tử con được hiển thị theo thứ tự từ trái sang phải và từ trên xuống dưới, vì chúng được xác định theo cột đầu tiên (từ trên xuống) sau đó tới cột thứ hai và cột thứ ba.

Thuộc tính place-items-end của Place Items

Khi thiết kế một lưới, bạn có thể sử dụng thuộc tính place-items-end để đặt các mục lưới ở cuối vùng lưới của chúng trên cả hai trục ngang và dọc. Điều này đặc biệt hữu ích khi bạn muốn tạo một bố cục phức tạp hơn hoặc khi bạn muốn căn chỉnh các mục với một điểm cụ thể trong lưới.

Ví dụ:

<!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ề Place Items trong Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="container mx-auto">
    <div class="grid grid-cols-3 gap-4 place-items-end h-56 ...">
      <div>01</div>
      <div>02</div>
      <div>03</div>
      <div>04</div>
      <div>05</div>
      <div>06</div>
    </div>
  </div>
</body>
</html>

Kết quả thực tế:

place items trong tailwind css 2 jpg

Hình ảnh sử dụng class place-items-end

Ở ví dụ trên, thuộc tính place-items-end được áp dụng trên container, có nghĩa là tất cả các phần tử con bên trong sẽ được căn chỉnh xuống phía dưới bên phải của container.

Lưu ý rằng vì chúng ta đang sử dụng lớp place-items-end để căn chỉnh tất cả các phần tử con bên trong container, nên sẽ không có sự khác biệt giữa việc sử dụng lớp justify-items-end hoặc align-items-end để căn chỉnh theo chiều ngang hay chiều dọc. Cả hai lớp đều sẽ có kết quả tương tự.

Thuộc tính place-items-center của Place Items

Một cách để đảm bảo rằng các phần tử trong lưới của bạn được căn giữa hoàn hảo là sử dụng thuộc tính place-items-center. Thuộc tính này cho phép bạn đặt các phần tử trong lưới ở giữa khu vực của chúng trên cả hai trục x và y.

Ví dụ như:

<!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ề Place Items trong Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="container mx-auto">
    <div class="grid grid-cols-3 gap-4 place-items-center h-56 ...">
      <div>01</div>
      <div>02</div>
      <div>03</div>
      <div>04</div>
      <div>05</div>
      <div>06</div>
    </div>
  </div>
</body>
</html>

Còn đây là kết quả:

place items trong tailwind css 3 jpg

Hình ảnh sử dụng class place-items-center

Như bạn có thể thấy, thuộc tính place-items-center được áp dụng trên container, có nghĩa là tất cả các phần tử con bên trong sẽ được căn chỉnh chính giữa của container cả theo chiều ngang và chiều dọc.

Lưu ý rằng vì chúng ta đang sử dụng lớp place-items-center để căn chỉnh tất cả các phần tử con bên trong container, nên sẽ không có sự khác biệt giữa việc sử dụng lớp justify-items-center hoặc align-items-center để căn chỉnh theo chiều ngang hay chiều dọc. Cả hai lớp đều sẽ có kết quả tương tự.

Thuộc tính place-items-stretch của Place Items

Để kéo dãn phần tử theo cả hai trục trên vùng lưới của nó, bạn có thể sử dụng thuộc tính place-items-stretch. Thuộc tính này sẽ đảm bảo rằng các phần tử sẽ chiếm toàn bộ chiều rộng và chiều cao của vùng lưới tương ứng của chúng, điền đầy không gian khả dụng một cách đồng đều.

Ví dụ minh họa:

<!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ề Place Items trong Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="container mx-auto">
    <div class="grid grid-cols-3 gap-4 place-items-stretch h-56 ...">
      <div>01</div>
      <div>02</div>
      <div>03</div>
      <div>04</div>
      <div>05</div>
      <div>06</div>
    </div>
  </div>
</body>
</html>

Hình ảnh dưới đây là kết quả:

place items trong tailwind css 4 jpg

Hình ảnh sử dụng class place-items-stretch

Trong ví dụ này, thuộc tính place-items-stretch được áp dụng trên container, có nghĩa là tất cả các phần tử con bên trong sẽ được kéo dài về kích thước của container theo cả chiều ngang và chiều dọc.

Lưu ý rằng lớp place-items-stretch chỉ có tác dụng khi các phần tử con chưa được xác định kích thước cụ thể. Nếu các phần tử con đã được định dạng với chiều rộng và chiều cao cụ thể, lớp place-items-stretch sẽ không có tác dụng.

3. Áp dụng có điều kiện với Place Items trong Tailwind CSS

Khi sử dụng Tailwind, bạn có khả năng áp dụng lớp có điều kiện trong các trạng thái khác nhau bằng cách sử dụng các biến thay đổi. Ví dụ, bạn có thể sử dụng lớp hover:place-items-center để áp dụng tiện ích place-items-center chỉ khi người dùng di chuột qua một phần tử trên trang web của bạn.

Ví dụ cho bạn thấy như sau:

<!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ề Place Items trong Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="container mx-auto">
    <div class="grid place-items-start hover:place-items-center">
      <div>01</div>
      <div>02</div>
      <div>03</div>
      <div>04</div>
      <div>05</div>
      <div>06</div>
    </div>
  </div>
</body>
</html>

Kết quả khi chạy thực tế:

place items trong tailwind css 5 jpg\

Hình ảnh sử dụng class hover:place-items-center khi chưa di chuột tới

place items trong tailwind css 6 jpg

Hình ảnh sử dụng class hover:place-items-center khi di chuột tới

Ở ví dụ này, lớp hover:place-items-center được sử dụng để định dạng lại vị trí các phần tử con khi người dùng di chuột qua container. Khi đó, các phần tử con sẽ được căn giữa container theo cả chiều ngang và chiều dọc.

4. Kết luận

Như vậy, qua bài viết này chúng ta đã tìm hiểu về cách sử dụng lớp place-items của Tailwind CSS để định dạng vị trí các phần tử con trong container. Chúng ta đã thấy rằng lớp này cung cấp các giá trị như start, end, center, stretch,... để giúp chúng ta dễ dàng thay đổi vị trí của các phần tử con trong container.

Bên cạnh đó, chúng ta cũng đã tìm hiểu thêm về cách kết hợp lớp place-items với các lớp khác của Tailwind CSS để tạo ra các hiệu ứng thú vị, như thay đổi vị trí các phần tử khi di chuột qua container.

Hy vọng rằng bài viết này đã giúp bạn hiểu thêm về cách sử dụng lớp place-items trong Tailwind CSS và áp dụng nó vào các dự án của mình một cách hiệu quả.

Cùng chuyên mục:

Place Self trong Tailwind CSS

Place Self trong Tailwind CSS

Place Content trong Tailwind CSS

Place Content trong Tailwind CSS

Align Self trong Tailwind CSS

Align Self trong Tailwind CSS

Align Items trong Tailwind CSS

Align Items trong Tailwind CSS

Align Content trong Tailwind CSS

Align Content trong Tailwind CSS

Justify Self trong Tailwind CSS

Justify Self trong Tailwind CSS

Justify Items trong Tailwind CSS

Justify Items trong Tailwind CSS

Justify Content trong Tailwind CSS

Justify Content trong Tailwind CSS

Gap trong Tailwind CSS

Gap trong Tailwind CSS

Grid Auto Flow trong Tailwind CSS

Grid Auto Flow trong Tailwind CSS

Grid Column Start / End trong Tailwind CSS

Grid Column Start / End trong Tailwind CSS

Grid Template Columns trong Tailwind CSS

Grid Template Columns trong Tailwind CSS

Grid Template Rows trong Tailwind CSS

Grid Template Rows trong Tailwind CSS

Flex Shrink trong Tailwind CSS

Flex Shrink trong Tailwind CSS

Flex Grow trong Tailwind CSS

Flex Grow trong Tailwind CSS

Flex Wrap trong Tailwind CSS

Flex Wrap trong Tailwind CSS

Flex Direction trong Tailwind CSS

Flex Direction trong Tailwind CSS

Flex Basis trong Tailwind CSS

Flex Basis trong Tailwind CSS

Cách sử dụng Flex để xây dựng layout trong Tailwind CSS

Cách sử dụng Flex để xây dựng layout trong Tailwind CSS

Z-Index trong Tailwind CSS

Z-Index trong Tailwind CSS

Top