Столбцы в порядке столбцов, одинаковой высоты, с динамическим содержимым

Этот ответ предложил отключить смещение как глобальную настройку, которая работала для меня:

matplotlib.rcParams['axes.formatter.useoffset'] = False

1
задан martinlex 6 March 2019 в 21:18
поделиться

2 ответа

Каждый раз, когда вы используете список, по умолчанию всегда будет какое-то поле между li элементами. Ваше решение прекрасно работает с сеткой, просто удалите поле по умолчанию, добавив margin: -0.5px к вашему классу .item.

.list {
  display: grid;
  grid-column-gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
}

.item {
  border-bottom: 1px solid lightgrey;
  border-top: 1px solid lightgrey;
  padding: 8px;
  margin: -0.5px;
  list-style: none;
}

.selected {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  z-index: 1;
}
<ul class="list">
  <li class="item">Asdfghjkl 1</li>
  <li class="item">Asdfghjkl 2</li>
  <li class="item">Asdfghjkl 3</li>
  <li class="item">Asdfghjkl 4</li>
  <li class="item">Asdfghjkl 5</li>
  <li class="item">Asdfghjkl 6</li>
  <li class="item selected">Asdfghjkl 7</li>
  <li class="item selected">Asdfghjkl 8</li>
  <li class="item">Asdfghjkl 9</li>
  <li class="item">Asdfghjkl 10</li>
  <li class="item">Asdfghjkl 11</li>
  <li class="item selected">Asdfghjkl 12</li>
  <li class="item">Asdfghjkl 13</li>
</ul>

0
ответ дан Nick 6 March 2019 в 21:18
поделиться

ОБНОВЛЕНИЕ 1: Это скриншот с решением Flexbox: https://pasteboard.co/I4hDGRM.png

display: flex;
flex-direction: column;
flex-flow: column wrap;
height: 340px; /* NEEDS HEIGHT */

Это именно то, что я хочу. Однако: ему нужно значение height для списка. У меня его нет, оно будет отличаться в зависимости от контента.

0
ответ дан martinlex 6 March 2019 в 21:18
поделиться
Другие вопросы по тегам:

Похожие вопросы: