Как я могу написать отзывчивый CSS для нескольких сгенерированных элементов в сетке? - PullRequest
Новая
       47

Как я могу написать отзывчивый CSS для нескольких сгенерированных элементов в сетке?

0 голосов
/ 03 июня 2019

Я работаю над веб-приложением, которое генерирует разметку сетки из некоторых текстовых полей.Моя проблема в том, что я не могу сгенерировать адаптивный код на лету и вынужден использовать одну таблицу стилей для загрузки адаптивного кода.

Теперь, когда я новичок в CSS и сетке, я смог успешно создать сетку с использованием этого кода: 

/* grid layout */

.lt-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.lt-1 { grid-area: 1 / 1 / 2 / 3; }

.lt-2 { grid-area: 2 / 1 / 3 / 3; }

.lt-3 { grid-area: 3 / 2 / 5 / 3; }

.lt-4 { grid-area: 3 / 1 / 4 / 2; }

/* responsive code */

@media (max-width: 768px) {
    .lt-grid-container {
        grid-template-rows: auto;   /*dont change */
        grid-template-columns: 1fr;   /* dont change */
    }

    .lt-1 {
      grid-area: 1 / 1 / 2 / 2;
    }

    .lt-2 {
      grid-area: 2 / 1 / 3 / 2;
    }

    .lt-3 {
      grid-area: 3 / 1 / 4 / 2;
    }

    .lt-4 {
      grid-area: 4 / 1 / 5 / 2;
    }
}
<div style="border: 1px solid #4CAF50;color: #000000; background-color: #fff">
    <div style="background-color: #4CAF50; min-height: 30px;">
    </div>
    <div style="justify-self: center; align-self: center;margin: 1.3em; font-size: 1.3em;">Free Download: Best affiliate marketing tools.
    </div>
    <div style="margin: 1.3em;justify-self: center; align-self: center;">
    <a href="#" target="_blank">
    <span > Click Me!</span>
    </a> 
    </div>
</div>

, поэтому весь мой раздел становится одним столбцом за другим.Проблема в том, что, хотя первая часть моего кода генерируется на лету, адаптивный раздел является статическим.

Я хочу, чтобы один и тот же адаптивный код использовался для всего автоматически сгенерированного кода CSS и будет применяться только кконкретные селекторы.Я ожидаю, что один и тот же набор адаптивного кода будет использоваться для нескольких CSS-кодов, даже если имена классов меняются.

Я не знаю, как создать адаптивный дизайн, используя nth-child или что-то, что можно обобщить.Поэтому я создал что-то вроде: 

@media (max-width: 768px) {
    .alldivs {
        grid-template-rows: auto;   /* dont change */
        grid-template-columns: 1fr;   /* dont change */
    }
    .child1 {
      grid-area: 1 / 1 / 2 / 2;
    }

    .child2 {
      grid-area: 2 / 1 / 3 / 2;
    }
}

и оттуда я не знаю, что делать.

1 Ответ

1 голос
/ 03 июня 2019

Вы можете попробовать 

@media (max-width: 768px) {
  .lt-grid-container {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .lt-grid-container > * {
    grid-area: auto / 1 / span 1 / span 1;
  }
}

Значения span 1 для grid-row-end и grid-column-end работают так, что каждый элемент сетки охватывает только одну вертикальную и одну горизонтальную дорожку. Значение auto для grid-row-start будет складывать их один за другим

...