Я пытаюсь настроить адаптивный сайт для школьного проекта, который показывает меню для кафе.Меню состоит из 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>