使用媒体查询时，为什么我的网格项目不能彼此堆叠？

Question

我正在尝试使用媒体查询将仅2个div的网格项堆叠在一起，但是无论我进行什么更改都不会改变。我认为将3列更改为1列可以用于媒体查询...但是仍然没有任何效果。让我知道我在做什么错，因为无论我尝试什么，都不会改变。

HTML

it('opens a LightBox', () => {
    wrapper.find('.add').simulate('click');
    wrapper.update();

    expect(wrapper.find(OnlineProfilesContainer).length).toEqual(1);
});

SCSS

TypeError: $(...).lightBox is not a function

  14 |
  15 |     initDrawerCall = () => {
> 16 |         this.state.addOnlineProfileInstance = $(this.addOnlineProfileBtn).lightBox({
     |                                                                           ^
  17 |             model: $(this.addOnlineProfileCont),
  18 |             dimens: { width: "50%"},
  19 |             open: { anim: "flipOpen",minTop:100,

Answer 1

问题是您明确地设置了grid-column。将grid-column: 1/3更改为grid-column: span 2，然后取消使用grid-column: 4-请参见下面的演示

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

.showcase-grid .showcase-content {
  grid-column: span 2; /* CHANGED */
}

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

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

.showcase-grid .showcase-content .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-grid .showcase-content .showcase-btn-1:hover {
  background-color: #4f6df5;
  color: white;
}

.showcase-grid .showcase-content .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-grid .showcase-content .showcase-btn-2:hover {
  color: #4f6df5;
  border: 2px solid #4f6df5;
  background-color: white;
}

/*.showcase-grid .showcase-background-img {
  grid-column: 4;
}*/

.showcase-grid .showcase-background-img img {
  width: 420px;
}

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

<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://via.placeholder.com/200" alt="" />
  </div>
</div>