CSS 网格布局 - 列不跨越答案

【问题标题】：CSS Grid Layout - columns don't spanCSS 网格布局 - 列不跨越
【发布时间】：2020-04-15 18:38:12
【问题描述】：

我有一个包含 7 个项目的网格布局。我想要实现的是，第一行项目占据所有宽度（跨越 3 列），但第二和第三行在每行中有 3 个项目/列。

到目前为止，我已经尝试了所有我能找到的网格列解决方案，但似乎没有任何效果，所以我认为它必须对网格项的内容做一些事情，但我看不出有什么问题。

这是我的代码：

.menu-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 2rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

.menu-grid-container span {
  font-size: 1.5rem;
}

.menu-grid-container img {
  display: block;
  width: 100%;
  height: 100%;
}

.item1 {
  grid-column: 1 / 3;
}

<div class="menu-grid-container">
  <div class="menu-block item-1">
    <h2 class="menu-title">Promos</h2>
  </div>

  <div class="menu-block item-2">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="" class="menu-img">
    <span class="menu-item">6 Alitas</span>
    <span class="price">9.99€</span>
  </div>
  <div class="menu-block item-3">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="" class="menu-img">
    <span class="menu-item">Menu Familiar</span>
    <span class="price">9.99€</span>
  </div>
  <div class="menu-block item-4">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="" class="menu-img">
    <span class="menu-item">Menu 2</span>
    <span class="price">9.99€</span>
  </div>
  <div class="menu-block item-5">
    <h2 class="menu-title">Menus</h2>
  </div>
  <div class="menu-block item-6">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="" class="menu-img">
    <span class="menu-item">Menu 1</span>
    <span class="price">9.99€</span>
  </div>
  <div class="menu-block item-7">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="" class="menu-img">
    <span class="menu-item">Menu 2</span>
    <span class="price">9.99€</span>
  </div>
</div>

这是我的 CodePen

https://codepen.io/WhatIsThisPS/pen/GRgEqRE

【问题讨论】：

您是否尝试过使用表格？ <td> 的 colspan 属性可能会有所帮助。
我需要它来响应，这就是我选择网格的原因
您在.item1 中有错字应该是.item-1，另外repeat(3, 1fr) 这将生成3 列和4 行所以grid-column: 1 / 3; 应该是grid-column: 1 / 4; 或grid-column: 1 / span 3; 如果你只如果要添加 span 关键字的列，请指定表示行的数字。更多关于grid-column
我知道它必须是这样微不足道的事情。简单的错字。感谢您对 1 / 4 和 1 / span 3 的澄清。

标签： html css grid multiple-columns

【解决方案1】：

.menu-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.menu-grid-container span {
    font-size: 1.5rem;
}

.menu-grid-container img {
    display: block;
    width: 100%;
    height: 100%;
}

.item1 {
    grid-column: 1 / 4;
}

<div class="menu-grid-container">

        <div class="menu-block item-1 item1">
             <h2 class="menu-title">Promos</h2>
        </div>

        <div class="menu-block item-2">
             <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="" class="menu-img">
             <span class="menu-item">6 Alitas</span>
          <span class="price">9.99€</span>
        </div>

        <div class="menu-block item-3">
             <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="" class="menu-img">
             <span class="menu-item">Menu Familiar</span>
             <span class="price">9.99€</span>
        </div>

        <div class="menu-block item-4">
             <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="" class="menu-img">
             <span class="menu-item">Menu 2</span>
             <span class="price">9.99€</span>
        </div>

        <div class="menu-block item-5">
             <h2 class="menu-title">Menus</h2>
        </div>

        <div class="menu-block item-6">
             <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="" class="menu-img">
             <span class="menu-item">Menu 1</span>
             <span class="price">9.99€</span>
        </div>
        
 </div>

【讨论】：