grid网格布局

@.小泽

已于 2022-09-16 21:20:43 修改

阅读量716

点赞数

文章标签： css 前端

于 2022-09-16 20:32:47 首次发布

本文链接：https://blog.csdn.net/madongdong2000/article/details/126896841

版权

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

摘要由CSDN通过智能技术生成

一种新的自适应布局方式 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-co

最低0.47元/天解锁文章

@.小泽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
grid网格布局

在本例中只使用了 grid-template-columns 和 grid-column-gap，定义了一行展示4个子元素，每个子元素长度平均分，间距80px。2.repeat：是一个函数，接受两个参数，第一个参数是重复的次数（本例中是4），第二个参数是所要重复的值，重复某种模式也是可以的。除了兼容性方面，其余的方面都是很完美的。1.fr：将子元素平均分成一样的长度或宽度，比如两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。达成这种卡片布局的效果，使用grid布局只要三行代码就能搞定。
复制链接

扫一扫