卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › CSS之GAP属性

CSS之GAP属性

坚果大叔
2022-05-25 19:28:05技术阅读 1,478

Gap属性

gap 属性是用来设置网格行与列之间的间隙,该属性是row-gap and column-gap的简写形式

属性值

1、row-gap

设置网格布局中行之间的间隙大小

2、column-gap

设置网格布局中列之间的间隙大小

语法

gap: row-gap column-gap;

应用场景

在我们设置网格之间的间距的时候,一般用margin 或者 padding来设置元素之间的间距,但是我们在最后的时候可能不需要间距,那就需要单独为他设置一个为0的值来抵消。

实际代码

HTML

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>  
  <div>8</div>  
</div>

CSS

<style> 
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 50px;
  border: 1px solid red;
}
.grid-container > div {
  border: 1px solid black;
  background-color: green;
  text-align: center;
  padding: 10px;
  color: #fff;
}
</style>

实际效果

CSS之GAP属性-卖坚果的怪叔叔

兼容性

CSS之GAP属性-卖坚果的怪叔叔

gap
赞赏 赞(4)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
滴滴滴
上一篇
element-ui中的Select选择器中remote-method方法带自定义参数
下一篇

评论已关闭

今日天气
标签
CSS (16) Filter (2) Flex (2) Git (3) html (3) JavaScript (15) Jquery (2) JS (4) linux (2) localstorage (2) mac (1) map (2) mongoDB (1) python (3) set (2) vite (2) vue (9) websocket (1) wordpress (2) 二维码 (1) 傍晚 (2) 刷新页面 (1) 字符串 (5) 对象 (3) 小程序 (6) 年终 (1) 微信 (9) 微信机器人 (5) 总结 (1) 数据类型 (3) 数组 (5) 日常问题 (4) 服务器 (1) 朝阳 (1) 正则 (3) 生活 (6) 移动端 (2) 空地 (1) 组件 (1) 节流 (1) 记录 (3) 远方 (1) 防抖 (1) 验证码 (1) 高楼 (1)
近期文章
  • 微信小程序批量提交后台审核
  • 新年快乐🎉
  • Home
  • 随便转转!
  • 2022!充满魔幻的一年!
归档
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
  • 2012年12月
  • 2002年11月
微信小程序批量提交后台审核
2023-01-29 17:56:58
114 0 1
Home
2023-01-19 13:49:05
64 0 0
2022!充满魔幻的一年!
2022-12-31 21:09:51
142 0 0
小程序wx.showToast真机不显示?
2022-11-03 17:42:55
508 0 0
4
  • 4
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2023 卖坚果的怪叔叔. Designed by nicetheme.

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
225
文章
59
评论
159
喜欢