css grid布局增加边框,CSS Grid中每行之后的边框
3 个答案:
答案 0 :(得分:5)
您可以使用justify-content在内容之前和之后添加其他列,而不是1fr将内容置于中心位置。
然后将div之后的div和.line置于第二列的开头。
* {
box-sizing: border-box;
}
.outer {
width: 80%;
margin: 0 auto;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
display: grid;
grid-template-columns: 1fr repeat(3, auto) 1fr;
}
.wrapper>div:not(.line) {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper > div:first-of-type,
.line + div {
grid-column: 2;
}
.line {
grid-column: 1 / -1;
height: 1px;
background: black;
}
答案 1 :(得分:1)
这是一个响应式解决方案,它可以处理variable个项目,并且无需添加愚蠢的硬编码div。基本上每个项目下面都有一行,复杂的部分是确定最后一行中不能有一行的项目。该示例使用flex-box(和LESS),但是此处不相关,它也适用于grid。
.grid {
display: flex;
}
.grid-item{
position: relative;
.one-col{
flex-basis: 100%/1;
&:nth-last-child(1){
&:after{ border-bottom: 0; }
}
}
.two-cols{
flex-basis: 100%/2;
&:nth-last-child(1),
&:nth-last-child(2):nth-child(odd){
&:after{ border-bottom: 0; }
}
}
.three-cols{
flex-basis: 100%/3;
&:nth-last-child(1),
&:nth-last-child(2):nth-child(3n+1),
&:nth-last-child(2):nth-child(3n+2),
&:nth-last-child(3):nth-child(3n+1){
&:after{ border-bottom: 0; }
}
}
.four-cols{
flex-basis: 100%/4;
&:nth-last-child(1),
&:nth-last-child(2):nth-child(4n+1),
&:nth-last-child(2):nth-child(4n+2),
&:nth-last-child(2):nth-child(4n+3),
&:nth-last-child(3):nth-child(4n+1),
&:nth-last-child(3):nth-child(4n+2),
&:nth-last-child(4):nth-child(4n+1){
&:after{ border-bottom: 0; }
}
}
@media screen and (max-width: @screen__sm) {
.grid-item .one-col;
}
@media screen and (min-width: @screen__sm) and (max-width: (@screen__md - 1)) {
.grid-item .two-cols;
}
@media screen and (min-width: @screen__md) and (max-width: (@screen__lg - 1)) {
.grid-item .three-cols;
}
@media screen and (min-width: @screen__lg) {
.grid-item .four-cols;
}
&:after{
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: solid 1px black;
}
答案 2 :(得分:1)
我使用nth-of-type并将该行切换为其他类型()取得了一些成功。
我还为行跨越添加了第一和第六列,
而其他项只占据第2-5列。


* {
box-sizing: border-box;
}
.outer {
width: 80%;
margin: 0 auto;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
display: grid;
grid-template-columns: 1fr repeat(3, auto) 1fr;
justify-content: center;
}
.wrapper>div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper>div:nth-of-type(3n+1) {
grid-column: 2;
}
.line {
grid-column: 1/6;
height: 2px;
border-bottom: 1px solid black;
}



css grid布局增加边框,CSS Grid中每行之后的边框相关推荐
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就 ...
- grid布局浏览器兼容_CSS Grid 网格布局教程
一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
- css flex布局 模型(CSS justify-content 属性) - 代码案例
css flex布局 模型(CSS justify-content 属性) - 代码案例 效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
- grid布局浏览器兼容_CSS Grid布局尝试
先看思维导图 起步 首先搭好基本的结构 <div id="container"><div class="item item-1">1&l ...
- CSS圣杯布局常用吗,CSS 经典三列布局之圣杯布局
圣杯布局 圣杯布局是典型的 CSS 布局问题,有着众多的解决方案. 圣杯布局是一种非常经典和常用的布局方式,其所指的是三列布局,中间宽度自适应,两边定宽:或者两列布局,主体宽度自适应,左边或右边定宽. ...
- grid布局浏览器兼容_selnium Grid 兼容分布式多浏览器
一.环境的搭建请参考博文http://blog.csdn.net/qq_32782059/article/details/72875225 二.本代码的运行环境配置如下: 1.selenium-ser ...
- css 左右布局高度自适应,CSS布局-高度自适应
前面一篇讲述了有关高度自适应的问题,现在来讨论下用CSS2来实现高度自适应的方式. 单个自适应 当且只有个一个div的高度需要自适应时,我们可以使用以下方法,*{padding:0;margin:0; ...
- css页面布局的感想,css布局实践感想(示例代码)
自己的一些'想法',想要记录下来.在实际写的时候经常会"随心所欲",希望这个笔记能让自己更"规范". 我的业务主要是围绕webApp和微信端,思想上靠近移动端布 ...
- div css经典布局实例,div+css布局实例:常用图文混排(一)--腾讯图文 - 蜗爱CSS
Example Source Code body{ /*公共样式*/ margin:0; padding:0 0 12px 0; font-size:12px; ...
最新文章
- 「谷歌大脑」提出通过对长序列进行摘要提取,AI可自动生成「维基百科」
- Intellij IDEA中生成jar包
- zookeeper学习总结
- yolo loss 将图像标注的真实事坐标转换到anchor坐标
- linux c 定时器
- leetcode 算法解析(一):260. Single Number III(C++版本和自己的注解)
- 2019.01.26【NOIP普及组】模拟赛C组总结
- SFTP连接服务器后,PWD显示的目录、是用户的home目录
- 贺利坚老师汇编课程39笔记:用于内存寻址的寄存器同时引入BP
- 教你webm格式怎么转换成mp4
- MySQL字符串拼接(函数)
- 房地产项目动态计划管理系统
- 【指南 】北理珠第十届C语言程序设计挑战杯
- 当今流行的HTML5技术门户网站——HTML5星空
- Win10以太网网络电缆被拔出,没有WLAN选项
- Idea21.1.3版本中Scala默认设置带类型
- BeautifulSoup安装
- 【笔记】unity渲染类名词术语概念总结(30个点)
- Linux之C++毫秒级计时方法
- Skype 不能开启
热门文章
- .NET 4.0 调用 C dll 触发 AccessViolationException 异常的处理方案
- mysql中int、bigint、smallint 和 tinyint的区别与长度
- eclipse搭建maven开发环境
- Vue + SpringBoot跨域
- 初探EntityFramework——空EF设计器模型
- 执行后可以查看python的版本的是_windows肿么查看python opencv 版本
- enum mysql byte_九、臭名昭著的 MySQL ENUM 类型 ( 上 )
- mysql数据库时间字段看不懂_mysql数据库时间字段看不懂
- python金融大数据分析视频_Python金融大数据分析 PDF 全书超清版
- php生日验证,PHP验证生日