CSS3 grid layout（网格布局）（四）

最新推荐文章于 2025-02-28 12:51:03 发布

Violet丶Evergarden

最新推荐文章于 2025-02-28 12:51:03 发布

阅读量455

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/Vollerei/article/details/103896448

版权

让我们接着来看网格布局

有关 fr 单位的补充：

我的上一篇关于网格布局的博客中介绍了一个新的单位 fr 的特性，使用方法，以及与网格轨道搭配所产生的页面效果，现做如下补充：

与其他长度单位混合所产生的页面效果

下面先放上例子

代码如下：

<style>
    .wrapper {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 200px; /* 定义一个宽为1fr的列轨道和一个宽为200px的列轨道 */
    }
    
    .div1 {
        background-color: royalblue;
    }
    
    .div2 {
        background-color: violet;
    }
</style>

<body>
    <div class="wrapper">
        <div class="div1">one</div>
        <div class="div2">two</div>
    </div>
</body>

效果如图：
在这里插入图片描述
我们可以看到，页面上展示了一个 右侧元素定宽，左侧元素宽度自适应 的布局。也