使用display:grid轻松实现卡片布局-优快云博客

本文链接：https://blog.youkuaiyun.com/madongdong2000/article/details/126896841

本文介绍了CSS中的grid布局，强调其在自适应布局中的优势。通过实例展示了仅用三行代码如何利用grid创建卡片布局，包括关键属性如fr和repeat的使用，以及如何设置子元素的间隔。掌握这些基本属性，可以方便地搭建各种样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一种新的自适应布局方式 display:drid

说起布局grid我相信重要程度比起flex不遑多让啊。除了兼容性方面，其余的方面都是很完美的。但是我相信随着技术的不断更替，兼容性已经不再是问题。那今天进让我们来看看grid到底能够干啥吧

达成这种卡片布局的效果，使用grid布局只要三行代码就能搞定
上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 80%;
            height: 100px;
            margin: 50px auto;
            display: grid;
            grid-template-columns: repeat(5,1fr);
            grid-column-gap: 80px;
        }
        .box div{
            border-radius: 4px;
            box-shadow: 2px  2px 5px #ccc;
            background: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果图（复制代码可查看）

而实现这种效果只需要三行主要代码

display: grid;
grid-template-columns: repeat(5,1fr);
grid-column-gap: 80px;

grid 主要属性：

属性	作用	参数
grid-template-columns	给grid元素内的子元素设置每行的限制和样式	像素 / fr / repeat
grid-template-rows	给grid元素内的子元素设置每列的限制和样式	像素 / fr / repeat
grid-row-gap	给grid元素内的子元素设置行间距	像素 / 百分比
grid-column-gap	给grid元素内的子元素设置列间距	像素 / 百分比
grid-gap	grid-column-gap和grid-row-gap的合并简写形式	grid-gap: grid-row-gap grid-column-gap
justify-items	子元素单元格内容的水平位置	start（左） / end（右） / center（中） / stretch（拉伸）
align-items	子元素单元格内容的垂直位置	start（上） / end（下） / center（中） / stretch（拉伸）
place-items	align-items属性和justify-items属性的合并简写形式	place-items: align-items justify-items