Question

使用CSS网格布局，创建一个站点，其布局会随着屏幕尺寸的变化而变化。

在这里，为了将内容（粉红色区域）保留在CSS Grid Layout的中央，我做了以下样式。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  color: #fff;
}

.bg {
  background-color: #6c757d;
}

footer {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
  grid-template-rows: repeat(3, auto);
}

h1,
dl {
  grid-column: 2;
  background-color: pink;
}

p.h6 {
  grid-row: 3;
  grid-column: 3;
  overflow-wrap: break-word;
}

@media (max-width: 800px) {
  p.h6 {
    grid-column: 2;
  }
}

body>p {
  text-align: center;
}

<footer class="bg text">
  <h1>
    heading
  </h1>
  <dl class="h6">
    <dt>word1</dt>
    <dd>desc1</dd>
    <dt>word2</dt>
    <dd>desc2</dd>
  </dl>
  <p class="h6">COPYRIGHT(C)loooooooooooooooooooooooooongtext</p>
</footer>
<p>&#8593;<br>true center</p>

这似乎在宽度较宽时效果很好，但在宽度较小时，粉红色区域偏离了“真实中心” 。

这也表明 minmax (20%, 1fr)不能正常运行。

如何使此粉红色区域居中？另外，有没有比我上面想的更好的方法？（使用CSS网格布局）

Answer 1

您可以使用grid-template-columns: 1fr auto 1fr居中居中。现在，在min-width: 0上添加p.h6，以便覆盖网格项的默认min-width: auto，以使其缩小到超出内容大小（溢出可见值以外的值也可以）-使overflow-wrap: break-word生效。参见下面的演示：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  color: #fff;
}

.bg {
  background-color: #6c757d;
}

footer {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* changed */
  /*grid-template-rows: repeat(3, auto); <-- redundant */
}

h1,
dl {
  grid-column: 2;
  background-color: pink;
}

p.h6 {
  grid-row: 3;
  grid-column: 3;
  overflow-wrap: break-word;
  min-width: 0; /* added */
}

@media (max-width: 800px) {
  p.h6 {
    grid-column: 2;
  }
}

body>p {
  text-align: center;
}

<footer class="bg text">
  <h1>
    heading
  </h1>
  <dl class="h6">
    <dt>word1</dt>
    <dd>desc1</dd>
    <dt>word2</dt>
    <dd>desc2</dd>
  </dl>
  <p class="h6">COPYRIGHT(C)loooooooooooooooooooooooooongtext</p>
</footer>
<p>&#8593;<br>true center</p>

Answer 2

看看这个规则：

p.h6 { grid-column: 3; }

当视口的宽度超过800px时，p.h6元素中的文本即“ COPYRIGHT（C）loooooooooooooooooooooooooooongongtext”

占据最右边的一列，即网格列3。中间的粉红色框可能很小。这是因为您已将页脚元素设置为grid-template-columns：

grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);

换句话说，粉红色框周围的列应尽可能大（1fr），而粉红色框应尽可能小（自动或内部文本的宽度）。

现在，当视口小于小于800px时，版权文字将移至第二列或中间列：

@media (max-width: 800px) { p.h6 { grid-column: 2; } }

这将强制该列的auto宽度为“ loooooooongtext”的整个宽度。这就是为什么当您将其缩小得太小时会在视口中溢出。

您可以通过在页脚的直接子级中添加两个属性值来解决此问题：

footer > *{ overflow-wrap: break-word; overflow: hidden; }

两者都进入max-width: 800px媒体查询。演示：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  color: #fff;
}

.bg {
  background-color: #6c757d;
}

footer {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
  grid-template-rows: repeat(3, auto);
}

h1,
dl {
  grid-column: 2;
  background-color: pink;
}

p.h6 {
  grid-row: 3;
  grid-column: 3;
  overflow-wrap: break-word;
}

@media (max-width: 800px) {
  p.h6 {
    grid-column: 2;
  }
  
  footer{
    grid-template-columns: 1fr 1fr 1fr;
  }
  footer > *{
    overflow-wrap: break-word;
    overflow: hidden;
  }
}

body>p {
  text-align: center;
}

<footer class="bg text">
  <h1>
    heading
  </h1>
  <dl class="h6">
    <dt>word1</dt>
    <dd>desc1</dd>
    <dt>word2</dt>
    <dd>desc2</dd>
  </dl>
  <p class="h6">COPYRIGHT(C)loooooooooooooooooooooooooongtext</p>
</footer>
<p>&#8593;<br>true center</p>

如何使内容在CSS网格布局中居中？

2 个答案: