2024/08/17 oxxo 无标签

使用CSS的Grid实现自适应

grid-template-columns中使用repeat属性值来实现重复绘制元素,
repeat中指定auto-fit意为根据父容器的宽度填充元素,
minmax意为通常按照1fr大小绘制元素,但是该元素的最小值为200px。


body {
    margin: 0;
}
.grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    .item {
        border-radius: 10px;
        background: #edf;
        padding: 15px;
        text-align: center;
        img {
            max-width: 100%;
            height: auto;
        }

p { text-align: left; } } }

Sass (SCSS)

oxxo

相关文章