Question

我正在尝试使网格响应。到目前为止，它仍然有效，但是在事情上仍然困扰着我。如果我将网格项目的span属性设置为从左数第二列开始，则网格将在调整窗口大小时中断。

预期和实际结果：

因此，有两个具有几乎相同CSS属性的网格容器。顶部网格的项目应位于网格容器的最右侧，而底部网格的项目应位于网格容器的最左侧。

底部网格及其项按预期缩放为单个列，但是顶部网格显示两个（甚至大小不同）的列，而不是预期的单个列。因此其项目仅跨越一列。

两个网格容器和网格项目具有几乎相同的CSS属性：

.-has-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
}

// top item
.-column-item--right {
  grid-column: 2 / -1;
  background: green;
}

// bottom item
.-column-item--left {
  grid-column: 1 / -2;
  background: lightblue;
}    

article,
figure,
img {
  width: 100%;
}

HTML：

// top container

<article class="-has-columns">
  <div class="-column-item--right">
    <figure>
      <img>
    </figure>
  </div>
</article>

// bottom container

<article class="-has-columns">
  <div class="-column-item--left">
    <p>
    <p>
    <p>
  </div>
</article>

感谢任何提示！

Answer 1

 This is my html file  
  `
      <body>
        <article class="-has-columns">
          <div class="-column-item--right">
            <span>
              <p>abc</p>
              <p>xyz</p>
              <p>abb</p>
            </span>
          </div>
        </article>
    
        <article class="-has-columns">
          <div class="-column-item--left">
            <p>Xyz</p>
            <p>Bzg</p>
            <p>asd</p>
          </div>
        </article>
      </body>
 
My css

.-has-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
}

.-column-item--right {
  grid-column: 2 / -1;
  background: green;
}

.-column-item--left {
  grid-column: 1 / -2;
  background: lightblue;
}

article,
figure,
img {
  width: 100%;
}
body {
  position: relative;
  padding-bottom: 45%;
}
@media only screen and (max-width: 600px) {
  body {
    position: relative;
    padding-bottom: 45%;
  }
  .-column-item--right {
    grid-column: 1 / -1;
    background: green;
  }
}

Answer 2

尝试

.-column-item--right {
  grid-column: 2 / -2;
}

调整大小时CSS网格项目不会跨越设置的列

2 个答案: