CSS网格中的单独行文本答案

【问题标题】：Separate line text in CSS gridCSS网格中的单独行文本
【发布时间】：2022-01-23 22:10:28
【问题描述】：

我想在页脚中创建一个网格，其中文本位于网格上方但也留在网格中。 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);
}

【问题讨论】：

标签： css css-grid

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：