grid - gap

grid-gap默认还有两个参数

如果grid写默认方式，则行、列都会使用相同的单位

如果grid写两个参数，则行和列各自生效

如果grid写行方式，则仅有行生效

如果grid写列方式，则仅有列生效

 1 page {
 2   color: #fff;
 3 }
 4
 5 .grid {
 6   padding:1%;
 7   line-height: 50px;
 8   display: grid;
 9   grid-gap: 1px;
10   grid-row-gap: 12px;
11   grid-column-gap: 3px;
12 }
13
14 .grid-row {
15   text-align: center;
16   background-color: #d94a6a;
17 }

在grid布局中，grid-gap基本上算替换了margin(外边距) , 如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值

转载于:https://www.cnblogs.com/cisum/p/10671009.html

grid - gap相关推荐

css grid 自动高度_2020年你不应该错过的CSS新特性（二）
茫茫人海中与你相遇相信未来的你不会很差作者:阿里巴巴淘系技术来源:https://juejin.im/post/6886258269137043464 Web排版先看布局上将会有的一些新特性: ...
CSS基本布局——grid布局
grid布局简介: Grid布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局. 基本概念: 容 ...
css grid 自动高度_10分钟理解CSS3 Grid布局
基本介绍上一篇文章我们介绍了css3 flexbox,今天我们再来说说css3的另外一个强大的功能:Grid. Grid做前端的同学应该都很熟悉了,翻译成中文为"栅格",用过bo ...
grid布局之容器属性justify-content与align-content
简介用来设置整个区域的摆放位置 justify-content: start | end | center | stretch | space-around | space-between | sp ...
快速上手 Grid 网格布局
Grid布局是什么 Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小.位置.层次等关系.号称是最强大的的 CSS 布局方案,是目前唯 ...
设置最小值与最大值 css,一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景...
作者:Ahmad shaded 译者:前端小智来源:sitepoint点赞再看,微信搜索[大迁世界]关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://github. ...
css 网格布局_CSS网格布局
css 网格布局网格布局 (Grid Layout) CSS Grid Layout, simply known as Grid, is a layout scheme that is the ne ...
css网格_CSS网格初学者指南
css网格 by Kara Luton 卡拉·卢顿(Kara Luton) CSS网格初学者指南 (A Beginner's Guide to CSS Grid) I first heard abou ...
CSS样式－网页响应式设计
响应式设计-网页CSS样式知识百分比布局弹性布局网格布局最大最小宽度视图窗口多媒体查询最大最小宽度竖屏横屏尺寸比容器属性容器查询单位伪类has 百分比布局简单的讲就是将元素按 ...

grid - gap

grid - gap相关推荐

最新文章

热门文章