如何使该网格具有响应能力？

Question

我正在尝试使该网格具有响应能力，但它没有按预期工作。如何使该网格具有响应能力？我想在减少浏览器时使它们成为一列网格。我尝试使用媒体查询或一些框架，但它对我来说看起来不太好。我将不胜感激的帮助。代码如下：

css:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 5px 5px;
    grid-auto-flow: row;
    grid-template-areas:
      "farmhouseburger quinoablack"
      "chocolatemilkshake standardburger"
      "checkout perfect";
  }


  
  .farmhouseburger {
        grid-area: farmhouseburger;
        background: url(imgs/farmhouse.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }
  
  .quinoablack {
        grid-area: quinoablack;
        background: url(imgs/quinoa.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
     }
  
  .chocolatemilkshake {
       grid-area: chocolatemilkshake;
       background: url(imgs/milkshakeback.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }
  
  .standardburger {
      grid-area: standardburger;
      background: url(imgs/standard.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }
  
  .checkout { 
      grid-area: checkout;
      background: url(imgs/checkout.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }
  
  .perfect { 
      grid-area: perfect;
      background: url(imgs/barbecue.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }

HTML:

<div class="container">
        <div class="farmhouseburger">
                <div>
                    <h3 class="h3grid">NEW</h3>
                    <h1>FARMHOUSE<br>BURGER</h1>
                    <p>This burger’s name explains itself. Of course, you can<br>also top it with crisp lettuce, tomatoes, ketchup,<br>barbecue sauce and anything else.</p>
                    <h1>$2.49</h1>
                    <button class="buttongrid">ORDER NOW</button>
                </div>
        </div>
        <div class="quinoablack">
            <div>
                <h3 class="h3grid">NEW</h3>
                <h1>QUINOA & BLACK<br>BEAN BURGER</h1>
                <p>We can’t think of a better way to celebrate summer than<br>with these omg-worthy hamburgers. Plus, try our over-<br>the-top creative cheeseburgers.</p>
                <h1>$3.99</h1>
                <button class="buttongrid">ORDER NOW</button>
            </div>
        </div>
        <div class="chocolatemilkshake">
            <div>
                <h3 class="h3grid">NEW</h3>
                <h1>CHOCOLATE<br>MILKSHAKE</h1>
                <p>Milkshakes always taste good if you are a chocolate lover.<br>You can throw one together with a cream or experiment<br>with all kinds of extra flavors.</p>
                <h1>$2.49</h1>
                <button class="buttongrid">ORDER NOW</button>
            </div>
        </div>
        <div class="standardburger">
            <div>
                <h3 class="h3grid">NEW</h3>
                <h1>STANDARD<br>BURGER<br>MEAL</h1>
                <p>These incredible burger meal offer a unique twist to the<br>classic hamburger, incorporating ingredients like<br>pimento cheese and sesame.</p>
                <h1>$4.99</h1>
                <button class="buttongrid">ORDER NOW</button>
            </div>
        </div>
        <div class="checkout">
            <div>
                <h3 class="h3grid">NEW</h3>
                <h1>CHECKOUT OUR<br>CATERING MENU</h1>
                <p>Throwing the party is never been easier. Order now and<br>let us spice up your party. Burger meals, french fries and<br>cheeseburgers will cheer up your friends.</p>
                <h1>$13.99</h1>
                <button class="buttongrid">ORDER NOW</button>
            </div>

        </div>
        <div class="perfect">
            <div>
                <h3 class="h3grid">NEW</h3>
                <h1>HOW TO MAKE A<br>PERFECT BURGER</h1>
                <p>We will tell you a little secret. Mixing best quality steak<br>and pork and serves them on homemade herb-butter<br>rolls is the best version we know.</p>
                <h1>$5.99</h1>
                <button class="buttongrid">ORDER NOW</button>
            </div>
        </div>
      </div>

Answer 1

我只是使用网格区域的这行代码实例

/grid-template-columns: Repeat(auto-fit, minmax(400px, 1fr));/

我在小尺寸的屏幕上测试代码，例如390x844 并且它可以很好地工作

css 代码

        .container {
            max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }


  
  .farmhouseburger {
        background: url(imgs/farmhouse.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }
  
  .quinoablack {
        
        background: url(imgs/quinoa.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
     }
  
  .chocolatemilkshake {
       background: url(imgs/milkshakeback.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }
  
  .standardburger {
      background: url(imgs/standard.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }
  
  .checkout { 
      
      background: url(imgs/checkout.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }
  
  .perfect { 
      
      background: url(imgs/barbecue.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        text-align: center;
    }