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))而不是grid-auto-columns。

如果需要，最好将其转到一列，但改为水平滚动。

这里的主要问题是，您使用grid-row和grid-column定义明确地放置所有div，即使使用 auto-fit < / em>，这些列可能根本不会更改，并且您会失去响应能力。

仅需使用h4将grid-column: 1放在第一列中-请参见下面的演示

.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>

用图片制作员工联系表，我需要使其具有响应性

1 个答案: