网格布局内的边框

Question

我有一个代表tic-tac-toe游戏的CSS网格。我想只在网格内放一个边框。今天，我以这种方式前进：

＆＃13;

＆＃13;

: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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果：

此解决方案有效，但我发现它没有吸引力。你有想法重构这个解决方案吗？

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);
}

＆＃13;

＆＃13;

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

＆＃13;

% the area
x = linspace(-5,5,1E2);
y = linspace(-5,5,1E2);

sig1=1;
sig2=2;

%2D gaussian
efac = 1/(2*sig1);
X   = exp(-efac*x.^2);
Y   = exp(-efac*y.^2)';
z1    = Y*X;
z1=z1./max(z1(:));

%2D gaussian
efac = 1/(2*sig2);
X   = exp(-efac*x.^2);
Y   = exp(-efac*y.^2)';
z2    = Y*X;
z2=z2./max(z2(:));

[u, v] = meshgrid(x, y);
mesh(u, v, z2-z1), grid on;

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试在.child课程中使用overflow:hidden课程中的负余量，并在.grid课程中使用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; }选择器...... < / p>

＆＃13;

＆＃13;

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

＆＃13;

MediatorLiveData

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以从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>

Answer 4

您可以考虑采用此解决方法。

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

希望有帮助

干杯！

Answer 5

如何使用background和linear-gradient：

body,
html {
  margin: 0;
  height: 100%;
}

.grid {
  --b: #393939 0px, #393939 5px, transparent 5px, transparent 8px;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3));
  grid-template-rows: repeat(3, calc(100% / 3));
  background: 
    repeating-linear-gradient(to right,var(--b)) 0 calc(100% / 3)/100% 2px, 
    repeating-linear-gradient(to right,var(--b)) 0 calc(2 * (100% / 3))/100% 2px, 
    repeating-linear-gradient(to bottom,var(--b)) calc(2 * (100% / 3)) 0/2px 100%, 
    repeating-linear-gradient(to bottom,var(--b)) calc(100% / 3) 0/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 6

由于你想要一个风格化的边框（在这种情况下为虚线），那么你的方法和其他答案中采用的方法似乎很有用。

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