Css 为什么在使用媒体查询时，我的网格项没有堆叠在一起？

我正在尝试使用媒体查询将只有两个div的网格项堆叠在彼此的顶部，但无论我更改什么，都不会更改。我想将我的3列改为1列可以用于我的媒体查询…但仍然没有任何效果。让我知道我做错了什么，因为无论我做什么，都不会改变

HTML

---

问题是您正在显式设置

网格列

。将

网格列：1/3

更改为

网格列：span 2

，并删除

网格列：4

-请参见下面的演示：

.showcase网格{
网格模板列：重复（3，1fr）；
显示：网格；
对齐项目：居中；
}
.showcase网格。showcase内容{
格线柱：跨度2；/*已更改*/
}
.showcase网格。showcase内容。showcase标题{
字体大小：2.5rem；
字号：600；
}
.showcase网格。showcase内容。showcase文本{
垫面：2rem；
颜色:"828282 ;；
}
.showcase网格。showcase内容。showcase-btn-1{
边框：2px实心#4f6df5；
字体大小：0.9rem；
背景色：白色；
颜色：#4f6df5；
填充：1雷姆1.5625雷姆；
光标：指针；
边界半径：4px；
宽度：170px；
转换：所有0.3秒到0秒；
字号：600；
}
.showcase网格。showcase内容。showcase-btn-1:悬停{
背景色：#4f6df5；
颜色：白色；
}
.showcase网格。showcase内容。showcase-btn-2{
颜色：白色；
背景色：#4f6df5；
字体大小：0.9rem；
边框：实心2px#4f6df5；
填充：1雷姆1.5625雷姆；
光标：指针；
宽度：170px；
边界半径：4px；
转换：所有0.3秒到0秒；
左边距：0.5雷姆；
边缘顶端：2rem；
字号：600；
}
.showcase网格。showcase内容。showcase-btn-2:悬停{
颜色：#4f6df5；
边框：2px实心#4f6df5；
背景色：白色；
}
/*.showcase网格。showcase背景图像{
网格柱：4；
}*/
.展示网格.展示背景图像图像图像图像图像{
宽度：420px；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.展示网格{
网格模板列：1fr；
}
}

我叫Edward Kelley，我努力让网络变得棒极了。

我通过新颖创新的内容帮助企业获得关注。

您的业务需要一些不同的东西吗？让我们联系吧！

关于我
接触

问题在于您正在显式设置网格列。将

网格列：1/3

更改为

网格列：span 2

，并删除

网格列：4

-请参见下面的演示：

.showcase网格{
网格模板列：重复（3，1fr）；
显示：网格；
对齐项目：居中；
}
.showcase网格。showcase内容{
格线柱：跨度2；/*已更改*/
}
.showcase网格。showcase内容。showcase标题{
字体大小：2.5rem；
字号：600；
}
.showcase网格。showcase内容。showcase文本{
垫面：2rem；
颜色:"828282 ;；
}
.showcase网格。showcase内容。showcase-btn-1{
边框：2px实心#4f6df5；
字体大小：0.9rem；
背景色：白色；
颜色：#4f6df5；
填充：1雷姆1.5625雷姆；
光标：指针；
边界半径：4px；
宽度：170px；
转换：所有0.3秒到0秒；
字号：600；
}
.showcase网格。showcase内容。showcase-btn-1:悬停{
背景色：#4f6df5；
颜色：白色；
}
.showcase网格。showcase内容。showcase-btn-2{
颜色：白色；
背景色：#4f6df5；
字体大小：0.9rem；
边框：实心2px#4f6df5；
填充：1雷姆1.5625雷姆；
光标：指针；
宽度：170px；
边界半径：4px；
转换：所有0.3秒到0秒；
左边距：0.5雷姆；
边缘顶端：2rem；
字号：600；
}
.showcase网格。showcase内容。showcase-btn-2:悬停{
颜色：#4f6df5；
边框：2px实心#4f6df5；
背景色：白色；
}
/*.showcase网格。showcase背景图像{
网格柱：4；
}*/
.展示网格.展示背景图像图像图像图像图像{
宽度：420px；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.展示网格{
网格模板列：1fr；
}
}

我叫Edward Kelley，我努力让网络变得棒极了。

我通过新颖创新的内容帮助企业获得关注。

您的业务需要一些不同的东西吗？让我们联系吧！

关于我
接触

谢谢，这正是我需要的。您是否建议我使用span，而不是严格声明哪些列和/或行来保持我的网格项的位置？您可以根据上下文使用这两者，这里您希望更改图像的列-因此在这种情况下严格指定列没有帮助：）谢谢，这正是我所需要的。您是否建议我使用span而不是严格声明哪些列和/或行来保持我的网格项的位置？您可以根据上下文使用这两者，这里您希望更改图像的列-因此在这种情况下严格指定列没有帮助：）

<div class="showcase-grid">
        <div class="showcase-content">
          <h1 class="showcase-heading">
            My name is Edward Kelley and I strive to make the web 
awesome.
          </h1>
          <p class="showcase-text">
            I help businesses get noticed with fresh and innovative 
content.
            <br />Need something different for your business? Let's 
get in
            touch!
          </p>
          <button class="showcase-btn-1">About me</button>
          <button class="showcase-btn-2">Contact</button>
        </div>
        <div class="showcase-background-img">
          <img src="https://images.pexels.com/photos/847402/pexels- 
   photo-847402.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
        </div>
      </div>

.showcase-grid {
grid-template-columns: repeat(3, 1fr);
display: grid;
align-items: center;

.showcase-content {
  grid-column: 1 / 3;

  .showcase-heading {
    font-size: 2.5rem;
    font-weight: 600;
  }

  .showcase-text {
    padding-top: 2rem;
    color: #828282;
  }

  .showcase-btn-1 {
    border: 2px solid #4f6df5;
    font-size: 0.9rem;
    background-color: white;
    color: #4f6df5;
    padding: 1rem 1.5625rem;
    cursor: pointer;
    border-radius: 4px;
    width: 170px;
    transition: all 0.3s ease 0s;
    font-weight: 600;
  }

  .showcase-btn-1:hover {
    background-color: #4f6df5;
    color: white;
  }

  .showcase-btn-2 {
    color: white;
    background-color: #4f6df5;
    font-size: 0.9rem;
    border: solid 2px #4f6df5;
    padding: 1rem 1.5625rem;
    cursor: pointer;
    width: 170px;
    border-radius: 4px;
    transition: all 0.3s ease 0s;
    margin-left: 0.5rem;
    margin-top: 2rem;
    font-weight: 600;
  }

  .showcase-btn-2:hover {
    color: #4f6df5;
    border: 2px solid #4f6df5;
    background-color: white;
  }
}

.showcase-background-img {
  grid-column: 4;

  img {
    width: 420px;
  }
}
}


@media screen and (max-width: 768px) {
  .showcase-grid {
grid-template-columns: 1fr;
}
}