Cần giúp về responsive

[da_ha]

em muốn responsive list card như opensea với mọi độ phân giải mản hình với số lượng card phụ thuộc vào độ phân giải
ạ ai có thể giúp em với ạ

[LocNguyenXuan99 (Loc)]

Trang đó đang dùng javascript listen event windows resize, để chỉnh sửa width của item cho phù hợp.
Đó là cách đơn giản nhất mà dev nào cũng có thể nghĩ ra. Nhưng với số lượng lớn, item thì performance là 1 vấn đề.

1 cách khác là chỉ dùng css, tuy nhiên phải hiểu được vấn đề.
yêu cầu:

• Khi độ phân giải là 300, hiển thị 1 hình có width = 300
• Khi độ phân giải là [300 - 600], hiển thị 1 hình có width = 100%
• Khi độ phân giải là [600 - 900], hiển thị 2 hình có width = 50%
• Khi độ phân giải là [900 - 1200], hiển thị 3 hình có width = 33.33%
• Khi độ phân giải là [1200 - 1600], hiển thị 4 hình có width = 25%

Solution:
Sử dụng grid template repeat với min là 300, max là auto fill

<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
        .item {
            width: 100%;
            background-color: red;
            border: 1px solid #fff;
            height: 200px;
        }   
    </style>
</div>