Как сделать адаптивный перенос столбцов? - PullRequest
Новая
       7

Как сделать адаптивный перенос столбцов?

0 голосов
/ 02 октября 2018

Мои требования к табличному дизайну таковы: «столбцы нужно переносить, когда не осталось места», как это 

a1 b1
a2 b2
.. ..
.. bm
an

с меньшим окном просмотра, который «таблица» должна переносить в 

a1
..
an
b1
..
bm

Может быть больше столбцов, чем просто 2.

Я пытался использовать CSS Grid и Flexbox, но не смог добиться того, чего хотел.Любые идеи?

Здесь запрещены теги таблиц :( CSS Grid был бы лучше ... но увы ...

Моя текущая идея была примерно такой: https://codepen.io/GEdelmann/pen/BqorwY Но этоборется, когда приходится иметь дело с динамическим контентом.

Ответы [ 3 ]

0 голосов
/ 02 октября 2018

В соответствии с макетом, который вы хотите, с вашими примерами, представленными в аналогичном формате области шаблона сетки.Вы можете выполнить переход от 2 перечисленных вами столбцов к 1 столбцу, настроив медиазапрос для соответствующего изменения области шаблона сетки.Я заметил, что a2 и b2 отсутствовали в примере с 1 столбцом, поэтому я предположил, что вы хотите, чтобы они были удалены, когда размер экрана меньше значения X.Я набрал быстрый код, который использует ваши примеры и достигает цели форматирования блоков в соответствии с тем, что изображает ваш пример.Вы можете перемещать блоки по своему усмотрению в медиа-запросе.

https://codepen.io/skazx/pen/ReWeBP

@media (max-width: 600px) {
    .wrapper{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "a1"
        "."
        "an"
        "b1"
        "."
        "bm"
    }
    .a2{
        display: none;
    }
    .b2{
        display: none;
    }
}
0 голосов
/ 02 октября 2018

Просто оберните ваши элементы столбцов внутри div и все внутри flexbox или grid-контейнера.

Образец: https://codepen.io/antekai/pen/NOGEYB?editors=1100

HTML 

FLEXBOX SOLUTION

<div class="flex-container">
  <div>
    <div class="item">a1</div>
    <div class="item">a2</div>
    <div class="item">a3</div>
  </div>
  <div>
    <div class="item">b1</div>
    <div class="item">b2</div>
    <div class="item">b3</div>
  </div>
</div>

CSS GRID SOLUTION

<div class="grid-container">
  <div>
    <div class="item">a1</div>
    <div class="item">a2</div>
    <div class="item">a3</div>
  </div>
  <div>
    <div class="item">b1</div>
    <div class="item">b2</div>
    <div class="item">b3</div>
  </div>
</div>

CSS 

//flexbox solution
.flex-container{
  display:flex;
  flex-flow:row wrap;
}
// CSS Grid solution
.grid-container{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr))
}
//helper class
.item{
  height:100px;
  width:200px;
  background-color: black;
  color:white;
  margin:10px;
}

РЕДАКТИРОВАТЬ

По следующей ссылке вы можете найти расширенное решение для случая неравной высоты предметов.Для решения flexbox - динамическое расширение на основе JS, а для сетки CSS - статическое улучшение на основе CSS.Логика улучшений та же: добавьте пустой элемент с высотой, равной разнице высот между соответствующими элементами (например, пустой элемент после b1 с высотой = a1-b1, когда a1-b1> 0, что приводит к вертикальному выравниванию a2 и b2).Усовершенствованное решение flexbox может быть расширено до решения CSS grid, и наоборот.

Пример: https://codepen.io/antekai/pen/OBMyqv

Примечание: для расширения на основе JS (решение flexbox) при изменении размера области просмотра междуточку останова (в 400px) просто наберите что-нибудь (на панели html, css или js), чтобы кодовая ручка обновила live-reload.

0 голосов
/ 02 октября 2018

Вы всегда можете использовать Bootstrap Grid System.

ИЛИ

получить фрагменты Flexbox

Подтверждение концепции здесь

HTML 

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

CSS 

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;

  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
...