Making a employee contact sheet with pictures and I need to make it responsive

Question

Using css grid and want to make it responsive for mobile. It has text and pictures and a header on (1) of every row making it (to me anyway) a bit tricky.

Tried different displays and overflow rules

<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;
}

There are no errors but it doesn't look the way I want it. Prefer it to go to one column if needed, but instead it changes to horizontal scrolling.

Answer 1

First of all, you have invalid auto-fit rule - use grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) instead of grid-auto-columns.

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

The main issue here is that you are explicitly placing all the divs using grid-row and grid-column definitions, so even though you are using auto-fit, these columns may not change at all and you'll lose responsiveness.

Only the h4 needs to be placed in the first column using grid-column: 1- see demo below:

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