是否可以在不同列的 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 中实现 50/50 背景且无重叠

    我尝试创建一个带有两个背景图像的 div 一个在上半部分 一个在底部 如下所示 在此处输入图像描述 https i stack imgur com IPm8L png https i stack imgur com ezu9z png 然而
  • 是否可以将CSS应用于半个字符?

    我在寻找什么 一种打造风格的方法HALF一个角色的 在这种情况下 一半的字母是透明的 我目前搜索和尝试过的内容 没有运气 设置半个字符 字母样式的方法 使用 CSS 或 JavaScript 设置字符的一部分样式 将 CSS 应用于字符的
  • stripe checkout css内容策略错误

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

    我有这个代码 span p margin 0 span background color red display inline block border radius 50 span p 25 p p 08 p span 我想在我的跨度上画
  • IE8 忽略 td 宽度,适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • 理解 z-index:该元素如何出现在其父级同级元素的前面?

    为什么当我删除时红色 div 位于绿色 div 前面z index from wrapperRed 感觉像z index是沿着链条向上继承的 如果我改变z index将绿色 div 更改为 6 即使删除第一句中描述的行后 它仍保留在红色 d
  • 在 Android 上禁用标注(上下文菜单)

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐

  • 终止/暂停时位置 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 网格可以直接实现这一点 但是 我不知道如何在列之间添加垂直边框 即仅在内部列间隙中 下面的简单演示成功地在三列的情况下实现了垂直