我有一个包含 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
最佳答案
.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/