如何使 CSS 二维网格响应？

Question

我有以下带有网格的二维 CSS。 我无法实现响应能力。 当屏幕按需要填满时，我得到以下信息。

我压缩了第 2 列和第 3 列，而不是响应如下。

我想要以下结果。

请看下面的代码：

 .frame { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-template-rows: repeat(2, 1fr); grid-gap: 40px; border: 1px solid red; } .blog1, .blog2, .blog3, .blog4 { height: 200px; border: 1px solid green; } .blog3 { grid-column: 3; grid-row: 1/3; height: 100%; } .blog4 { height: 200px; border: 1px solid green; grid-column: 1/3; grid-row: 2; }

 <div class="frame"> <div class="blog1">one</div> <div class="blog2">two</div> <div class="blog3">three</div> <div class="blog4">four</div> </div>

Answer 1

如果我理解应用媒体查询

@media only screen and (max-width: 600px) {
  .blog1, .blog2, .blog3, .blog4 {
      height: 200px;
      border: 1px solid green;
      width:100% !important;
   }
}

编辑

替代解决方案可以是

<style>

    .frame {
        width: 95%;
        display: table;
        border: 1px solid red;
        margin-left: 2.5%;
        height: 400px;
        padding-bottom: 2px;
    }

    .left, .right{
        float: left;
        display: block;
    }

    .left{ width: 65%; background-color: #0c199c}

    .right{width: 35%; background-color: #3affed}

    .blog1, .blog2, .blog3, .blog4{
        float: left;
        width: 50%;
        height: 200px;
        background-color: #f2f2f2;
    }

    .blog2:nth-child(even){
        background-color: #f8f8f8;
    }

    .blog3{
        background-color: #f5f5f5;
    }

    .blog3, .blog4{
        width: 100%;
    }

    @media only screen and (max-width: 600px) {

        .left, .right{
            width: 100%;
        }

        .blog1, .blog2, .blog3, .blog4 {
            width:100% !important;
            margin-bottom: 5px;
        }
    }
</style>
<div class="frame">
    <div class="left">
        <div class="blog1">one</div>
        <div class="blog2">two</div>
        <div class="blog3">three</div>
    </div>
    <div class="right">
        <div class="blog4">four</div>
    </div>
</div>

Answer 2

您还需要重置行和列的位置， auto-fit不会这样做。

@media screen and (max-width : 1300px) {/* set your break point value here */
  .blog3,.blog4 {
    grid-column: auto;
    grid-row:auto ;
  }
}

可能的演示：

 .frame { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-gap: 40px; border: 1px solid red; } .blog1, .blog2, .blog3, .blog4 { height: 200px; border: 1px solid green; } .blog3 { min-height: 200px;/* added for the visual, not necessary */ grid-column: 3; grid-row: 1/3; height: 100%; } .blog4 { height: 200px; border: 1px solid green; grid-column: 1/3; grid-row: 2; } @media screen and (max-width: 1300px) { .blog3, .blog4 { grid-column: auto; grid-row: auto; } }

 <div class="frame"> <div class="blog1">one</div> <div class="blog2">two</div> <div class="blog3">three</div> <div class="blog4">four</div> </div>

否则，要通过 3 列到单列，然后

@media screen and (max-width : 1300px) {/* set your break point value here */
  .frame {
    display:block;
  }
}

将整个网格重置为常规流量显示；

 .frame { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-gap: 40px; border: 1px solid red; } .blog1, .blog2, .blog3, .blog4 { height: 200px; border: 1px solid green; } .blog3 { min-height: 200px; /* added for the visual, not necessary */ grid-column: 3; grid-row: 1/3; height: 100%; } .blog4 { height: 200px; border: 1px solid green; grid-column: 1/3; grid-row: 2; } @media screen and (max-width: 1300px) { .frame { display: block; } .frame>div:not(:first-child) { margin-top: 40px; /* grid-gap was also reset */ } }

 <div class="frame"> <div class="blog1">one</div> <div class="blog2">two</div> <div class="blog3">three</div> <div class="blog4">four</div> </div>

提醒：

• https://css-tricks.com/snippets/css/complete-guide-grid/

• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 3

尽管您可以将宽度更改为任何内容或将媒体更改为您想要的屏幕，但这会做到这一点！

 .frame { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-template-rows: repeat(2, 1fr); grid-gap: 40px; border: 1px solid red; } .blog1, .blog2, .blog3, .blog4 { height: 200px; border: 1px solid green; } .blog3 { grid-column: 3; grid-row: 1/3; height: 100%; } .blog4 { height: 200px; border: 1px solid green; grid-column: 1/3; grid-row: 2; } @media screen and (max-width: 2000px) { .frame { grid-template-columns: auto; grid-template-rows: none; } .blog1, .blog2, .blog3, .blog4 { width: 100%; height: 200px; grid-column: auto; grid-row: auto; } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href=""> <title>Document</title> </head> <body> <div class="frame"> <div class="blog1">one</div> <div class="blog2">two</div> <div class="blog3">three</div> <div class="blog4">four</div> </div> </body> </html>