Условный стиль для изменений автозапуска в сетке CSS

Question

Я ищу способ определить, когда свойство grid-auto-flow css было задействовано, и применить условный стиль, например. больший размер шрифта.

Полный демонстрационный пример: Stackblitz (так как вы не можете изменить размер в контейнере сниппета Stackoverflow).

Возможно ли это, используя только CSS? Или я ошибаюсь в решении этой проблемы?

Мне нужно font-size: x, чтобы увеличиваться, когда экран становится меньше. Я бы предпочел воздержаться от введения в него любых медиа-запросов javascript (и или).

, если нет медиа-запроса, который может обнаружить это изменение

main {
  display: grid;
  color: rgb(107, 107, 107);
  font-size: 1em;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-flow: row;
}

main section:first-child h1 {
  padding-left: var(--page-left-padding);
}

main section article {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

main section article div {
  align-self: center;
  font-size: 0.3em;
}

main section article div:last-child {
  padding-bottom: 3em;
}

main section article p {
  font-size: 1em;
}

ul,
li {
  text-decoration: none;
  list-style: none;
}

<main>
  <section>
    <h1>If you resize, this text will be positioned above, not to the side.</h1>
  </section>
  <section>
    <article>
      <p>Lorem Ipsum</p>
      <div>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipiscing elit</li>
        <li>Praesent iaculis tempor</li>
        <li>nulla nec rutrum. Donec eu purus</li>
        <li>uspendisse potenti</li>
        <li>libero sem sollicitudin</li>
      </div>
    </article>
    <article>
      <p>Mauris sem tortor</p>
      <div>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipiscing elit</li>
        <li>Praesent iaculis tempor</li>
        <li>nulla nec rutrum. Donec eu purus</li>
        <li>uspendisse potenti</li>
        <li>libero sem sollicitudin</li>
      </div>
    </article>
  </section>
</main>

Answer 1

Для обнаружения изменений ширины экрана используйте медиа-запросы, они для этого и созданы. И вы можете установить любое font-size в соответствии с вашими точками останова мультимедиа. Я согласен, точки останова мультимедиа не могут обнаруживать изменения количества столбцов при использовании grid-template-columns auto-fit. Но это CSS дружелюбно.

Для подключения grid-template-columns количества и размера шрифта вы можете использовать следующий способ.

main {
  grid-template-columns: repeat(2, 1fr);
}
main section:first-child h1 {
  font-size: 28px;
}

@media (max-height: 475px) {
  main {
    grid-template-columns: repeat(1, 1fr);
  }
  main section:first-child h1 {
    font-size: 36px;
  }
}

Или, если вы хотите подсчитать столбцы и обнаружить изменения, вызванные auto-fit - это задача для JavaScript.

Сделано просто JavaScript, которое подсчитывает количество блоков в первом столбце, сравнивая их offsetTop. Затем мы набираем количество столбцов в CSS переменной --cols и можем использовать его где угодно, например, font-size: calc(36px / var(--cols));

countCols();

window.addEventListener("resize", function() {
  countCols();  
});

function countCols() {
  let cols = 0;
  let mainOffsetTop = document.querySelector('main section').offsetTop; /* main offset top */
  let mainSections = document.querySelectorAll('main section'); 
  for (let i = 0; i < mainSections.length; i += 1) {
    /* (section offset top) and (main offset top) == for the first row elements */
    if((mainSections[i].offsetTop - mainOffsetTop) == 0) {
      cols++;
    } else {
      break;
    }    
  }
  // getting CSS variable in body
  document.documentElement.style.setProperty('--cols', cols);
}

main {
  display: grid;
  color: rgb(107, 107, 107);
  font-size: 1em;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-flow: row;
}

main section:first-child h1 {
  padding-left: var(--page-left-padding);
  font-size: calc(36px / var(--cols));
}

main section article {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

main section article div {
  align-self: center;
  font-size: 0.3em;
}

main section article div:last-child {
  padding-bottom: 3em;
}

main section article p {
  font-size: 1em;
}

ul,
li {
  text-decoration: none;
  list-style: none;
}

<main>
  <section>
    <h1>If you resize, this text will be positioned above, not to the side.</h1>
  </section>
  <section>
    <article>
      <p>Lorem Ipsum</p>
      <div>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipiscing elit</li>
        <li>Praesent iaculis tempor</li>
        <li>nulla nec rutrum. Donec eu purus</li>
        <li>uspendisse potenti</li>
        <li>libero sem sollicitudin</li>
      </div>
    </article>
    <article>
      <p>Mauris sem tortor</p>
      <div>
        <li>Lorem ipsum dolor sit amet</li>
        <li>consectetur adipiscing elit</li>
        <li>Praesent iaculis tempor</li>
        <li>nulla nec rutrum. Donec eu purus</li>
        <li>uspendisse potenti</li>
        <li>libero sem sollicitudin</li>
      </div>
    </article>
  </section>
</main>