响应CSS栅格（1柱移动，2平板，3桌面）设置

Question

我试图设立一个学校项目，显示了一个咖啡馆的菜单一个负责任的网站。菜单上有3小节：咖啡，三明治和糕点。对于这些子部分，我想每一个显示为1列上移动，在平板2列，并且在台式3栏，与H4S和图像在自己的行独处（顶部图像，单独一排，和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>

Answer 1

下面是如何实现这一点的例子。使用带有display: flex容器

称取100％的项目将有flex-basis: 100%。

使用媒体查询风格你的项目的时候，屏幕大小的变化，并设置柔性基础上，你需要的价值。

.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的文字。