分享web开发知识

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

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

关于CSS Grid Layout的代码解释

发布时间:2023-09-06 02:16责任编辑:熊小新关键词:CSS
.wrapper { ?display: grid; ?/*生成grid类型块级网格*/ ?grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1fr,成三列网格,fr可以自动根据网格容器的宽度来计算列的宽度*/ ?grid-gap: 10px; /*单元格之间有10px的间距*/ ?grid-auto-rows: minmax(100px, auto); /*设置隐式的行网格线,单元格宽度保持在最小100px,最大auto(即max-content最理想大小的值)之间*/}.one { ?grid-column: 1 / 3;/*规定网格中每列的宽度,第一个数字为列的起始网格线的位置,第二个是线束网格线的位置*/ ?grid-row: 1; /*规定网格中每行的高度若为数字则表示x个单位*/}.two { ??grid-column: 2 / 4; ?grid-row: 1 / 3;}.three { ?grid-column: 1; ?grid-row: 2 / 5;}.four { ?grid-column: 3; ?grid-row: 3;}.five { ?grid-column: 2; ?grid-row: 4;}.six { ?grid-column: 3; ?grid-row: 4;}

关于CSS Grid Layout的代码解释

原文地址:https://www.cnblogs.com/5H5H/p/9712508.html

知识推荐

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