分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

关于CSS/Grid ?Layout实例的理解

发布时间:2023-09-06 02:15责任编辑:傅花花关键词:CSS

代码实例来自网络

.wrapper { ?display: grid;<!--创建一个网格容器,所有容器子结点自动成为容器项目--> ?grid-template-columns: repeat(3, 1fr);<!--创建重复的网格轨道,第一个参数定义网格轨道重复的次数为3,每个列宽为1fr--> ?grid-gap: 10px;<!--属性grid-gap是grid-row-gap和grid-column-gap的简写形式。行间隙和列间隙都是10px--> ?grid-auto-rows: minmax(100px, auto);<!--定义了隐式网格的行轨道的大小,最小值为100px,最大值为自动。-->}.one { ?grid-column: 1 / 3;<!--grid-column是grid-column-start和grid-column-end的简写,这里指定了grid-column-start为1/3--> ?grid-row: 1;<!--同上,指定grid-row-start为1-->}.two { ??grid-column: 2 / 4;<!--指定grid-column-start为2/4--> ?grid-row: 1 / 3;<!--指定grid-row-start为1 / 3-->}.three { ?grid-column: 1;<!--指定grid-column-start为1--> ?grid-row: 2 / 5;<!--指定grid-row-start为2 / 5-->}.four { ?grid-column: 3;<!--指定grid-column-start为3--> ?grid-row: 3;<!--指定grid-row-start为3-->}.five { ?grid-column: 2;<!--指定grid-column-start为2--> ?grid-row: 4;<!--指定grid-row-start为4-->}.six { ?grid-column: 3;<!--指定grid-column-start为3--> ?grid-row: 4;<!--指定grid-row-start为4-->}

关于CSS/Grid ?Layout实例的理解

原文地址:https://www.cnblogs.com/Jaehwan/p/9697194.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved