Можно ли через CSS автоматически изменять вид блока, если он сместился вниз?

Question

Допустим, есть 4 дива, на большом экране они расположены по горизонтали. При уменьшении экрана последний див сползает вниз. Вот можно ли как-то отследить этот момент и изменить вид сползшего элемента? Добавить к нему бордер-топ, например.

Answer 1

.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.elem {
  width: 100px;
  height: 100px;
  background-color: black;
  margin: 10px;
}

@media (max-width: 255px) {
  .elem:last-child {
    border-bottom: 10px solid red;
  }
}

<div class="wrap">
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
</div>

Answer 2

на гридах

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(1, 100px);
}
.container div{
background-color:red;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

БЛОГ НА HUSL

Можно ли через CSS автоматически изменять вид блока, если он сместился вниз?

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