使网格模板列和行响应时出现问题

Question

早上,

我一直在努力改进我的网格布局，但我觉得这不是创建这种布局的最优雅的方式，特别是我不确定如何使其响应并防止网格井喷。

理想情况下，文本将与图像一起缩小(根据字体大小夹具设置)，直到某个px断点，然后它将恢复为flex-display:column，但我想知道是否有一种方法可以在没有媒体查询的情况下做到这一点，只需为我的列和行设置更好的minmax属性。

这是获得这个结果的有效方法吗？还有，我该如何去响应移动设备呢？

谢谢

<div class="servicesOne">
    <img class="grid-item-four-one border-item-four-one" src=" <?php echo get_template_directory_uri(); ?> \assets\images\servicesImg.png" alt="Our Services" srcset="">

    <h2 class="grid-item-four-two">Why <span style="color:#7EC8E3">JD3D</span>?</h2>

    <p class="grid-item-four-three"> Hendis et, omnimo et eum renduciati que nonse vollaccus verfernatur, odicit quatempossi ut int reratiam verorum.
        Hendis et, omnimo et eum renduciati que nonse vollaccus verfernatur, odicit quatempossi ut int reratiam verorum.
        Hendis et, omnimo et eum renduciati que nonse vollaccus verfernatur.
    </p>
</div>

.servicesOne {
  padding-top: 2.25rem;
  gap: 0 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(50px, 1fr));
  grid-template-rows: minmax(100px, max-content) repeat(auto-fill, 90px) 20%;
  align-items: start;
  overflow: hidden;
}

.grid-item-four-one{
  border-color: #7ec8e3; 
  border-style: solid;
  margin-right: 2rem;
  padding: 1.2rem;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: auto;
  grid-area: 3/2/7/6;
  display: block;
}

.grid-item-four-two {
  margin-top: -2rem;
  color: #0d0d0d;
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  font-weight: 700;
  padding-left: 1rem;
  padding-bottom:1rem;
  align-self: end;
  grid-area: 3/6/4/9;
}

.grid-item-four-three {
    width: 100%;
    height: auto;
  padding-left: 0.75rem;
  padding-top:1rem;
  align-self: end;
  grid-area: 4/6/7/8;
  font-size: clamp(.75rem, 2vw, 1.4rem)

}

​

.servicesOne {
  padding-top: 2.25rem;
  gap: 0 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(50px, 1fr));
  grid-template-rows: minmax(100px, max-content) repeat(auto-fill, 90px) 20%;
  align-items: start;
  overflow: hidden;
}

.grid-item-four-one{
  margin-right: 2rem;
  padding: 1.2rem;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: auto;
  grid-area: 3/2/7/6;
  display: block;
}



.grid-item-four-two {
  margin-top: -2rem;
  color: #0d0d0d;
  font-size: clamp(2.75rem, 5vw, 5rem);
  font-weight: 700;
  padding-left: 1rem;
  padding-bottom:1.5rem;
  align-self: end;
  grid-area: 3/6/4/9;
}

.grid-item-four-three {
    width: 100%;
    height: auto;
  padding-left: 0.75rem;
  padding-top:1rem;
  align-self: end;
  grid-area: 4/6/7/8;
  font-size: clamp(.75rem, 2vw, 1.4rem)

}

<div class="servicesOne">
    <img class="grid-item-four-one border-item-four-one" src=" https://www.viessmann.de/content/dam/vi-brands/DE/Services/services-xl.jpg/_jcr_content/renditions/services-s.jpg./services-s.jpg" alt="Our Services" srcset="">

    <h2 class="grid-item-four-two">Why <span style="color:#7EC8E3">JD3D</span>?</h2>

    <p class="grid-item-four-three"> Hendis et, omnimo et eum renduciati que nonse vollaccus verfernatur, odicit quatempossi ut int reratiam verorum.
        Hendis et, omnimo et eum renduciati que nonse vollaccus verfernatur, odicit quatempossi ut int reratiam verorum.
        Hendis et, omnimo et eum renduciati que nonse vollaccus verfernatur.
    </p>
</div>

​

Answer 1

可以使用minmax属性来定义范围。

As mdn says:

的minmax() CSS函数定义了一个大于或等于min且小于或等于max的大小范围。它与CSS网格一起使用。

举个例子：

​

.servicesOne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
}

.servicesOne .grid-item {
    border: 1px solid #E2E2E2;
    border-radius: .5rem;
}

img {
    height: 100%;
    width: 100%;
}

<div class="servicesOne">
        <div class="grid-item">
            <img class="grid-item"
            src=" https://www.viessmann.de/content/dam/vi-brands/DE/Services/services-xl.jpg/_jcr_content/renditions/services-s.jpg./services-s.jpg"
            alt="Our Services" srcset="">
        </div>
        <div  class="grid-item">
            <h2 class="grid-item" style="color:#7EC8E3">Why?</h2>
        </div>
        <div  class="grid-item">
            <p class="grid-item"> Hendis et, omnimo et eum renduciati que nonse vollaccus verfernatur, odicit quatempossi ut int reratiam verorum.
                Hendis et, omnimo et eum renduciati que nonse vollaccus verfernatur, odicit quatempossi ut int reratiam verorum.
                Hendis et, omnimo et eum renduciati que nonse vollaccus verfernatur.
            </p>
        </div>
    </div>

​