CSS3 grid layout(网格布局)(五)

本文介绍了CSS3 Grid Layout中的隐式网格概念,讲解了如何使用grid-auto-rows和grid-auto-columns属性自定义隐式网格的轨道大小,并探讨了minmax()方法在创建灵活网格轨道中的应用。
摘要由CSDN通过智能技术生成

让我们接着来看网格布局

有关显式网格和隐式网格

在之前例子中,我们使用 grid-template-columnsgrid-template-rows 来构建我们的网格。根据我们对这俩个属性的设置所划分出来的区域就是 显式网格当网格元素的数量多于由我们自己设置的列轨道和行轨道划分出的网格单元数量时,网格容器就会 自动生成 具有 一定宽度或者高度(宽高值通常是根据放置其中的元素的宽高决定的) 的行轨道和列轨道(这些行轨道和列轨道会综合 已经设置好的网格来进行分行或者分列)来容纳这些多出来的网格元素,这些由网格容器自动生成的部分就是隐式网格

下面请看示例:

<style>
	.wrapper {
	            display: grid;
	            grid-template-columns: repeat(2, 1fr);
	            grid-template-rows: 100px 200px;
        }
</style>
<body>
    <div class="wrapper"></div>
</body>

效果如图:
在这里插入图片描述
可以看到,网格容器根据我们设置的

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值