Làm chủ justify-items trong CSS: Căn chỉnh nội dung chuyên nghiệp

Bạn muốn làm chủ cách căn chỉnh các item bên trong CSS Grid? Bài viết này sẽ giúp bạn hiểu rõ về thuộc tính justify-items trong CSS. Chúng ta cùng nhau khám phá sức mạnh của nó để tạo ra bố cục web đẹp mắt và chuyên nghiệp nhé!

Giới thiệu về justify-items trong CSS

justify-items là gì?

justify-items là một thuộc tính CSS được sử dụng để căn chỉnh các mục (items) dọc theo trục nội tuyến (inline axis) trong một vùng chứa lưới (grid container). Nói một cách đơn giản, nó kiểm soát cách các item được căn chỉnh ngang trong mỗi ô lưới (grid cell). Nếu bạn muốn tìm hiểu sâu hơn về CSS, hãy truy cập CSS là gì? để nắm vững kiến thức cơ bản.

Thuộc tính justify items trong CSS xác định cách các mục lưới được căn chỉnh theo chiều ngang bên trong ô lưới của chúng. Thuộc tính này rất hữu ích cho việc tạo ra các bố cục linh hoạt và đáp ứng.

Các giá trị của justify-items

justify-items chấp nhận một số giá trị, bao gồm:

• start : Căn chỉnh các mục về phía đầu của trục nội tuyến.
• end : Căn chỉnh các mục về phía cuối của trục nội tuyến.
• center : Căn chỉnh các mục vào giữa trục nội tuyến.
• stretch : Kéo dài các mục để lấp đầy toàn bộ không gian của ô lưới (giá trị mặc định).
• baseline : Căn chỉnh các mục theo đường cơ sở của chúng.

Cách sử dụng justify-items trong CSS Grid

Để sử dụng justify-items , bạn cần áp dụng nó cho vùng chứa lưới (grid container). Dưới đây là một ví dụ:

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; /* Căn chỉnh các mục vào giữa theo chiều ngang */ }

Trong ví dụ trên, tất cả các mục trong vùng chứa lưới sẽ được căn chỉnh vào giữa theo chiều ngang trong ô lưới của chúng. Để thay đổi căn chỉnh, bạn chỉ cần thay đổi giá trị của justify-items .

Ví dụ minh họa

Giả sử chúng ta có một vùng chứa lưới với ba cột và ba hàng. Chúng ta muốn căn chỉnh các mục ở giữa theo chiều ngang. Chúng ta có thể sử dụng justify-items: center; .

<div class="grid-container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> <div>Item 7</div> <div>Item 8</div> <div>Item 9</div> </div> <style> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; justify-items: center; background-color: #eee; padding: 20px; } .grid-container > div { background-color: #ddd; padding: 20px; text-align: center; } </style>

Sự khác biệt giữa justify-items , align-items , justify-content và align-content

Nhiều người mới bắt đầu thường nhầm lẫn giữa các thuộc tính justify-items , align-items , justify-content và align-content . Dưới đây là sự khác biệt chính:

• justify-items : Căn chỉnh các mục dọc theo trục nội tuyến (chiều ngang) trong mỗi ô lưới.
• align-items : Căn chỉnh các mục dọc theo trục khối (chiều dọc) trong mỗi ô lưới.
• justify-content : Căn chỉnh toàn bộ vùng chứa lưới dọc theo trục nội tuyến khi tổng kích thước của các mục nhỏ hơn kích thước của vùng chứa.
• align-content : Căn chỉnh toàn bộ vùng chứa lưới dọc theo trục khối khi tổng kích thước của các mục nhỏ hơn kích thước của vùng chứa.

Để hiểu rõ hơn, hãy tưởng tượng justify-items và align-items hoạt động trên từng ô lưới riêng lẻ, trong khi justify-content và align-content hoạt động trên toàn bộ vùng chứa lưới.

Lời khuyên và thủ thuật khi sử dụng justify-items

Dưới đây là một số lời khuyên và thủ thuật để sử dụng justify-items hiệu quả hơn:

• Sử dụng justify-items kết hợp với align-items để căn chỉnh các mục theo cả chiều ngang và chiều dọc.
• Thử nghiệm với các giá trị khác nhau của justify-items để tìm ra căn chỉnh phù hợp nhất cho bố cục của bạn.
• Sử dụng các truy vấn phương tiện (media queries) để thay đổi giá trị của justify-items dựa trên kích thước màn hình.
• Kết hợp justify-items với các thuộc tính CSS khác như margin và padding để tạo ra các bố cục phức tạp và hấp dẫn.

Ứng dụng thực tế của justify-items

justify-items có thể được sử dụng trong nhiều tình huống khác nhau, chẳng hạn như:

• Căn chỉnh các biểu tượng và văn bản trong thanh điều hướng.
• Tạo bố cục hình ảnh đẹp mắt trong thư viện ảnh.
• Căn chỉnh các phần tử trong biểu mẫu.
• Tạo bố cục đáp ứng cho các thiết bị di động.

Kết luận

justify-items là một thuộc tính CSS mạnh mẽ cho phép bạn kiểm soát cách các mục được căn chỉnh theo chiều ngang trong CSS Grid Layout. Bằng cách hiểu rõ các giá trị và cách sử dụng của nó, bạn có thể tạo ra các bố cục web đẹp mắt, linh hoạt và đáp ứng trên nhiều thiết bị. Hãy thử nghiệm và khám phá sức mạnh của justify-items để nâng cao kỹ năng thiết kế web của bạn!