grid-gap默认还有两个参数
 
如果grid写默认方式,则行、列都会使用相同的单位
如果grid写两个参数,则行和列各自生效
如果grid写行方式,则仅有行生效
如果grid写列方式,则仅有列生效
 
 
 page {
color: #fff;
} .grid {
padding:1%;
line-height: 50px;
display: grid;
grid-gap: 1px;
grid-row-gap: 12px;
grid-column-gap: 3px;
} .grid-row {
text-align: center;
background-color: #d94a6a;
}
 
 
在grid布局中,grid-gap基本上算替换了margin(外边距) , 如果它指定了两个值,那么第一个值是设置grid-row-gap的值,第二个值设置grid-column-gap的值
 

grid - gap的更多相关文章

  1. 显示或隐藏一个Grid

    The Rowset class contains two methods that can be used to show and hide all rows: ShowAllRows() Hide ...

  2. grid栅格布局

    前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较 ...

  3. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  4. CSS Grid基于网格的二维布局系统(详细教程)

    .grid-wrap{ display: inline-flex; padding: 20px; background: #f4f4f4; word-break: initial; } .handle ...

  5. css 中的grid布局基础

    CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...

  6. css之grid layout代码解释

    .wrapper { display: grid; grid-template-columns: repeat(3, 1fr);/*grid-template-columns CSS属性定义了网格列的 ...

  7. CSS: Grid Layout Module

    Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...

  8. HTML布局四剑客-Flex,Grid,Table,Float

    前言 在HTML布局中有很多的选择,同一种表现方式可以使用不同的方法来实现.下面来对四种最常见的布局方式进行阐述和解释,它们分别是Float,Table,Grid和Flex Float 第一位出场的就 ...

  9. 学懂grid布局:这篇就够了(译)

    上周发过一篇关于flex布局的文章,但发完之后我感觉我并没有写很多自己对flex布局的理解,因为原链接的作者的轮子实在是太强了,这里借用知乎大佬牛岱的话来说,当人家已经有足够好的轮子,你就不要试图,甚 ...

随机推荐

  1. NBUT1457

    不知道哪里的oj..做了交不上去.. 也是莫队的模板题 #include<iostream> #include<cstring> #include<cstdio> ...

  2. CSS 滤镜

    声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. CSS样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰.只用html制作的网页, ...

  3. python算法双指针问题:二分查找

    这里要注意的是//向下取整,下次循环时,如果大于查找的数字,start+1. 并且,只能向下取整,如果向上取整. 那么,在比较第一个数时,start = 0 .end = 1.mid = 1.就会进入 ...

  4. Zookeeper笔记(二)Paxos算法与Zookeeper的工作原理

    Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目, 它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管 ...

  5. Linux 关闭网络管理服务

    1 将NetworkManager 服务设置开机不启动 chkconfig NetworkManager off 2将NetwokManager服务关闭 service NetworkManager ...

  6. BZOJ1925 [Sdoi2010]地精部落 动态规划

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1925 题意概括 给出n,n<=4200,问1~n这些数的排列中,有多少满足一下性质: 性质: ...

  7. Java各种对象(PO,BO,VO,DTO,POJO,DAO,Entity,JavaBean,JavaBeans)的区分

    PO:持久对象 (persistent object),po(persistent object)就是在Object/Relation Mapping框架中的Entity,po的每个属性基本上都对应数 ...

  8. POJ1860-Currency Exchange (正权回路)【Bellman-Ford】

    <题目链接> <转载于 >>> > 题目大意: 有多种汇币,汇币之间可以交换,这需要手续费,当你用100A币交换B币时,A到B的汇率是29.75,手续费是0. ...

  9. hdu 1272 小希的迷宫【并查集】

    <题目链接> 小希的迷宫 Problem Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的 ...

  10. HDU 2048 神、上帝以及老天爷 【递推】【错排】

    题目链接 Problem Description HDU 2006'10 ACM contest的颁奖晚会隆重开始了!为了活跃气氛,组织者举行了一个别开生面.奖品丰厚的抽奖活动,这个活动的具体要求是这 ...