V-для классов отображаются друг над другом

Question

У меня есть массив объектов, которые я хочу перебрать.Каждый объект отображается в своем собственном div.В этом конкретном списке только три объекта, поэтому я мог бы просто поместить их вручную с помощью grid-row в css-grid, но для другой страницы мне, возможно, понадобятся сотни.

В настоящее время три класса отображаются поверх каждогодругие вместо друг друга.

    <div class="sidebar-last-three" v-for="patient in this.lastThree">
        <div class="patient-entry">
            <span class="patient-name">{{patient.value}}</span>
            <span class="patient-date">{{patient.key}}</span>
            <span class="dots">...</span>
            <span class="line"></span>
        </div>
    </div>

Это CSS, который я использую.

.sidebar-last-three{
    display: grid;
    grid-row: 7/30;
    grid-column: 1/11;
    grid-template-rows: repeat(30, 1fr);
    grid-template-columns: repeat(5, 1fr);
}
.patient-entry{
    display: grid;
    grid-column: 1/6;
    grid-row: auto;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
}

Как это в настоящее время

Как я хочу, чтобы это было

Я думаю, это что-то делатьс использованием v-for для создания классов, так как обычно с css-grid дочерние элементы div автоматически переходят в строки и столбцы.Заранее спасибо!

Answer 1

Стиль, который вам нужен:

.sidebar {
  display: grid;
  position: fixed;
  grid-template-columns: repeat(10, 1 fr);
  grid-template-rows: repeat(10, 1 fr);
  grid-column: 1;
  width: 16.8vw;
  height: 100%;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
  background: #26292c;
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
}
.patient-name{
  font-size: 16px;
  color: #ffffff;
  grid-column: 3/15;
  grid-row: 1/2;
}
.patient-date{
  font-size: 14px;
  color: #98acc1;
  grid-column: 3/15;
  grid-row: 2/3;
}
.line{
  background-color: #424a51;
  width: 100%;
  height: 1px;
  grid-column: 1/16;
  grid-row: 5;
}
.dots{
  justify-self: center;
  font-size: 16px;
  align-self: center;
  grid-column: 14/15;
  grid-row: 1/2;
  color: #ffffff;
}
.sidebar-last-three{
  display: grid;
}
.patient-entry{
  display: grid;
  grid-column: auto;
  grid-row: auto;
}

Я переместил ваш пример в codepen.

Попробуйте, если это работает для вас. Вот рабочий пример:

Answer 2

надеюсь, это поможет вам.

    <style>
.sidebar-last-three{
    display: grid;
}
.patient-entry{
    display: grid;
    grid-column: auto;
    grid-row: auto;
}
</style>

<div class="sidebar-last-three" v-for="patient in this.lastThree">
        <div class="patient-entry">
            <span class="patient-name">one on top of the one</span>
            <span class="patient-date">MM/DD/YY</span>
            <span class="dots">...</span>
            <span class="line"></span>
        </div>
            <div class="patient-entry">
            <span class="patient-name">one on top of the two</span>
            <span class="patient-date">MM/DD/YY</span>
            <span class="dots">...</span>
            <span class="line"></span>
        </div>
            <div class="patient-entry">
            <span class="patient-name">one on top of the three</span>
            <span class="patient-date">MM/DD/YY</span>
            <span class="dots">...</span>
            <span class="line"></span>
        </div>
    </div>