Question

*{
    margin: 0;
    margin-bottom: 200px;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.grid-container {
  position:relative;
  display: inline-grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap:0px;
  grid-gap: 0px 0px;
 grid-auto-rows: 100px;
 grid-template-areas:
"a a a a b b b b"
"a a a a b b b b"
"c c c c d d d d"
"c c c c d d d d";
align-items: start;
  }

 .item1 {
 grid-area: a;
 width :auto;
 background-color: #037EA7;
 padding: 300px 400px 300px 400px;
  }

.item2 {
  grid-area: b;
  background-color: #FFB400;
  padding:250px 150px 368px;
  margin-left: 100px;
    }

   .item3 {
  grid-area: c;
  background-color: #FF5739;
  margin-top: 416px;
  padding: 300px 400px 299px;
   }

    .item4 {
  grid-area: d;
  background-color: #037EA7;
  margin-left: 98px;
  margin-top: 415px;
  padding:250px 150px 368px;
    }

这是我的css代码。我希望我的css网格能够响应。你能告诉我我可以添加什么，以便页面上的列不会改变形状，也不会添加不必要的空间，所以当我改变页面大小时，只有整个网页变小或变大，而不是页面上每个网格项的形状

Answer 1

打开浏览器并加载页面。然后开始调整浏览器的大小，看看您的布局有哪些变化。然后使用媒体查询相应地调整您的布局。如果某些内容在980px处向左移动，则添加媒体查询断点并设置CSS规则，以确保在980px处该元素保留在您想要的位置。这并不难，但确实需要时间。以下是讨论此主题的一些资源：

https://webdesign.tutsplus.com/tutorials/css-grid-layout-going-responsive--cms-27270

http://www.creativebloq.com/how-to/create-a-responsive-layout-with-css-grid

https://medium.com/samsung-internet-dev/common-responsive-layouts-with-css-grid-and-some-without-245a862f48df

告诉我如何使网格响应

1 个答案: