网格布局内的边框答案

【问题标题】：Border inside Grid Layout网格布局内的边框
【发布时间】：2023-03-19 00:33:01
【问题描述】：

我有一个代表井字游戏的 CSS 网格。我只想在网格内放置一个边框。今天，我是这样进行的：

:root {
  --border: 2px dashed #393939;
  --symbol-color: #FF7F5B;
}

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, calc(100%/3));
  grid-template-rows: repeat(3, calc(100%/3));
}

.child {
  display: flex;
  align-items: center;
  align-content: center;
  color: var(--symbol-color);
  font-size: 2.5rem;
}

.child:nth-child(1),
.child:nth-child(2),
.child:nth-child(3) {
  border-bottom: var(--border);
}

.child:nth-child(7),
.child:nth-child(8),
.child:nth-child(9) {
  border-top: var(--border);
}

.child:nth-child(1),
.child:nth-child(4),
.child:nth-child(7) {
  border-right: var(--border);
}

.child:nth-child(3),
.child:nth-child(6),
.child:nth-child(9) {
  border-left: var(--border);
}

<div class="grid">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

结果：

这个解决方案有效，但我觉得它没有吸引力。您有重构此解决方案的想法吗？

【问题讨论】：

给定的 sn-p 不起作用。错过了任何CSS？？
我只是复制/粘贴我的问题中有趣的部分，sn-ps 不起作用，因为它错过了网格容器。我在帖子中复制的 HTML 是 ReactJS 的输出。我的主要问题是找到一个 CSS 分解来以与我的屏幕截图中显示的方式相同的方式放置边框。感谢您对我的帖子感兴趣！
没有align-content flex 容器属性。我猜你的意思是justify-content。

标签： html css css-grid

【解决方案1】：

由于您想要一个风格化的边框（在本例中为虚线），因此您的方法和其他答案中采用的方法似乎很有用。

但是，如果您决定使用简单的实线边框，则可以简化该方法。只需使用网格的背景颜色作为边框颜色，使用grid-gap 属性作为边框宽度。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background-color: black;
  grid-gap: 1px;
  height: 100vh;
}

.child {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF7F5B;
  font-size: 2.5rem;
}

body { margin: 0;}

<div class="grid">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">X</div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">O</div>
  <div class="child"></div>
</div>

【讨论】：

确实，对于这个解决方案，我需要风格化边框但是，我不知道您的简单边框解决方案！下次记下来，谢谢！
我确实更喜欢这种解决方案，并且使用斜条纹背景会给您带来破折号...css-tricks.com/stripes-css

【解决方案2】：

您可以像下面这样更好地使用nth-child 选择器，而不是一个一个地定位。

.child:nth-child(-n+3) {
  border-bottom: var(--border);
}

.child:nth-child(3n+1) {
  border-right: var(--border);
}

.child:nth-child(3n) {
  border-left: var(--border);
}

.child:nth-child(n+7) {
  border-top: var(--border);
}

:root {
  --border: 2px dashed #393939;
  --symbol-color: #FF7F5B;
}

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, calc(100%/3));
  grid-template-rows: repeat(3, calc(100%/3));
}

.child {
  display: flex;
  align-items: center;
  align-content: center;
  color: var(--symbol-color);
  font-size: 2.5rem;
}

.child:nth-child(-n+3) {
  border-bottom: var(--border);
}

.child:nth-child(3n+1) {
  border-right: var(--border);
}

.child:nth-child(3n) {
  border-left: var(--border);
}

.child:nth-child(n+7) {
  border-top: var(--border);
}

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

【讨论】：

【解决方案3】：

您可以考虑这种解决方法。

您可以使用 grid-template-columns 来解决问题。

创建一个包含四个图像的父容器。
设置背景颜色（希望的边框颜色）。
将填充设置为 0
然后按 grid-template-column 排列图像：auto
自动;
然后给它们添加间隙 grid-gap: 10px; （显示背景颜色容器作为网格）。

请参阅下面的代码以供参考

.container {
  width: 200px;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;

  background-color: #000;
  padding: 0;
}
.container > div {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

html

<div class="container">
      <div>Image here</div>
      <div>Image Here</div>
      <div>Image here</div>
      <div>Image here</div>
    </div>

为了帮助您可视化我创建了一个示例代码

http://plnkr.co/edit/gIeumXLt0k3FPVCgGlDd?p=preview

希望对你有帮助

干杯！

【讨论】：

【解决方案4】：

您可以在此处从this answer 减少nth-child 选择器的数量。

body {
  margin: 0;
}

:root {
  --border: 2px dashed #393939;
  --symbol-color: #FF7F5B;
}

.grid {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, calc(100%/3));
  grid-template-rows: repeat(3, calc(100%/3));
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--symbol-color);
  font-size: 2.5rem;
}

.child:not(:nth-child(3n)) {
  border-right: var(--border);
}

.child:not(:nth-last-child(-n + 3)) {
  border-bottom: var(--border);
}

<div class="grid">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">x</div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">o</div>
  <div class="child"></div>
</div>

【讨论】：

【解决方案5】：

尝试在.child 类中使用负边距，在父类.grid 中使用overflow:hidden...此处无需使用nth-child 选择器...

:root {
  --border: 2px dashed #393939;
  --symbol-color: #FF7F5B;
}

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, calc(100%/3));
  grid-template-rows: repeat(3, calc(100%/3));
  overflow: hidden;
}

.child {
  height: 100px;
  display: flex;
  align-items: center;
  align-content: center;
  color: var(--symbol-color);
  font-size: 2.5rem;
  border-bottom: var(--border);
  border-left: var(--border);
  margin-left: -2px;
  margin-bottom: -2px;
}

<div class="grid">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

【讨论】：

nth-child 选择器对于代码审查来说似乎比负边距和隐藏溢出的技巧更容易理解。还是谢谢！

【解决方案6】：

如何使用background 和linear-gradient：

body {
  margin: 0;
}

.grid {
  --b: #393939 0px, #393939 5px, transparent 5px, transparent 8px;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3));
  grid-auto-rows:calc(100% / 3);
  background: 
    repeating-linear-gradient(to right ,var(--b)) 0   calc(100% / 3), 
    repeating-linear-gradient(to bottom,var(--b)) calc(2 * (100% / 3)) 0, 
    repeating-linear-gradient(to right ,var(--b)) 0 calc(2 * (100% / 3)), 
    repeating-linear-gradient(to bottom,var(--b)) calc(100% / 3) 0;
  background-size:100% 2px,2px 100%;
  background-repeat: no-repeat;
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid">
  <div class="child">A</div>
  <div class="child">B</div>
  <div class="child">C</div>
  <div class="child">D</div>
  <div class="child">E</div>
  <div class="child">F</div>
  <div class="child">G</div>
  <div class="child">H</div>
  <div class="child">I</div>
</div>

【讨论】：

我不认为这个解决方案很漂亮，但我感谢你的回答，我会看看它！