网格布局内的边框

Question

我有一个代表井字游戏的 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>

结果：

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

Answer 1

有一件事，您可以像下面这样以更好的方式使用 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>

Answer 2

使用 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>

Answer 3

尝试在 .child class 中使用负边距，在父级 .grid class 中使用 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>

Answer 4

既然你想要一个程式化的边框（在这种情况下是虚线），那么你的方法和其他答案中采用的方法似乎很有用。

但是，如果您决定使用简单的实线边框，则可以简化该方法。只需使用网格的背景颜色作为边框颜色，并使用 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>

Answer 5

您可以在此处减少选择器的数量 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>

Answer 6

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

您可以使用 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

希望对您有所帮助

干杯！

网格布局内的边框

Border inside Grid Layout

html

css

css-grid