CSS 网格中的分隔行文本

Question

我想在页脚中创建一个网格，其中文本位于网格上方但也位于网格中。 Position: absolute 不起作用，因为它同时影响网格和文本，我想单独移动它们。

我希望它是这样的： https://i.imgur.com/1fYoQIF.png

代码：

<div class="footer">Footer
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
    </div>

和css：

.footer{
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-auto-rows: 50px;
 grid-gap: 10px;
}

.icon{
 display: flex;
 background: rgb(160, 84, 84);
}

Answer 1

您可以通过用容器包裹网格和页脚来实现。

.footer-header {
  text-align: center;
  padding:20px;
}

.footer-grid {
 grid-column: span 3 / auto;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-auto-rows: 50px;
 grid-gap: 10px;
}

.icon{
   display: flex;
   background: rgb(160, 84, 84);
}

<div class="footer">
  <div class="footer-header">
    Footer
  </div>
  <div class="footer-grid">
        <div class="icon">1</div>
        <div class="icon">2</div>
        <div class="icon">3</div>
        <div class="icon">4</div>
        <div class="icon">5</div>
        <div class="icon">6</div>
  </div>
</div>

Answer 2

也可以使用grid-template-areas，例如

.footer{
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-areas: "footer-head footer-head footer-head";
 grid-auto-rows: 50px;
 grid-gap: 10px;
}

.icon{
 display: flex;
 background: rgb(160, 84, 84);
}

.footer-head {
  text-align: center;
  grid-area: footer-head; 
}

<div class="footer">
        <div class="footer-head">Footer</div>
        <div id="icon1" class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
    </div>

CSS 网格中的分隔行文本

Separate line text in CSS grid

css

css-grid