html - CSS 网格布局 - 列不跨越

标签 html css grid multiple-columns

我有一个包含 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

最佳答案

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

关于html - CSS 网格布局 - 列不跨越,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59472840/

相关文章:

jquery - 你如何在对话框中打开一个 URL JQUERY UI

html - 嵌套的 DIV 和高度

jquery - 展开下拉列表时如何移动元素

python - Python中通过散点提取二维网格场的值

css - 如何制作具有一种样式的网格?

css - Logo 向左浮动,内容向右浮动

javascript - 刷新特定DIV

javascript window.print() Internet Explorer 8 不打印整个网页

javascript - 使用纯 javascript 以百分比形式获取元素在视口(viewport)中的可见性

javascript - Dojo datagrid - 尚未绘制的行的 getSelected()