html - 制作带图片的员工联系表，我需要让它响应

Question

使用 css 网格并希望使其响应移动设备。它在每一行的 (1) 上都有文本和图片以及标题，这使得它(无论如何对我来说)有点棘手。

尝试了不同的显示和溢出规则

<wrapper class="grid">
      <h4 class="departmentOne">Sales Department</h4>
      <div class="one">
        <img class="imageBox" src="./images/abdulplaceholder_1.jpeg" />
        <ul>
          <li>Abdul</li>
          <li>Sales Director</li>
          <li>555-5551</li>
        </ul>
      </div>
      <div class="two">
        <img class="imageBox" src="./images/davidplaceholder_1.jpeg" />
        <ul>
          <li>David</li>
          <li>Sales Associate</li>
          <li>555-5552</li>
        </ul>
      </div>
      <h4 class="departmentTwo">Service Department</h4>
      <div class="three">
        <img class="imageBox" src="./images/angieplaceholder_1.jpeg" />
        <ul>
          <li>Angie</li>
          <li>Service Director</li>
          <li>555-5553</li>
        </ul>
      </div>
      <div class="four">
        <img class="imageBox" src="./images/mattplaceholder_1.jpeg" />
        <ul>
          <li>Matt</li>
          <li>Service Advisor</li>
          <li>555-5554</li>
        </ul>
      </div>
      <h4 class="departmentThree">Sales Department</h4>
      <div class="five">
        <img class="imageBox" src="./images/chrisplaceholder_1.jpeg" />
        <ul>
          <li>Chris</li>
          <li>Parts Director</li>
          <li>555-5555</li>
        </ul>
      </div>
      <div class="six">
        <img class="imageBox" src="./images/seanplaceholder_1.jpg" />
        <ul>
          <li>Sean</li>
          <li>Parts Associate</li>
          <li>555-5556</li>
        </ul>
      </div>
      <div class="seven">
        <img class="imageBox" src="./images/jimplaceholder_1.jpeg" />
        <ul>
          <li>Jim</li>
          <li>Parts Associate</li>
          <li>555-5557</li>
        </ul>
      </div>
      <h4 class="departmentFour">Sales Department</h4>
      <div class="eight">
        <img class="imageBox" src="./images/debbieplaceholder_1.jpeg" />
        <ul>
          <li>Debbie</li>
          <li>Finance Director</li>
          <li>555-5558</li>
        </ul>
      </div>
    </wrapper>

CSS

.grid {
  display: grid;
  /* grid-auto-rows: minmax(125px, auto); */
  grid-auto-columns: repeat(auto-fir, minmax(150px, 1fr));
  grid-gap: .5rem;
  overflow: auto;
}
.row {
  width: 290px;
}
.one {
  grid-column: 2;
  grid-row: 1;
  padding: 5px;
}
.two {
  grid-column: 3;
  grid-row: 1;
  padding: 5px;
}
.three {
  grid-column: 2;
  grid-row: 2;
  padding: 5px;
}
.four {
  grid-column: 3;
  grid-row: 2;
  padding: 5px;
}
.five {
  grid-column: 2;
  grid-row: 3;
  padding: 5px;
}
.six {
  grid-column: 3;
  grid-row: 3;
  padding: 5px;
}
.seven {
  grid-column: 4;
  grid-row: 3;
  padding: 5px;
}
.eight {
  grid-column: 2;
  grid-row: 4;
  padding: 5px;
}
.departmentOne {
  padding: 20px;
  grid-column: 1;
  grid-row: 1;
}
.departmentTwo {
  padding: 20px;
  grid-column: 1;
  grid-row: 2;
}
.departmentThree {
  padding: 20px;
  grid-column: 1;
  grid-row: 3;
}
.departmentFour {
  padding: 20px;
  grid-column: 1;
  grid-row: 4;
}

没有错误，但它看起来不像我想要的那样。如果需要，希望它转到一列，但它会更改为水平滚动。

Answer 1

首先，您有无效的auto-fit规则 - 使用grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) 网格自动列。

Prefer it to go to one column if needed, but instead it changes to horizontal scrolling.

这里的主要问题是您使用 grid-row 和 grid-column 定义显式放置所有 div，所以即使您正在使用自动调整，这些列可能根本不会改变，您将失去响应能力。

只有 h4 需要使用 grid-column: 1 placed 在第一列中 - 请参见下面的演示:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: .5rem;
  overflow: auto;
}
wrapper > div {
  padding: 5px;
}
wrapper > h4 {
  padding: 20px;
  grid-column: 1;
}

<wrapper class="grid">
      <h4 class="departmentOne">Sales Department</h4>
      <div class="one">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Abdul</li>
          <li>Sales Director</li>
          <li>555-5551</li>
        </ul>
      </div>
      <div class="two">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>David</li>
          <li>Sales Associate</li>
          <li>555-5552</li>
        </ul>
      </div>
      <h4 class="departmentTwo">Service Department</h4>
      <div class="three">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Angie</li>
          <li>Service Director</li>
          <li>555-5553</li>
        </ul>
      </div>
      <div class="four">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Matt</li>
          <li>Service Advisor</li>
          <li>555-5554</li>
        </ul>
      </div>
      <h4 class="departmentThree">Sales Department</h4>
      <div class="five">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Chris</li>
          <li>Parts Director</li>
          <li>555-5555</li>
        </ul>
      </div>
      <div class="six">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Sean</li>
          <li>Parts Associate</li>
          <li>555-5556</li>
        </ul>
      </div>
      <div class="seven">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Jim</li>
          <li>Parts Associate</li>
          <li>555-5557</li>
        </ul>
      </div>
      <h4 class="departmentFour">Sales Department</h4>
      <div class="eight">
        <img class="imageBox" src="https://via.placeholder.com/100" />
        <ul>
          <li>Debbie</li>
          <li>Finance Director</li>
          <li>555-5558</li>
        </ul>
      </div>
    </wrapper>