grid布局实现响应式效果

月光下的小风铃

于 2019-07-15 17:46:27 发布

阅读量995

点赞数 1

分类专栏：前端杂记

本文链接：https://blog.youkuaiyun.com/sinat_22209293/article/details/95992219

版权

前端杂记专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
        <style>
            .item{
                background: pink;
            }
            .wrapper{
                display: grid;
                grid-gap: 5px;
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                grid-template-rows: repeat(6, 100px);
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
    </body>
</html>

在这里插入图片描述