Создание отзывчивых строк и столбцов ВНУТРИ макета CSS GRID

Question

Я только что сделал свой первый CSS grid макет, и я впечатлен тем, как работает область шаблона, но в данный момент я также сильно озадачен тем, как я должен заполнять область шаблона элементами, которые вСам есть отзывчивые столбцы.

Например.Моя область шаблона с именем content содержит тег статьи с 1 строкой и 2 столбцами с отзывчивым поведением Flexboxgrid/Bootstrapgrid.Вот так:

<main class="g-content">
       <article>
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                   column left
                </div>
                <div class="col-xs-12 col-sm-6">
                    column right
                </div>
            </div>
        </article>
</main>

И CSS, где g-content это просто область сетки:

<style>
    .g-content {
      grid-area: content;
    }
</style>

Мне нравится гибкость, которую дают эти col- классы, потому что онив HTML.Поэтому я добавляю 2 класса в этом случае, и столбец ведет себя так, как я хочу.

Так что меня больше не интересует общий шаблон, но меня интересуют сами блоки контента ... Теперь я отбрасываю идею Flexboxgrid / Bootstrapgrid.

Итак, какой быстрый и гибкий способ в этом случае создать 2 отзывчивых столбца с использованием CSS Grid, которые ведут себя по-разному в определенных точках останова?

ИлиРазве CSS Grid не может заменить систему столбцов, отвечающую за Flexboxgrid / bootstrap?

Обновление: Я подумываю переписать классы столбцов начальной загрузки, но с использованием CSS GRID.Не уверен, что это окончательное решение, но оно работает.

@include screen('sm') {
  .row-sm-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.row-sm-6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
 }
}

@include screen('md') {
  .row-md-4 {
     display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Конечно, классы col должны стать классами строк, потому что сетка применяется из контейнера.

Answer 1

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

Я бы порекомендовал не смешивать больше механизмов разметки и просто придерживаться сетки.

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

Возможное решение будет:

<main class="g-content">
<article>
  <div class="inner-grid">
    <div class="inner-cell">
      column left
    </div>
    <div class="inner-cell">
      column right
    </div>
  </div>
</article>
</main>

А теперь, с помощью CSS:

@media (min-width: [SM BREAKPOINT] {
  .inner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gutter: GUTTER;
  }
}

Обратите внимание, что, поскольку в меньших разрешениях ваш макет представляет собой просто строки, вам нужно применять стиль только тогда, когда вы выше SM точка останова.

В качестве альтернативы вы также можете архивировать это с помощью flex:

@media (min-width: [SM BREAKPOINT] {
  .inner-grid {
    display: flex;
    flex-flow: row nowrap;
  }
  .inner-cell {
    flex: 0 0 50%;
  }
}

В общем:

• Для поддержки современных браузеров используйтеСобственная сетка CSS или flex.
• Старайтесь не смешивать каркасы с различными методологиями.
• Используйте flex для выравнивания (как в вашем примере).
• Используйте grid для создания сеток (Дух).

Answer 2

Вы можете использовать bootstrap, но я думаю, что лучше использовать flexbox css внутри содержимого сетки.И изменить направление flexbox в зависимости от точек останова медиа-запросов.