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

Ở bài trước chúng ta đã tìm hiểu cách căn chỉnh item trong grid theo chiều ngang. Bài này chúng ta sẽ tìm hiểu cách sử dụng thuộc tính align-items và align-self để căn chỉnh item theo chiều dọc.

Cũng giống với cách căn chỉnh theo chiều ngang bằng thuộc tính justify-items và justify-self. Để căn chỉnh theo chiều dọc chúng ta vẫn sử dụng giá trị start, end, center và stretch.

Căn chỉnh items theo chiều dọc bằng thuộc tính align-items

Cũng giống như ví dụ ở bài trước, tôi đã sử dụng một ảnh nền để bạn thấy hiểu về thuộc tính này.

Chúng ta hay xem đoạn CSS trong code sau:

Tôi đã sử dụng thuộc tính:

align-items: center;

Để căn chỉnh cho các item A, B, C, D. Như bạn thấy, các item được định vị là theo hàng, cột. Tuy nhiên, khi thêm thuộc tính align-items vào thì các item lại được căn chỉnh vào giữa theo vị trí đã định vị. Nó tác dụng đối với tất cả những items trong grid (Những item không được căn chỉnh trực tiếp)

Các giá trị của thuộc tính align-items như sau:

    + Start: Căn theo vị trí bắt đầu (hàng bắt đầu)

    + Center: Căn vào giữa

    + End: Căn theo vị trí kết thúc (hàng kết thúc)

    + Stretch: Căng ra theo chiều dọc

Bạn hãy thử thay 3 giá trị còn lại để hiểu rõ hơn bản chất của thuộc tính này.

Sử dụng align-self để căn chỉnh cho từng item

Cũng giống như justify-self, align-self là thuộc tính sử dụng căn chỉnh cho từng item được chỉ định.

Chúng ta hãy xem Demo code

Như bạn thấy, thuộc tính

align-self: stretch/start/end/center;

Được đặt trong từng itmes. Và cách nó hoạt động cũng thật dễ hiểu. Đơn giản là căn chỉnh bản thân nó, theo chiều dọc với các giá trị stretch, strat, end, center.

Bạn hãy tử tạo một grid responsive và căn chỉnh bằng tất cả các thuộc tính đã học để luyện tập.

Sử dụng Justify-content và Align-content trong căn chỉnh nội dung

Trong Grid cũng còn sử dụng được thêm thuộc tính căn chỉnh nội dung.

Demo code:

Thuộc tính căn chỉnh nội dung này sử dụng các giá trị: space-around, space-between, space-evenly.

Bạn hãy thử thay giá trị này vào thuộc tính justify-content và align-content để hiểu cách nó hoạt động nhé.

Quan điểm của tôi là hãy biến Kiến thức lập trình của tôi thành Kỹ năng lập trình của bạn mà con đường ngắn nhất là lặp đi lặp lại nó đủ nhiều.

NOTE: Hãy thử thay đổi ít nhất 7 phiên bản khác nhau.

Vậy là chúng ta đã tìm hiểu gần như đầy đủ về Css Grid, cách nó hoạt động và vận dụng nó để tạo ra các layout dễ dàng, viết ít code hơn, ít sử dụng thư viện hơn.

Có lẽ CSS Grid sẽ còn tiếp tục cập nhật những tính năng hay ho hơn, và tôi cũng sẽ tiếp tục seri Ví dụ về CSS Grid nếu nó cập nhật.

Chúc các bạn học lập trình tốt.

> Nếu bạn muốn học Lập trình web một cách bài bản, hiệu quả hơn thì tham khảo ngay KHÓA HỌC LẬP TRÌNH WEB (Full Stack) tại NIIT - ICT Hà Nội.

Link tham khảo:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://gridbyexample.com