响应式布局之栅格布局（比flex更好的解决卡片响应式布局）

最新推荐文章于 2025-03-17 23:31:18 发布

青茶绿梅*2

最新推荐文章于 2025-03-17 23:31:18 发布

阅读量513

点赞数 4

文章标签： css3

本文链接：https://blog.csdn.net/weixin_73303171/article/details/140566712

版权

需求

我们要解决这样一个问题（实现卡片的响应式布局）如果你没有时间的话可以直接看一级标题解决和效果图。
在这里插入图片描述
对这些卡片进行响应式布局，很自然的想到使用flex布局，并使用flex-wrap属性进行换行。但是这样的布局缺陷是很明显的那就是当右边放不下一个盒子的时候会出现 < 一个盒子宽度的空白

如果你想通过改变主轴的对其方式，也是有不行的，我们这里使用space-between举例
在这里插入图片描述
这样一看还挺好，但是当最后一行的盛放的盒子数量达不到在当前宽度下能盛放的最大盒子数量时又会出现这样的问题

最有一行无法和上面的行对其。但是使用grid布局很轻松就可以实现。

解决问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
        padding: 10px;
        width: 80%;
        margin: auto;
        box-shadow: 1px;
        border: 1px solid;
        /*
        	仅需要下面两个代码即可实现
        */
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax( 200px,1fr));
    }

	 /*
    	注意盒子不要设置宽度否则会失效
    */
    .item {
        height: 100px;
        background-color: bisque;
        margin: 10px;
    }

</style>
<body>
    <div class="container">
        <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>
</body>
</html>