嵌套Grid布局求助：底部div跨列及背景图与文本冲突

问题1：让.bottomdiv占满footer网格的整个底部行 #

你的.footer是2列2行的网格结构，要让.bottomdiv横跨整个底部，只需要调整它的网格列范围，让它从第一列延伸到最后一列：

.bottomdiv {
  grid-column: 1 / -1; /* 用-1表示最后一列，比写具体列数更灵活 */
  text-align: center;
}

这样不管后续footer的列数是否调整，.bottomdiv都会自动占满整行，完美实现跨列需求。

问题2：避免文本margin干扰背景图位置 #

原来的.leftdiv和.contactlogo是同一个元素，给这个元素加margin会直接改变元素自身的布局位置，导致背景图跟着偏移。最清晰的解决方法是把文本放在.leftdiv的子元素里，让父元素专门负责背景样式，子元素单独处理文本和边距：

修改后的HTML结构 #

<div class="footer" id="kontakt">
  <div class="leftdiv">
    <div class="contactlogo"> My BBQclass </div> <!-- 文本移到独立子元素中 -->
  </div>
  <div class="rightdiv contacttext">
    <ul>
      <li>Telefon: 245213654</li>
      <li>E-post: me@inter.net</li>
      <li>Postgiro: 784512-22</li>
    </ul>
  </div>
  <div class="bottomdiv ustext">Event, butiksevent, personalfester, fester och grillkurser. Kan även göra restaurang-gästspel med burgarna på begäran.</div>
</div>

修改后的CSS #

.footer { 
  grid-area: footer; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
}
.bottomdiv {
  grid-column: 1 / -1;
  text-align: center;
}
.leftdiv { 
  background-image: url("../images/logo-sbbq4.png"); 
  opacity : 0.2; 
  background-repeat: no-repeat; 
  background-size: 20% 100%; 
  background-position: -60px 0px; 
  /* 可选：添加flex布局方便子元素定位 */
  display: flex;
  align-items: center; /* 让文本垂直居中 */
}
.contactlogo { 
  font-family: Neucha; 
  font-size: 4vw; 
  color: #000; 
  margin: 30% 4vw; 
  /* 现在margin只会影响子元素的位置，完全不会干扰父元素的背景图 */
}

现在.leftdiv的背景图位置完全由自身的background-position控制，子元素的margin只会调整文本的显示位置，两者互不干扰，问题完美解决。

内容的提问来源于stack exchange，提问作者swe_mattias