programming css

Khoảng cách cột trong css

Helloooo các bạn. Tiếp nối phần 2 của series CSS Grid thì hôm nay chúng ta sẽ tìm hiểu nốt các thuộc tính, giá trị và các hàm còn lại của CSS Grid cũng như cách sử dụng hiệu quả khi làm

Đặc biệt thì mình sẽ có một Project nho nhỏ là grid gallery làm bằng CSS Grid và áp dụng những thứ chúng ta đã học qua series css grid này luôn

# grid-auto-flow. ngu độn

Ở bài trước mình có nói qua thuộc tính này kèm theo đó là hai giá trị

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

8 và

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

9. Tuy nhiên, còn một giá trị khác nữa đó là

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

0. Giá trị này sẽ làm cho các phần tử tự động điền vào các chỗ trống trong lưới một cách hợp lý sao cho không còn dư khoảng trống

Giá trị này sẽ làm cho các phần tử sắp xếp không còn theo thứ tự nữa miễn phí sao nó cố gắng lấp đầy khoảng trống trong vùng chứa mà thôi. Các bạn có thể tham khảo Codepen[codepen mình tham khảo] dưới đây là sẽ hiểu thôi nè

Xem Bút GRID-auto-flow DENSE của Gabi [@enxaneta] trên CodePen

# tự động điều chỉnh so với tự động điền

Hai giá trị thông thường được sử dụng trong hàm

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

1 mà chúng ta đã tìm hiểu ở bài viết trước đó. Thật tình hai giá trị này mình không biết giải thích sao cho các bạn dễ hiểu được nên mình đang tìm một bài trình bày rất chi tiết về hai giá trị này để các bạn tham khảo. Các bạn có thể đọc nó tại đây nha

Để các bạn có thể cấu hình dung và hiểu sự khác biệt giữa chúng nên mình có thêm phần Codepen bên dưới để các bạn tham khảo nè. Lưu ý là các bạn phải nhấn nút “Chỉnh sửa trên Codepen” để vào trang Codepen xem chính xác và phải co giãn trình duyệt thì mới thấy được sự khác biệt nha

Xem tính năng tự động điền và tự động khớp với Bút của Sara Soueidan [@SaraSoueidan] trên CodePen

# dự án “đơn giản”

Đây là phần hot nhất ở đây. Mình sẽ làm demo kèm theo code cho các bạn theo dõi và làm theo luôn cũng như chia sẽ vài mẹo mà mình hay dùng khi làm cho các bạn. This is results after doing done

Dự án từ Udemy

Và điều trước tiên là các bạn phải làm đó là tải mẫu mã của mình về tại đây. Sau đó mở lên và bắt đầu theo dõi bài viết này và code theo nhé. Mình có note trong file

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

2 đoạn

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

3 các bạn mở file

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

2 và kéo xuống dưới cùng nhé

= Phân tích thiết kế

Kinh nghiệm của mình là tạo ra grid sao cho phù hợp. Mình bắt đầu đo kích thước của thiết kế và thấy rằng khoảng cách giữa các phần tử và

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

5của gallery đều là

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

Thì việc đầu tiên mình làm đó là css cho gallery

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

7 đồng thời mình cũng set luôn

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

Lưu ý do mình set html
.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}
9 về 62. 5% should at this
.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}
20. Các bạn có thể tham khảo bài viết về hướng dẫn sử dụng xung quanh đơn vị em và rem của mình trước đó để hiểu rõ lý do tại sao nhé

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

3
Tiếp theo mình nhìn vào tấm hình nhỏ nhất trong thiết kế. Mình đánh dấu ô màu xanh trong hình dưới đây và mình thấy rằng kích thước của nó là

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

21. Và khung gallery là

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

22 sau khi trừ đi padding 2 bên[30px] và các

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

23[dòng màu đỏ] giữa các phần tử là 4×15[60] thì khung gallery còn

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

= Create grid[grid] cơ bản

Sau khi chiều rộng và độ cao của phần tử nhỏ nhất là

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

25 và chiều rộng của thư viện là

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

26. Giờ là bước tạo lưới chỗ này quan trọng nè các bạn nhớ làm theo nha

Xin lưu ý đây là cách làm của mình và mình chia sẻ cho các bạn. Nếu các bạn thấy không đúng hoặc có cách khác hay hơn thì góp ý giúp mình nha

Mình sẽ lấy chiều rộng của thư viện là 1180 chia cho chiều rộng của phần tử nhỏ nhất rồi làm tròn xuống ta được

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

27. Từ đó ta tạo ra được 8 cột và mình sẽ cho các cột này đều bằng nhau vì thế mã của mình lúc này sẽ có

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

Còn về

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

29 thì mình cũng tính tương tự cho chiều cao của thư viện sau khi trừ

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

5 và các

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

23 ta được 540px. Ta lấy 540 chia cho chiều cao của phần tử nhỏ nhất là 70 và làm tròn xuống ta được

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

62. Từ đó sẽ có 7 hàng[hàng] ứng với chiều cao của phần tử nhỏ nhất là 70px[7rem]

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

Các bạn nhớ sử dụng Firefox rồi F12 lên .

Sau khi nhấp vào đó, các bạn nhìn vào kết quả sẽ giống như thế này

= Căn chỉnh vị trí cho các phần tử

Bây giờ là bước sắp xếp vị trí cho các phần tử đúng nơi nó hiển thị. Các bạn nhớ bước trên để xem các track line nhé. Vì nó rất quan trọng trong việc thiết lập vị trí cho các phần tử đó

Đây là hình mà mình đã minh họa và phân tích ra để các bạn tiện theo dõi và hình dung. Thiết kế này bao gồm tất cả là 14 hình

Các số màu đỏ là vị trí tương ứng cho các hình, số màu đen là các dòng theo dõi để chúng tôi xác định vị trí cột và hàng cho phần tử và màu xanh là tương ứng với các cột số và số hàng của phần tử chứa

Các bạn nhớ tải hình này về cho tiện theo dõi hơn chứ vừa đọc code vừa kéo chuột lên mất thời gian lắm đó. Giờ thì bắt đầu từng tấm một nhé. Trong mẫu mã nguồn thì đã có html css đặt tên đúng chuẩn rồi nhé

Đừng rằng quên track line mình đã nói rõ cho các bạn ở phần trước rồi nhé các bạn nhớ theo dõi thì mới hiểu, cột thì track line theo chiều ngang còn hàng thì track line theo chiều dọc

Sheet number 1. vào hình ta thấy nó chiếm 2 cột và 2 hàng. Cột thì bắt đầu từ track line số 1 tới track line số 3 còn hàng thì từ track line số 1 tới track line số 3 luôn. Suy ra ta có

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

2
Tấm số 2. Easy easy ta thấy theo cột thì nó bắt đầu từ dòng số 3 đến dòng số 6 và hàng thì bắt đầu từ dòng số 1 đến dòng số 4 nên ta có

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

6
Tấm số 3 : Quá đơn giản cột từ line 6 – 7 còn hàng thì line 1 – 3 nên ez

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

1
Tấm số 4. Cột thì từ dòng 7 – 9 và hàng thì giống tấm số 3 từ dòng 1 – 3

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

2
Tấm số 5. Cột từ dòng 1 – 3 và hàng thì từ dòng 3 đến dòng 6

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

3
Tấm số 6. Ta lại thấy cột thì bắt đầu từ dòng số 3 – 5 và hàng thì từ dòng số 4 đến dòng số 6 nên ta cũng có

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

4
Tấm số 7. Tiếp tục phân tích lại thấy theo cột thì nó nằm từ dòng số 5 – 6 và hàng thì từ dòng 4 -5

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
    grid-template-rows: repeat[7, 7rem];
}

5
Tấm số 8. Ez ta back thấy nó nằm ở cột từ dòng số 6 – 8 và hàng thì từ dòng 3 – 5

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

0
Tấm số 9. Sắp đặt xong rồi cố lên. Cột nằm từ dòng số 8 đến dòng số 9 còn hàng thì từ dòng 3 – 6.
______01
Tấm số 10. It is first thì theo cột tất nhiên là dòng số 1 đến dòng số 2 và hàng thì từ dòng số 6 – 8

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

2
Tấm số 11. Xuất phát từ dòng số 2 tới dòng số 4 của cột và hàng cũng tương tự của bảng số 10 đó là 6 – 8

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

3
Tấm số 12. Hàng thì cũng tương tự ở bảng số 11 là từ dòng 6 – 8 luôn còn cột thì từ dòng số 4 – 5

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

4
Tấm số 13. Chú thích nữa thôi. Nhìn kỹ ta thấy theo cột nó bắt đầu từ dòng 5 – 8 và theo hàng cũng từ dòng 5 – 8.

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

5
Tấm cuối cùng số 14. oh yeah nó nằm ở cuối dòng có cột từ số 8 – 9 và dòng từ số 6 – 8 giống số 12 nè

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

6
Phù cuối cùng cũng xong rồi . Đây là mã nguồn đầy đủ sau khi các bạn làm xong. Nhớ tham khảo và đối chiếu xem đúng không nè.

.gallery {
    background-color: #f9f7f6;
    padding: 1.5rem;
    grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat[8, 1fr];
}

7
Sau khi làm xong mà kết quả của các bạn giống với tấm hình ban đầu thì chúc mừng bạn đã thành công mỹ mãn còn không thì chắc chắn . Cố lên nhé.

# Lời kết

Hix. Cuối cùng cũng xong một loạt CSS Grid hại não này. Mệt quá luôn nà. Hi vọng với những kiến thức ít ỏi của mình sẽ giúp các bạn phần nào trong việc học và chinh phục kiến thức để ngày càng giỏi hơn nhé. Chúc các bạn một ngày tốt lành và đừng quên comment giúp mình có động lực viết bài tiếp theo nhé

# grid-auto-flow. ngu độn

# tự động điều chỉnh so với tự động điền

# dự án “đơn giản”

= Phân tích thiết kế

= Create grid[grid] cơ bản

= Căn chỉnh vị trí cho các phần tử

# Lời kết

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề