Ví dụ CSS Grid Bài 14: Justify-items và Justify-self

Qua 13 bài ví dụ về CSS Grid chúng ta đã có được gần như đầy đủ kiến thức để tạo một bố cục bằng Grid. Hôm nay chúng ta sẽ tiếp tục tìm hiểu thêm về thuộc tính Justify-items và Justify-self.

2 thuộc tính này sử dụng để căn chỉnh các items theo chiều ngang.

Như chúng ta đã biết, Grid tạo bố cục theo 2 chiều (Tôi đã giải thích trong bài Kết hợp ưu điểm của CSS Grid và Flexbox), chiều dọc và chiều ngang.

Chiều ngang thì sẽ được căn chỉnh bằng thuộc tính justify-

Chiều dọc thì sẽ được căn chỉnh bằng thuộc tính align-. (Chúng ta sẽ học ở bài tiếp)

Căn chỉnh item bằng thuộc tính justify-items.

Chúng ta sẽ đi vào đoạn code demo luôn. Sau đó tôi sẽ giải thích cách nó hoạt động.

Tôi đã sử dụng một background img để làm rõ cách làm việc của thuộc tính này.

Ở đây tôi đã sử dụng thuộc tính justify-items: center; cho class .wrapper bao quanh các item.

Các bạn có thể thấy ở đây là sau khi sử dụng thì box A, B, C, D đã tự động căn lại vào giữa.

Chính xác hơn là căn vào giữa khu vực đã được định vị (theo chiều ngang).

Ví dụ khối A, được định vị khu vực là:

.a {
  grid-column: 1 / 3; /*Bắt đầu từ cột 1 và kết thúc ở cột thứ 3*/
  grid-row: 1 / 3; /*Bắt đầu ở hàng 1 và kết thúc ở hàng thứ 3*/
}

Sau khi sử dụng justify-items: center; thì chiều rộng đã tự động co vào giữa (theo chiều ngang) vừa với phần nội dung.

Ta thấy chiều dọc vẫn như cũ vì thuộc tính justify-items không điều chỉnh chiều dọc.

Nhiệm vụ của bạn:

Hãy thử sử dụng các giá trị sau để thay cho center: start, left, end và right.

Bạn thấy các giá trị start và left, end và right tương tự như nhau không? Đúng vậy, nó vẫn đúng, nhưng trong Grid, chúng ta sẽ sử dụng start và end để phù hợp với logic.

Nhưng vấn đề ở đây là sử dụng thuộc tính này sẽ căn chỉnh cho toàn bộ items. Nếu tôi chỉ muốn căn chỉnh item theo chỉ định thì làm thế nào? Hãy xem tiếp phần bên dưới.

Căn chỉnh item bằng thuộc tính justify-self.

Thuộc tính justify-selft là thuộc tính sử dụng để căn chỉnh các item được chỉ định riêng. Nó cũng sử dụng các giá trị: start, end, center, stretch.

Demo thuộc tính bằng code:

Giá trị stretch có nghĩa là căng ra, nó sẽ căng items theo chiều ngang (Nếu đi cùng thuộc tính justify- ).

Thuộc tính này sẽ được đặt vào trong từng items để định nghĩa cho bản thân (self) chúng.

Bạn thấy không, lập trình rất logic và ngôn ngữ rất trong sáng (Có thể bạn chỉ cần đọc tên thuộc tính thôi đã biết nó có ý nghĩa gì rồi.) 

Vậy là chúng ta đã tìm hiểu xong việc căn chỉnh theo chiều ngang bằng thuộc tính justify-. Bài tới chúng ta sẽ tìm hiểu thuộc tính align- để căn chỉnh items theo chiều dọc.

NOTE: Hãy thử thay đổi ít nhất 7 phiên bản khác nhau trước khi sang bài tiếp theo.

Bài tiếp theo: Ví dụ CSS Grid Bài 15: Align-items và Align-self