CSS网格布局-列不跨越

Question

我有7个项目的网格布局。我想要实现的是，第一行项目占据所有宽度（跨度三列），但是第二和第三行每行具有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

Answer 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>