В стилях не отображается третий медиазапрос

Question

Сам проблем не выявил. Прилагаю текст задачи: Сделайте плитку, которая при уменьшении экрана будет иметь сначала восемь элементов в ряд, потом четыре элемента в ряд, потом два элемента в ряд. Пусть отступ между элементами составляет 0.75%. Не вышло сделать 8 элементов в ряд. Остальное работает. Заранее спасибо!

UPD: При изменениях второго медиазапроса (max-width:900), а соответственно и третьего все заработало.

* {
  padding: 0px 0px 0px 0px;
  text-decoration: none;
  color: black;
  box-sizing: border-box;
}

.parent {
  display: flex;
  width: 90%;
  margin: 0px auto;
  border: 1px black solid;
  flex-wrap: wrap;
  column-gap: 0.75%;
  padding: 0.75%;
}

.child {
  border: 1px solid black;
}

@media (max-width:500px) {
  .child {
    width: calc(100%/2 - 0.75%*1/2);
  }

  .child:nth-child(-n+10) {
    margin-bottom: 0.75%;
  }
}

@media (min-width:500px) and (max-width:1000px) {
  .child {
    width: calc(100%/4 - 0.75%*3/4);
  }

  .child:nth-child(-n+8) {
    margin-bottom: 0.75%;
  }
}

@media (min-width:1000px) {
  .child {
    width: calc(100%/8 - 0.75%*7/8);
  }

  .child:nth-child(-n+8) {
    margin-bottom: 0.75%;
  }

}

Answer 1

Можно сделать так,

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 90%;
  margin: 0 auto;
  gap: 0.75%;
}

.child {
  border: 1px solid black;
  min-height: 40px;
  margin: 0.75% 0;
  flex: 0 0 calc((100% - (7 * 0.75%)) / 8);
}


@media (max-width: 1000px) {
  .child {
    flex: 0 0 calc((100% - (3 * 0.75%)) / 4);
  }
}


@media (max-width: 500px) {
  .child {
    flex: 0 0 calc((100% - (1 * 0.75%)) / 2);
  }
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <!-- For control  -->
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

или через display:grid можно так

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.parent {
  display: grid;
  width: 90%;
  margin: 0 auto;
  gap: 0.75%;
  grid-template-columns: repeat(8, 1fr);
}

.child {
  border: 1px solid black;
  min-height: 40px;
  margin: 0.75% 0;
}

@media (max-width: 1000px) {
  .parent {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 500px) {
  .parent {
    grid-template-columns: repeat(2, 1fr);
  }
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <!-- For control  -->
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

БЛОГ НА HUSL

В стилях не отображается третий медиазапрос

Ответы (1 шт):