CSS Grid - 2

by Matthew Day

HTML

<ul class="container">
  <li>
    <img src="http://placekitten.com/g/300/200" /></li>
    <p>2</p>
  <li>
    <img src="http://placekitten.com/g/300/200" />
    <p>4</p>
  </li>
  <li>
    <p>5</p>
    <p>6</p>
  </li>
</ul>

SCSS

* {
  margin: 0;
  padding: 0;
}

.container {
  align-items: center; /* vertically center but also removes background, probably because it is using position: absolute */
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
}

.nimg {
  height: 100px;
}

@media only screen and (min-width: 400px) {
  .container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
}

li {
  .container & {
    background: crimson;
    border: 1px solid white;
    color: white;
    padding: 14px;
    &:nth-of-type(odd) {
      background: navy;
      padding-bottom: 0;
      padding-top: 0;
    }
    &:nth-of-type(3) {
      /* grid-column: 2; */
    }
    &:nth-of-type(4) {
      /* grid-column: 1; */
    }
  }
}

img {
  display: block;
  height: auto;
  width: 100%;
}

/* img {
  display: block;
  height: 100%;
  width: auto;
} */