我正在尝试为一个学校项目设置一个响应站点，该站点显示咖啡店的菜单。菜单包括3个子部分：咖啡，三明治和糕点。对于这些小节，我希望每个小节在移动设备上显示为1列，在平板电脑上显示为2列，在台式机上显示为3列，其中H4和图像单独显示在自己的行中（图像显示在顶部，一行单独显示，H4就在它的正下方，也连续一行）。这是我的html的设置方式，以及为设置网格系统而尝试过的方法，但是我无法弄清楚网格是否可以挽救我的生命。在此过程中，我留下了我的评论，以便您可以看到我尝试使其工作的内容。如果您能提供帮助，我将不胜感激。提前致谢。
#menu {
padding-left: 7%;
padding-right: 7%;
padding-top: 70px;
background-color: $black;
display: grid;
/*grid-template-areas: 'story astronaut';
/grid-template-columns: repeat(3fr 3fr 3fr);*/
color: $white;
text-align: center;
/* @include md{
padding-left: 12%;
padding-right: 12%;
}*/
h2 {
color: $orange;
//text-align: center;
padding-top: 65px;
padding-bottom: 65px;
@include md {
text-align: left;
}
article {
text-align: center;
}
*/ .coffee {
grid-area: coffeegrid;
}
#coffee {
padding-bottom: 38px;
/*text-align: center;*/
grid-template-areas: coffeegrid;
/* grid-template: 50% 50%;*/
@include md {
grid-template-columns: 50% 50%;
/*grid-template-areas: '.coffee .coffee';*/
}
/*grid-gap: 22px;*/
}
}
.menu-icon {
width: 20%;
/*padding-bottom: 11px;*/
@include lg {
width: 7%;
}
}
/* .coffee{
grid-area: coffee;
}
article{
color: $white;
text-align: center;
padding-bottom: 28px;
h3{
text-align: center;
// margin-bottom: 80px;
}
}
#sandwiches{
padding-bottom: 38px;
text-align: center;
}
#pastries{
padding-bottom: 65px;
text-align: center;
}
h4{
margin-bottom: 10px;
}*/
}<!-- MENU -->
<section id="menu">
<h2>MENU</h2>
<!-- COFFEE -->
<section id="coffee">
<img src="../img/menu/coffee_icon.svg" alt="coffee cup icon" class="menu-icon">
<h3>coffee and other rocket fuel</h3>
<article class="coffee">
<h4>The Buzz Aldrin</h4>
<p>a medium roast blend with a touch of caramel and a pleasant finish</p>
</article>
<article class="coffee">
<h4>The Mae Jemison</h4>
<p>chai tea latte: spiced black tea and steamed milk</p>
</article>
<article class="coffee">
<h4>The Gordon Cooper</h4>
<p>latte: espresso, steamed milk, and a dollop of foam</p>
</article>
<article class="coffee">
<h4>The Pete Conrad</h4>
<p>red eye: coffee with a single shot of espresso</p>
</article>
<article class="coffee">
<h4>The Harrison Schmitt</h4>
<p>caramel macchiato: espresso, steamed milk, caramel, and vanilla</p>
</article>
<article class="coffee">
<h4>The Neil Armstrong</h4>
<p>café au lait: coffee with steamed milk</p>
</article>
<article class="coffee">
<h4>The Ellen Ochoa</h4>
<p>hot chocolate with any flavor of your choice, served with whipped cream</p>
</article>
<article class="coffee">
<h4>The Sunita WIlliams</h4>
<p>café mocha: espresso, steamed milk, and chocolate with whipped cream</p>
</article>
<article class="coffee">
<h4>The William Pogue</h4>
<p>cappuccino: equal parts espresso and milk with heavy foam</p>
</article>
</section>
<!-- SANDWICHES -->
<section id="sandwiches">
<img src="../img/menu/sandwich_icon.svg" alt="sandwich icon" class="menu-icon">
<h3>fresh (not freeze- dried) sandwiches</h3>
<article class="sandwiches">
<h4>The John Glenn</h4>
<p>grilled chicken, avocado spread, lettuce and honey mustard</p>
</article>
<article class="sandwiches">
<h4>The Alan Shepard</h4>
<p>turkey sausage, scrambled egg, and provolone cheese</p>
</article>
<article class="sandwiches">
<h4>The Gus Grissom</h4>
<p>freshly sliced tomato, fresh mozzarella mixed greens and balsamic vinaigrette</p>
</article>
<article class="sandwiches">
<h4>The John Young</h4>
<p>premium roast beef slices, tomato, onions, lettuce and spicy mayonnaise</p>
</article>
<article class="sandwiches">
<h4>The James Lovell</h4>
<p>provolone cheese, swiss cheese, and garlic aoli on toasted sourdough</p>
</article>
<article class="sandwiches">
<h4>The Sally Ride</h4>
<p>ham, swiss cheese, and dijon butter on toasted sourdough</p>
</article>
</section>
<!-- PASTRIES -->
<section id="pastries">
<img src="../img/menu/pastries_icon.svg" alt="croissant icon" class="menu-icon">
<h3>out-of-this-world pastries</h3>
<article class="pastries">
<h4>The Story Musgrave</h4>
<p>croissant: your choice of butter, almond, or chocolate</p>
</article>
<article class="pastries">
<h4>The Frank Borman</h4>
<p>classic coffee cake</p>
</article>
<article class="pastries">
<h4>The Eileen Collins</h4>
<p>muffin: your choice of blueberry, cinnamon, or bran</p>
</article>
<article class="pastries">
<h4>The Guion Bluford</h4>
<p>banana walnut bread</p>
</article>
<article class="pastries">
<h4>The Carlos Noriega</h4>
<p>strawberry yogurt scone</p>
</article>
<article class="pastries">
<h4>The Wally Schirra</h4>
<p>iced lemon loaf cake</p>
</article>
</section>
<!-- END MENU SUBSECTIONS -->
</section>
答案 0 :(得分：0)
这是实现该目标的一个示例。将容器与display: flex
占100％的物品将具有flex-basis: 100%。
当屏幕尺寸变化时，使用媒体查询来设置样式，并将flex-basis设置为所需的值。
.container {
display: flex;
flex-direction: column;
width: 70%;
border: 1px solid black;
border-radius: 4px;
padding: 15px;
margin: 0 auto;
}
.items-container {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.full-row-item {
flex-basis: 100%;
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 10px;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 15px;
}
.item {
flex-basis: 100%;
text-align: center;
}
@media (max-width: 1024px) {
.item {
flex-basis: 50%;
}
}
@media (max-width: 700px) {
.item {
flex-basis: 33%;
}
}<div class="container">
<div class="full-row-item">Title Here</div>
<div class="items-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</div>
如果您有任何可能只想在几栏中输入文字，则根据页面宽度将column-count设置为1、2或3。