Asked Jan 16th, 3:04 a.m. 109 0 2
  • 109 0 2
+1

Cách dàn trang(sản phẩm) bằng grid, row, column thủ công sử dụng html css?

Share
  • 109 0 2

Chuyện là sau một thời gian xài các thư viện như Bootstrap, TW thì hiện tại em đã quên luôn cách dàn trang rồi 😦) Và đây lại là một câu hỏi trong phóng vấn FE 😦) họ hỏi em sẽ xử lý sao với các item để dàn trang list các sản phẩm, đại loại như sau:

image.png

cái đoạn phần cách giữa các item vì em quên nên chỉ nói là margin right and bottom... thực ra là biết thế nào cũng bị hỏi cái item cuối trước khi wrap xuống dòng thì sẽ xử lý ntn và "ôi trời đất ơi" em đã bó tay 😂 nên em lên đây nhờ các anh/chị vá giúp lại em phần kiến thức này.... Em cảm ơn

2 ANSWERS


Answered Jan 16th, 3:30 a.m.
0

Dùng flex css, cụ thể display:flex; flex-wrap:warp(tự động xuống hàng khi số item nằm ngoài phạm vị 1 hàng) cho thẻ cha chứa các thẻ product, các thẻ product set width tùy theo số item bạn muốn trên 1 hàng, ví dụ 1 hàng 5 sản phẩm thì là width: 100%/5 = 20%;

Share
Avatar VozerSayHi @vozersayhi
Jan 16th, 6:46 a.m.

Cái mà mình đang vướng ở đây chính là phần khoảng cách giữa các item

0
| Reply
Share
Jan 19th, 4:34 a.m.

khoảng cách giữa các item có thể là Gap, 5 item 1 dòng thì bên ngoài bằng 1 display flex, bên trong mỗi item con sẽ đều đặt flex 1 thì chiều rộng như nhau

0
| Reply
Share
Answered Jan 16th, 5:27 a.m.
0
grid-template-columns: auto auto auto auto; //để chia thành 4 cột
grid-gap: 50px; // để thêm khoảng cách giữa các item

Bạn có thể tham khảo cách người ta sử dụng grid ở đây

Share
Avatar VozerSayHi @vozersayhi
Jan 16th, 6:50 a.m.

Như này nó có đúng theo chuẩn 12 column không a nhỉ

0
| Reply
Share
Avatar Quan Troy @minhquan-sun
Jan 16th, 7:26 a.m.

@vozersayhi bạn muốn bao nhiều cột thì thêm từng đấy chữ auto trong thuộc tính grid-template-columns thôi nhé image.png
Còn muốn width các cột bằng nhau, dù text dài hay ngắn thì thêm set thêm thuộc tính width cho item nhé

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.