CSS Grid module layout: items (Phần 2)
TIL
720
CSS3
49
White

Tấn Huy viết ngày 28/01/2019

Ở bài trước chúng ta đã tìm hiểu về các property của container trong css grid layout module. Thì tiếp theo phần 1, bài này chúng ta sẽ tìm hiểu nốt phần còn lại đó chính là các property chính của phần items.

Các property của items

grid-column / grid-row

Như chúng ta đã biết ở bài trước, trong grid các items được chia theo hàng và cột, và ở giữa mỗi hàng và cột thì chúng ta sẽ có những đường như thế này:
alt text
(Nguồn w3school)
Khi sử dụng grid-column hay grid-row là chúng ta sẽ phải dùng đến những đường thẳng này.

grid-column

grid-column này là cách viết tắc cho grid-column-startgrid-column-end và công dụng của grid-column-startgrid-column-end như thế nào thì chúng ta sẽ đi đến ví dụ sau, đây là một container với các items bên trong như thường lệ (và trong hình dưới mình sẽ đánh số cho các đường thẳng ở dòng và cột để tiện giải thích):
alt text
Nếu ta thêm vào items số 1 như sau:

/*chúng ta dùng pseudo class để chọn div số 1 - tức item số 1*/
.grid-container > div:nth-child(1){
        grid-column-start:1;
        grid-column-end:3;
    }

Ta sẽ có kết quả như sau:
alt text
Như chúng ta đã thấy, sau khi sử dụng grid-column-start:1;grid-column-end:3; thì chiều rộng của items 1 đã trở nên gấp đôi các items khác, nói đúng nhất là bình thường chiều rộng của items 1 sẽ từ line 1c cho tới line 2c như hình ban đầu (line 1c, line 2c là mình dùng để ám chỉ các đường thẳng của cột) sau khi sử dụng grid-column-start:1;grid-column-end:3; có nghĩa là ta sẽ quy định lại item 1 sẽ có chiều rộng từ line 1c đến tận line 3c cho nên ta thấy nó sẽ kéo dài ra bằng hai item bình thường. Ta sẽ tiếp tục thực hiện lên một item khác, ta sẽ chọn item 12

.grid-container > div:nth-child(12){
        grid-column-start:1;
        grid-column-end:5;
    }

Lần này ta sẽ cho chiều dài của item 12 kéo dài từ line 1c cho đến line 5c, ta được kết quả như sau:
alt text
Và ta có thể sử dụng cách viết tắc grid-column thay thế cho cả 2 grid-column-startgrid-column-end, ví dụ ta dùng grid-column cho đoạn CSS của item 1 ở trên thì sẽ là:

 .grid-container > div:nth-child(1){
        grid-column:1 / 3;
    }

chúng ta sẽ được kết quả tương tự ở trên. syntax của grid-column là:

 grid-column: đườngbắtđầu /  đườngkếtthúc

Ngoài ra nếu thay vì ta viết grid-column:1 / 3 thì ta có thể viết grid-column: 1 / span 2. Ở cách viết trên số 1 vẫn là đánh dấu cho điểm bắt đầu, tuy nhiên span 2 ở đây có nghĩa là nó sẽ kéo từ line 1c và vượt qua line 2c cho đến khi chạm tới đầu line 3c thì hết. Ta sẽ thử lên item 4 như sau

 .grid-container > div:nth-child(4){
        grid-column:1 / span 3;
    }

Kết quả:
alt text
Chúng ta thấy item 4 kéo dài từ line 1c và chạm đến line 4c các viết đó cũng giống như viết thế này:

 .grid-container > div:nth-child(4){
        grid-column:1 / 4;
    }

grid-row

Ngược lại với grid-column thì chúng ta có grid-row, cách thức hoạt động của grid-row thì cũng giống grid-column nhưng thay vì là các đường thẳng ở cột thì grid-row sẽ là nhưng đường hẳng ở hàng. Và đương nhiên grid-row là các viết tắc cho grid-row-startgrid-row-end. Lấy lại hình ví dụ ở trên để ta thực hiện ví dụ với grid-row
alt text
Ví dụ ta chọn item số 1 để thực hiện cách viết thông thường với grid-row-startgrid-row-end:

.grid-container > div:nth-child(1){
    grid-row-start:1;
    grid-row-end:4;
}

Ta sẽ được:
alt text
Sử dụng grid-row lên item 8 xem:

.grid-container > div:nth-child(8){
    grid-row:3 / 5;
}

Kết quả:
alt text
Cuối cùng là dử dụng span:

  .grid-container > div:nth-child(2){
      grid-row:1 / span 2;
  }

Kết quả:
alt text

justify-self

Ở bài trước chúng ta đã tìm hiểu về justify-items là có tác dụng căn chỉnh các items bên trong nào là về đầu trục, cuối trục, ra giữa hay kéo giãn. Thì với justify-self, nó tạo ra với tác dụng là làm trái lệnh từ justify-items vậy. Ví dụ ta có hình như sau:
alt text
và nếu ta sử dụng justify-items:centercontainer thì tất cả các items sẽ được căn hết vào giữa như thế này:
alt text
Tuy nhiên ví dụ thằng số 7 muốn phá luật, nó muốn kéo giãn ra chứ không muốn bị co lại và căn ra giữa nữa, thì ta làm như sau:

 .grid-container > div:nth-child(7){
        justify-self:stretch;
    }

Boom:
alt text
Thằng số 7 lách luật thành công. các giá trị của justify-self cũng tương tự như justify-items như: end, start, centerstretch nhưng nó chỉ tác dụng lên được item được chỉ định như cái tên của nó - self chứ không tác dụng lên toàn bộ item.

align-self

Nếu như justify-self là dùng để lách luật của justify-items thì align-items cũng có thằng lách luật của nó, đó chính là align-self. Cũng giống như justify-self thì align-self cũng chỉ tác dụng lên được item được chỉ định như cái tên của nó - self chứ không tác dụng lên toàn bộ item. Và nó cũng có các giá trị tương tự: end, start, centerstretch. Điều duy nhất khác với justify-self đó chính là justify-self tác dụng lên cột còn align-self sẽ tác dụng lên hàng.
align-items ban hành luật align-items:center:
alt text
align-self lách luật với

.grid-container > div:nth-child(6){
        align-self:start;
    }

Kết quả:
alt text

link tham khảo

HyHy 08-08-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tấn Huy

17 bài viết.
19 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
12 2
Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS Trong bài viết này chúng ta sẽ tìm hiểu việc tạo ra một thanh tìm kiếm và khi nhấp ch...
Tấn Huy viết 1 năm trước
12 2
White
8 1
Ở phần trước mình đã nói về các property của phần parent trong CSS Flexbox (xem lại (Link)). Hôm nay chúng ta sẽ nói tiếp phần còn lại đó là các pr...
Tấn Huy viết 1 năm trước
8 1
White
7 0
Sau khi đã tìm hiể về Grid ở hai phần trước về các property thông dụng của grid ((Link), (Link)) thì chúng ta cũng đã thấy grid rất hữu dụng vì tha...
Tấn Huy viết 1 năm trước
7 0
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 năm trước
0 4
White
36 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hà Phạm viết gần 4 năm trước
36 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
19 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!