Создание контактного листа сотрудника с фотографиями, и я должен сделать его отзывчивым

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.

Предпочитают переходить к одному столбцу, если необходимо, но вместо этого он переключается на горизонтальную прокрутку.

Основная проблема заключается в том, что вы явно размещаете все элементы div, используя определения grid-row и grid-column, поэтому, даже если вы используете auto-fit , эти столбцы может не измениться вообще, и вы потеряете отзывчивость.

Только 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>