是否可以在不同列的 CSS 网格的内部间隙中绘制垂直分隔符?

2023-12-09

我想要一个由可变长度元素组成的响应式网格。网格应填充包含元素的可用宽度,列数根据容器的宽度而变化。使用 CSS 网格可以直接实现这一点;但是,我不知道如何在列之间添加垂直边框(即仅在内部列间隙中)。下面的简单演示成功地在三列的情况下实现了垂直边框:

https://codepen.io/yowzadave/pen/OYPvLd?editors=1100

html, body {
  box-sizing: border-box
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  grid-column-gap: 0.5rem;
}

.item {
  border-right: 1px solid black;
  padding-right: 0.5rem;
}

.item:nth-child(3n) {
  border-right: none;
  padding-right: 0;
}

.box {
  background-color: pink;
  height: 2rem;
  margin: 0.5rem;
}
<html>
  <body>
    <div class="container">
      <div class="item"><div class="box"></div></div>
      <div class="item"><div class="box"></div></div>
      <div class="item"><div class="box"></div></div>
      <div class="item"><div class="box"></div></div>
      <div class="item"><div class="box"></div></div>
      <div class="item"><div class="box"></div></div>
    </div>
  </body>
</html>

...但是如果浏览器更宽或更窄,边框就会错位。有没有办法在所有浏览器宽度下正确放置边框?


您可以在所有网格项上使用伪元素,其中您将简单地重叠并确保覆盖所有间隙:

html,
body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-column-gap: 0.5rem;
  overflow:hidden; /* Hide the overflow */
  position:relative;
}

.item {
  box-sizing: border-box;
  position:relative;
}

.item:before {
  content:"";
  position:absolute;
  top:0;
  right:-0.25rem; /* Half the gap */
  height:100vh; /* Big height*/
  width:1px;
  background:#000;
}

.box {
  background-color: pink;
  height: 2rem;
  margin: 0.5rem;
}
<div class="container">
  <div class="item">
    <div class="box"></div>
  </div>
  <div class="item">
    <div class="box"></div>
  </div>
  <div class="item">
    <div class="box"></div>
  </div>
  <div class="item">
    <div class="box"></div>
  </div>
  <div class="item">
    <div class="box"></div>
  </div>
  <div class="item">
    <div class="box"></div>
  </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以在不同列的 CSS 网格的内部间隙中绘制垂直分隔符? 的相关文章

  • CSS 样式的段落,带有段落编号和旁注

    我想在网上发布一段带有段落编号和旁注的文本 我正在使用 哈克贝利 费恩历险记 作为测试 参见http jsfiddle net 29Mdt http jsfiddle net 29Mdt 我希望将段落编号放在左侧边距中 将旁注放在右侧边距中
  • 如何在鼠标悬停时覆盖 div / box?

    我有一个链接 当用户将鼠标悬停在其上时 它应该在链接下显示一个框 div 盒子应该覆盖其下方的所有内容 我如何使用 css 或 javascript 来做到这一点 您有一个隐藏的绝对定位的 div 和链接的子级 然后 当您将鼠标悬停在链接上
  • 使文本“bbb”位于图标旁边,而不是压在一起

    Goal 使字母 bbb 可见 并且文本应位于图标旁边 Problem 我尝试将文本移到右侧 但不起作用 你们知道该怎么做吗 JSfiddle https jsfiddle net 5f7qjLgf 1 Thanks result filt
  • Safari 10.0.1 未从 srcset 选择正确的图像

    Safari 无法正确处理我网站上某些图像的 srcset 并且完全忽略我在尺寸属性中设置的规则 如果您单击下面的链接并在 Safari 中查看它 您将看到顶部的图像以其原始尺寸显示 而不是我生成的尺寸 但是 在页面底部它有效吗 并已下载为
  • ABSMIDDLE 在 Firefox 和 Chrome 上的工作方式不同吗?

    我有一个图标图像和文本 如下所示 一切的代码来源是 img src align left My Title Here 问题在于 与 Firefox 相比 Chrome 中的图标没有与标题垂直对齐 我觉得absmiddle根本不起作用 有什么
  • 根据分辨率更改字体大小

    我正在开发一个网页 它的不同段落 h 等使用不同的尺寸 我在用着em sizes 字体大小 2em 举个例子 但是 当我将屏幕分辨率更改为较低的分辨率时 我希望该尺寸也较小 为此 我尝试了以下代码
  • 在 css / html 中创建六边形

    我试图在 css html 中制作几个六边形 类似于这样 http www asta uk com sites all themes asta logo png http www asta uk com sites all themes a
  • 使用 javascript 设置最大高度

    我有一个 div 这个 div 的最大宽度是用户定义的 我知道我可以使用 element style height 完成它 但这在 IE 中不起作用 关于如何使用 javascript 实现 Firefox 的最大高度等效项有什么想法吗 通
  • 背景 CSS 图像仅在 IE7 中不显示

    html 是 div class choose os p a href someLink class windows Microsoft Windows a a href someOtherLink class macos Apple Ma
  • HTML5旋转动画——如何显示“硬币的另一面”?

    考虑到这个 JSFiddle 旋转示例 https jsfiddle net 194288aw HTML div class container div class coin div class face heads Hey div div
  • 水平离子涡旋不工作

    在我正在制作的项目中 我使用了离子滚动两次并且工作完美 垂直模式 但现在我尝试进行水平滚动并且不起作用 滚动出现但我无法滚动任何内容 HTML 代码很简单
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • iPhone 上的 Chrome 溢出空白页面上的内容(仅在新选项卡上,而不是重新加载)

    在 iOS Chrome 上 正文会在没有内容的新选项卡或页面上溢出 但如果重新加载页面 问题就会得到解决 它会给位于底部的任何元素 绝对或固定 带来问题 这是重现问题的代码
  • stripe checkout css内容策略错误

    我正在尝试创建一种形式条纹结账 https stripe com docs checkout在我的 Ionic 应用程序中 我创建了一个指令 将表单植入到我的内容视图中 但是当我运行它时 CSS 因违反内容策略而失败 checkout js
  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

随机推荐

  • 终止/暂停时位置 API 发生重大变化的行为?

    这是来自CL位置管理器描述应用程序行为的文档开始监控重大位置变化 如果您启动此服务并且您的 随后申请 系统自动终止 重新启动应用程序到 如果有新事件到来 则背景 在 在这种情况下 选项字典 传递给 应用程序 didFinishLaunchi
  • 我想检测 winforms 列表框控件中双击的项目。 [如何处理点击空白区域?]

    好吧 我有一个列表框 里面有一些项目 我想检测对某个项目的双击 目前我使用的方法有一个问题 如果用户双击空白处 当前选定的项目将被标记为双击 Update 请注意 这个问题并不像乍看起来那么简单 另请注意 Timwi 答案不正确 因为如果选
  • 使用按位移位反转数字

    我正在尝试找到一种方法来反转数字without 将其转换为字符串以求长度 反转字符串并解析回来 运行单独的循环来计算长度 我目前正在这样做 public static int getReverse int num int revnum 0
  • 为什么 longLongValue 返回错误的值

    我有一个 NSDictionary 其中包含一个值为 4937446359977427944 的键 我尝试将其值获取为 long long 并返回 4937446359977427968 NSLog value1 dict objectFo
  • Angular xlsx - 多个 json 到工作表

    我使用 js xlsx 和函数 utils json to sheet 导出到 Excel 问题是我有另一个 json 对象 我想将其导出到同一张表 位于前一个表的正下方 XLSX utils json to sheet outputDat
  • 为什么 Html5 音频在文件加载时从服务器加载所有歌曲

    我的本地 Web 应用程序 使用 java Spark 框架 创建了一个 Html5 报告 其中一些页面包含可以播放的音频文件 最初这纯粹是通过 Html 完成的 例如
  • Java:在 Ubuntu 上请求 root 权限

    如何调用身份验证窗口 从类中为当前应用程序授予 root 一段时间的访问权限 例如 我正在编写一些应用程序来处理分区 因此它需要 root 权限才能执行某些操作 也许你无法用 Java 做到这一点 最好的方法是 也许你可以检测到该程序没有运
  • 每天在特定时间运行 DAG

    我读过多个例子schedule interval start dateAirflow 文档也多次出现 但我仍然无法理解 我如何在每天的特定时间执行我的 DAG 例如 现在是 9 30 上午 我部署 DAG 并且希望它在 10 30 执行 我
  • 在使用 std::array 的类的构造函数中初始化 std::array 的大小

    是否可以使用std array
  • 致命错误:调用未定义的函数 ftp_ssl_connect()

    我正在尝试在 PHP 中设置 FTP SSL 连接 我用过ftp connect 很好 效果很好 一旦我尝试使用ftp ssl connect 我收到此错误 致命错误 调用未定义的函数 ftp ssl connect 我确实在 PHP 扩展
  • 具有动态列的 LINQ Pivot

    我正在尝试使用带有动态列的 LINQ 创建数据透视表 我在 SQL Server 中创建了一个数据透视表 您不知道将使用哪些列 但不知道如何将其转移到 LINQ 中 有人有链接供我开始使用吗 Cheers List
  • 使用 python 提取 pdf 表格中包含的文本的最佳方法是什么?

    我正在构建一个程序 从 pdf 中提取文本 将其放入结构化格式 然后将其发送到数据库 我有大约 1 400 个单独的 pdf 文件 它们都遵循类似的格式 但文档总结的措辞和计划设计中的细微差别使其变得棘手 我在 python 中尝试过几个不
  • 我什么时候应该关闭DatabaseHelper?

    参考this链接 如果只有一个连接 什么时候是关闭连接的好时机 我有一项服务始终在后台运行 什么时候是打电话的好时机close 功能 有什么建议么 你实际上不必打电话close 例如 如果您实现内容提供商 则没有机会调用close 我们被告
  • 禁用表单提交,直到选中(两个)复选框

    我们有一个表单 在提交表单之前 我们有两个复选框 privacy 条款和条件 我想做的是 在验证复选框时遇到问题 禁用提交按钮 直到选中两个复选框为止 这些的 html 是
  • NumPy for windows python 2.7 [关闭]

    很难说出这里问的是什么 这个问题模棱两可 含糊不清 不完整 过于宽泛或言辞激烈 无法以目前的形式合理回答 如需帮助澄清此问题以便重新打开 访问帮助中心 我找不到适用于 windows python 2 7 的 NumPy 尽管我找到了它的
  • 将区域设置设置为系统默认 UTF-8

    当在 rApache 中运行 R 时 语言环境是从 Apache Web 服务器继承的 因此Sys getlocale 总是等于 C 我希望使用我的网络应用程序UTF8 所以我使用 Sys setlocale LC ALL en US UT
  • do 块中的返回类型

    我试图理解 Haskell 中的 Monad 在我无数次的代码实验中我遇到了这个事情 f2 do return da 事实上 它不想在编译时出现关于类型的巨大错误 我认为唯一重要的部分是 No instance for Monad m0 a
  • 如何通过将列的类别分成集合来过滤数据框?

    我有一个数据框 Prop ID Unit ID Prop Usage Unit Usage 1 1 RESIDENTIAL RESIDENTIAL 1 2 RESIDENTIAL COMMERCIAL 1 3 RESIDENTIAL IND
  • 我可以在对象原型(方法)中定义属性吗?

    问题第 1 部分 我创建了一个包含属性的对象构造函数 但我想知道是否可以在其中一个方法中定义该对象的另一个属性 例如 var Player function p1 this property1 p1 this property2 0 那么
  • 是否可以在不同列的 CSS 网格的内部间隙中绘制垂直分隔符?

    我想要一个由可变长度元素组成的响应式网格 网格应填充包含元素的可用宽度 列数根据容器的宽度而变化 使用 CSS 网格可以直接实现这一点 但是 我不知道如何在列之间添加垂直边框 即仅在内部列间隙中 下面的简单演示成功地在三列的情况下实现了垂直