CSS 网格问题，响应式设计不起作用

Question

这是我的 CSS 代码：我有网格 class，其中包含响应式设计的所有必要参数和 HTML 代码，其中包含六个元素，它应该在低屏幕分辨率下换行并在彼此下方发送块

/* grid test */
.angry-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   /*grid-template-rows: 1fr 1fr 1fr;*/
   grid-gap: 25px;
   align-items: flex-start;
   grid-auto-flow: column;
   grid-auto-rows: auto;
}

  
#item-0 {
   grid-row-start: 1;
   grid-column-start: 1;
   grid-row-end: 2;
   grid-column-end: 2;
}
#item-1 {
   grid-row-start: 1;
   grid-column-start: 2;
   grid-row-end: 2;
   grid-column-end: 3;
}
#item-2 {
   grid-row-start: 1;
   grid-column-start: 3;
   grid-row-end: 2;
   grid-column-end: 4;
}
#item-3 {
   grid-row-start: 1;
   grid-column-start: 4;
   grid-row-end: 2;
   grid-column-end: 5;
}
#item-4 {
   grid-row-start: 2;
   grid-column-start: 1;
   grid-row-end: 3;
   grid-column-end: 4;
}
#item-5 { 
   grid-row-start: 2;
   grid-column-start: 4;
   grid-row-end: 3;
   grid-column-end: 5;
}

<div class="angry-grid">
  <div id="item-0">
    1
  </div>
  <div id="item-1">
    2
  </div>
  <div id="item-2">
    3
  </div>
  <div id="item-3">
    4
  </div>
  <div id="item-4">
    5
  </div>
  <div id="item-5">
    6
  </div>
</div>

如您所见，当屏幕分辨率较低时，模板根本没有响应。

Answer 1

您希望当屏幕变小时，您的项目“包裹”，这可以通过 Flex Boxes 或 网格布局，但首先：

不要用那么多IDRead this : Reasons not to use IDs in CSS
如果您希望项目为“responsive/flexible”，请不要明确定义项目应放置在哪些单元格中，否则您将不得不使用 @media queries

.angry-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   grid-gap: 25px;
}

.angry-grid div{
  background-color: BlanchedAlmond;
  height: 50px;
}

.angry-grid div:nth-child(even){
  background-color: burlywood;
}

.angry-flex{
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}
.angry-flex div{
  min-width: 150px;
}
.angry-flex div{
  background-color: BlanchedAlmond;
  height: 50px;
}

.angry-flex div:nth-child(even){
  background-color: burlywood;
}

<h1>Grid Layout</h1>
<div class="angry-grid">
    <div class="item-0">
1
    </div>
    <div class="item-1">
2
    </div>
    <div class="item-2">
3
    </div>
    <div class="item-3">
4
    </div>
    <div class="item-4">
5
    </div>
    <div class="item-5">
6
    </div>
  </div>
  
 <h1>Flex Box</h1>
  
  <div class="angry-flex">
    <div class="item-0">
1
    </div>
    <div class="item-1">
2
    </div>
    <div class="item-2">
3
    </div>
    <div class="item-3">
4
    </div>
    <div class="item-4">
5
    </div>
    <div class="item-5">
6
    </div>
  </div>

Answer 2

问题是您想要包装项目，但同时您为每个项目指定它应该在网格中的位置：

#item-1 {
   grid-row-start: 1;
   grid-column-start: 2;
   grid-row-end: 2;
   grid-column-end: 3;
}

而且在第 2 列结束 item-0 并在第 2 列开始 item-1 也不起作用，因为这意味着它们将在同一列中。

所以我从每件商品中删除了您所有的 css 并且包装效果很好。在您希望某些项目从第 2 行开始后，您需要指定它。我还建议您使用媒体查询。

所以现在对于 725 像素以下的屏幕，您将只能看到 1 列。

演示

/* grid test */
.angry-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   grid-gap: 25px;
   align-items: flex-start;
   grid-auto-flow: row;
   grid-auto-rows: auto;
}

  
/*#item-0 {
   grid-row-start: 1;
   grid-column-start: 1;
   grid-row-end: 2;
   grid-column-end: 2;
}
#item-1 {
   grid-row-start: 1;
   grid-column-start: 2;
   grid-row-end: 2;
   grid-column-end: 3;
}
#item-2 {
   grid-row-start: 1;
   grid-column-start: 3;
   grid-row-end: 2;
   grid-column-end: 4;
}
#item-3 {
   grid-row-start: 1;
   grid-column-start: 4;
   grid-row-end: 2;
   grid-column-end: 5;
}
#item-4 {
   grid-row-start: 2;
   grid-column-start: 1;
   grid-row-end: 3;
   grid-column-end: 4;
}
#item-5 { 
   grid-row-start: 2;
   grid-column-start: 4;
   grid-row-end: 3;
   grid-column-end: 5;
}*/

<div class="angry-grid">
  <div id="item-0">
    1
  </div>
  <div id="item-1">
    2
  </div>
  <div id="item-2">
    3
  </div>
  <div id="item-3">
    4
  </div>
  <div id="item-4">
    5
  </div>
  <div id="item-5">
    6
  </div>
</div>

CSS 网格问题，响应式设计不起作用

Problem with CSS grid, responsive design not working

css

grid

responsive-design

演示