Этот ответ предложил отключить смещение как глобальную настройку, которая работала для меня:
matplotlib.rcParams['axes.formatter.useoffset'] = False
Каждый раз, когда вы используете список, по умолчанию всегда будет какое-то поле между 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>
ОБНОВЛЕНИЕ 1: Это скриншот с решением Flexbox: https://pasteboard.co/I4hDGRM.png
display: flex;
flex-direction: column;
flex-flow: column wrap;
height: 340px; /* NEEDS HEIGHT */
Это именно то, что я хочу. Однако: ему нужно значение height
для списка. У меня его нет, оно будет отличаться в зависимости от контента.