如何使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

这可以做到，尽管您可以将宽度更改为任意宽度或将媒体更改为所需的屏幕！

.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>

Answer 3

您还需要重置行和列的位置，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>

提醒：

如何使CSS二维网格响应？

问题描述投票：1回答：3

3个回答

最新问题

如何使CSS二维网格响应？

问题描述 投票：1回答：3

3个回答

最新问题

问题描述投票：1回答：3