如何删除网格中的多余空格？

Question

我试图制作类似于这个网格但我让它的宽度不灵活。

我在 .grid-Items 中使用了display:flex，但与上图相比，它改变了结构。和同样的错误flex-shrink 显示。他们不工作。那么如何制作上图网格的结构呢？

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
}

.grid-item {
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 25px;
    box-shadow: 5px 10px white;
    padding: 20px;
    margin: 20px;
}

 <div className="row5">
        <div class="grid-container">
          <div class="grid-item">
            
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" alt="searchdoctor" />
            <span style=" font-weight: 700; font-size:36px;">
              
              Search doctor
            </span>
            <br />
            <span>
              
              Choose your doctor from thousands <br /> of specialist, general,
              and trusted <br /> hospitals.
            </span>
          </div>
          <div class="grid-item">
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
            <span  style=" font-weight: 700; font-size:36px;">
              
              Online pharmacy
            </span>
            <br />
            <span>
              
              Buy your medicines with our <br /> mobile application with a
              simple <br /> delivery system.
            </span>
          </div>
          <div class="grid-item">
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" /> <br />
            <span  style=" font-weight: 700; font-size:36px;">
              
              Consultation
            </span>
            <br />
            <span>
              
              Free consultation with our trusted <br /> doctors and get the best
              <br /> recomendations.
            </span>
          </div>
          <div class="grid-item">
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
            <span  style=" font-weight: 700; font-size:36px;">
              
              Details info
            </span>
            <br />
            <span>
              
              Free consultation with our trusted <br /> doctors and get the best
              <br /> recomendations.
            </span>
          </div>
          <div class="grid-item">
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
            <span  style=" font-weight: 700; font-size:36px;">
            Emergency care
            </span>
            <br />
            <span>
              You can get 24/7 urgent care for<br /> yourself or your children and your<br />
lovely family.
            </span>
          </div>
          <div class="grid-item">
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
            <span  style=" font-weight: 700; font-size:36px;">
              Tracking
            </span>
            <br />
            <span>
              Track and save your medical history<br/> and health data .
            </span>
          </div>
        </div>
      </div>

Answer 1

您应该使用 grid-template-columns: repeat(3, minmax(0, 1fr)); 来确保三个元素的宽度相等。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px;
}

.grid-item {
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 25px;
    box-shadow: 5px 10px white;
    padding: 20px;
    margin: 20px;
}

 <div className="row5">
        <div class="grid-container">
          <div class="grid-item">
            
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" alt="searchdoctor" />
            <span style=" font-weight: 700; font-size:36px;">
              
              Search doctor
            </span>
            <br />
            <span>
              
              Choose your doctor from thousands <br /> of specialist, general,
              and trusted <br /> hospitals.
            </span>
          </div>
          <div class="grid-item">
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
            <span  style=" font-weight: 700; font-size:36px;">
              
              Online pharmacy
            </span>
            <br />
            <span>
              
              Buy your medicines with our <br /> mobile application with a
              simple <br /> delivery system.
            </span>
          </div>
          <div class="grid-item">
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" /> <br />
            <span  style=" font-weight: 700; font-size:36px;">
              
              Consultation
            </span>
            <br />
            <span>
              
              Free consultation with our trusted <br /> doctors and get the best
              <br /> recomendations.
            </span>
          </div>
          <div class="grid-item">
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
            <span  style=" font-weight: 700; font-size:36px;">
              
              Details info
            </span>
            <br />
            <span>
              
              Free consultation with our trusted <br /> doctors and get the best
              <br /> recomendations.
            </span>
          </div>
          <div class="grid-item">
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
            <span  style=" font-weight: 700; font-size:36px;">
            Emergency care
            </span>
            <br />
            <span>
              You can get 24/7 urgent care for<br /> yourself or your children and your<br />
lovely family.
            </span>
          </div>
          <div class="grid-item">
            <img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
            <span  style=" font-weight: 700; font-size:36px;">
              Tracking
            </span>
            <br />
            <span>
              Track and save your medical history<br/> and health data .
            </span>
          </div>
        </div>
      </div>