user2882335 user2882335 - 28 days ago 16
Sass (Sass) Question

css grid with nth-child

Is it possible to create a repeating pattern of uneven columns using nth-child? This is what I have, but it only works for the first row:

.three-cols > div:nth-child(1n) {
width: 50%;
}
.three-cols > div:nth-child(2n) {
width: 25%;
}

.three-cols > div:nth-child(3n) {
width: 25%;
}

.three-cols > div:nth-child(3n) {
margin-right: 0;
}


So I want every row split:50%,25%,25%

http://codepen.io/garethj/pen/KNpQYd

Answer

There are three items per row so you need to use 3n for each selector. You then offset this by 1, 2 or 3 depending on the element you wish to target:

.three-cols > div:nth-child(3n+1) {
  width: 50%;
}
.three-cols > div:nth-child(3n+2) {
  width: 25%;
}
.three-cols > div:nth-child(3n+3) {
  width: 25%;
}
.three-cols > div:nth-child(3n+3) {
  margin-right: 0;
}
.block {
  overflow: hidden;
}
.block > div {
  box-sizing: border-box;
  float: left;
  border: 3px solid purple;
}
<footer>
  <div class="block three-cols">

    <div>50%</div>
    <div>25%</div>
    <div>25%</div>

    <div>50%</div>
    <div>25%</div>
    <div>25%</div>

    <div>50%</div>
    <div>25%</div>
    <div>25%</div>

  </div>
</footer>