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;

}

1111111
222
3333333333
4444
555555555
99999999999

答案 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;

}

1111111
222
3333333333
4444
555555555
6666666
77777
888888888
99




本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/559728.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器系统日志6008,DELL服务器宕机事件6008

在DELL服务器上安装了windows server 2008 r2 64位标准版,客户在该操作系统上安装了自己开发的视频监控软件。服务器在运行一段时间后,会出现如下情况:(事件ID6008)1。机器硬件没有报错,但是无法Ping通,不能登录远程桌…

java 获取内存大小_JVM面试题扩展:Java代码在JVM中的执行流程

代码示例:public class Test { // 常量 public static final String MAN_SEX_TYPE "man"; // 静态变量 public static String WOMAN_SEX_TYPE "woman"; public static void main(String[] args) { People people …

centos mysql无法启动 sock_linux 下mysql无法启动 mysql.sock

在公司装的一键安装的lnmp环境,启动mysql时候发现mysql.sock不存在,然后我进行查找 最后在 /usr/local/mysql/bin/mysql_safe 重新启动下然后启动service mysql start查看 service mysql status网上各种说法,其实还是自己的安装目录找到&a…

sql服务器 查看日志文件,怎么查看 SQL Server 2005 安装日志文件

Microsoft SQL Server 2005 安装主日志位于%ProgramFiles%\Microsoft SQL Server\90\Setup Bootstrap\LOG\Summary.txt此文件包含如下内容:--------------------------------------------------------------------------------Machine : MYSERVERProduct : Microsof…

idea数据库反向生成实体类_asp.net core 系列 21 EF现有数据库进行反向工程

一.概述在上篇中使用EF基于数据模型创建数据库, 本篇继续使用 EF 基于数据库创建数据模型。 实现对已有数据库进行反向工程,来构建数据访问的 ASP.NET Core MVC 应用程序。已有数据库使用上篇的EFGetStarted.AspNetCore.NewDb库。这里还是使用Visual Stu…

无线网络虚拟服务器,无线虚拟局域网

无线虚拟局域网是指在无线局域网的基础上,采用网络管理软件构建的可跨越不同网段、不同网络的端到端的逻辑网络。无线局域网就是一种无线数据网络,它是以无线方式构建的局域网WLAN,或者说,不用线缆将设备相连的局域网络。无线虚拟…

名爵如何解除限速_价格不高却乐趣十足,全新一代名爵6有多大惊喜

紧凑型轿车市场一直是各大车企的兵家必争,激烈的市场竞争也促成了很多紧凑型级别的细分市场,而紧凑型运动轿车则一直是消费者最为关注的一类产品。全新一代名爵6究竟有着什么表现,它能否在激烈竞争中取胜,运动调校上又有何等功底&…

管理服务器文件绿色版本,Services.msc服务器文件官方版

Services.msc是一款能够让我们对Windows系统服务策略进行快速管理和处理的工具,主要用于是适应于启动、终止并设置Windows服务的管理策略,该文件使用也是比较简单,软件简单又实用,让我们对相关进行快速管理,有需要的朋…

vue watch 修改滚动条_Vue 里的 computed 和 watch 的区别

computed computed 是计算属性,它会根据你所依赖的数据动态显示新的计算结果计算属性将被加入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例通过计算出来的属性不需要调用直接可以在 DOM 里使用基础例子var vm new Vue({el: #app,dat…

e2140服务器性能,4000 还是E2140?两大人气CPU对决

4000 还是E2140?两大人气CPU对决互联网 发布时间:2009-04-21 01:31:37 作者:佚名 我要评论今夏攒机,双核处理器无疑是网友们的第一选择。由于Intel和AMD的大力推广,双核处理器的价格目前已经跌到了一个大众消费…

12306能删候补订单记录_「实用」官方“捡漏”神器来了!12306铁路候补购票服务正式上线!...

准备购买火车票的小伙伴注意啦!中国铁路总公司说,5月22日起,铁路12306网站(含手机客户端)在前期试点的基础上,将铁路候补购票服务扩大到所有旅客列车。候补购票如何操作?怎么提交订单?如何添加“车次席别”…

cad指示箭头快捷键命令_cad中箭头怎么画_cad箭头画法命令 - 学无忧

在cad制图中,我们经常会对图形进标注和注明,这里就需要一些箭头进行指向和声明。而在cad中插入箭头的方法并不是那么简单,不是直接插入就可以的。这里就给大家讲解在cad中插入各种箭头的方法,cad箭头各种画法如下:一、…

联想平板刷机机器人_消费终端年出货量破1.2亿,杨元庆:联想是智能化转型的赋能者...

“科技是我们‘在危机中育先机、于变局中开新局’可以依赖的力量。联想一直在用实际行动为推动‘智慧经济’的增长,为构建“双循环”的新发展格局做贡献。”文丨《中国企业家》记者 刘哲铭编辑丨李薇图片来源丨中企图库一座青砖黑瓦的古城里,绿水萦回&am…

查询已有链表的hashmap_面试官再问你 HashMap 底层原理,就把这篇文章甩给他看...

前言HashMap 源码和底层原理在现在面试中是必问的。因此,我们非常有必要搞清楚它的底层实现和思想,才能在面试中对答如流,跟面试官大战三百回合。文章较长,介绍了很多原理性的问题,希望对你有所帮助~目录本篇文章主要包…

js 获取url问号前_收下这波 JS 技巧,从此少加班

各种业务开发都离不开对数据的处理,然而遇到的很多数据都是不好处理的。这个时候就需要寻求搜索引擎的帮助。这种方法效率是非常低下的,而且根据作者的个性不能保证其对自己的口味。因此这篇文字包含了一份JS 常用业务函数手册,例如时间格式的…

底层实现_Java AOP的底层实现原理

AOP用于处理系统中分布于各个模块的横切关注点,比如事务管理、日志、缓存等。AOP实现的关键,在于AOP框架自动创建的AOP代理,AOP代理主要分为静态代理和动态代理,静态代理的代表为AspectJ;而动态代理则以Spring AOP为代…

lpv4的地址格式由多少个字节组成_我们为什么有这么多字符编码格式?

相信不少同学都在初学计算机之时,都被ASCII,Unicode和UFT-8等字符编码格式 搞得焦头烂额,这玩意儿到底是啥,区别是啥,为啥有这么多?反正我刚学的时候纯粹是囫囵吞枣,为了考试潦草背一背&#xf…

git配置用户信息_git系列教程(4)-单用户配置

一般新手都会使用一个用户,要么是github,要么是gitee本地配置上个文档已经讲过本地配置,在这里就不赘述了连接github或者gitee生成ssh公钥ssh-keygen -t rsa -C "emailexample.com" 三次会车即可生成ssh key找id_rsa.pub文件mac或…

32 引脚_函数功能:定时器T0的中断服务子程序,使P3.7引脚输出音频方波

void Time0_serve(void ) interrupt 1 using 1 {TH0(8192-C)/32; //可证明这是13位计数器TH0高8位的赋初值方法TL0(8192-C)%32; //可证明这是13位计数器TL0低5位的赋初值方法sound!sound; //将P3.7引脚取反,输出音频方波}/************************…

matlab 功率谱密度 汉宁窗_信号系统的一些基本概念

泄露截断会使谱分析精度受到影响。如果时域信号是周期性的,而截断又按整周期取数,信号截断不会产生问题,因为每周期信号都能代表整个周期信号变化情况。若不是整周期截取数据,则截断将使信号波形两端产生突变,所截取的…