Почему элемент сетки не занимает несколько строк?

Question

У меня есть HTML-шаблон, подобный следующему:

<div class="my-grid-container">
    <div class="summary-card"  ng-repeat="cardData in summaryCardsCtrl.summaryDetails" >
        <div ng-include="'.....'"></div>
    </div>
</div>

В комплекте html выглядит так:

<div class="card">
    <div class="card-title" id="{{cardData.label}}">{{cardData.label}}</div>
    <div class="card-data">
        <div class="card-ico">
            .....
        </div>
        <div class="card-value">
            <span title="{{cardData.rawValue}}">{{cardData.value}}</span>
            <span>%</span>
        </div>
    </div>
</div>

Я хочу, чтобы первая карта занимала две строки , например:

Я использую CSS3 GridBox, как показано ниже :

.my-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.my-grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  max-height: 70px;
}

div.my-grid-container > div.card:first-child {
    grid-row: 1 / 2;
}

Но это не сработало до сих пор. Первый div не занимал две строки.

Что я делаю не так?

Answer 1

Ваш код:

div.my-grid-container > div.card:first-child {
    grid-row: 1 / 2;
}

Вы указываете, что элемент сетки должен охватывать от строки строки сетки 1 до строки строки сетки 2 . Это охватывает один ряд.

Если вы хотите охватить две строки, используйте вместо этого:

div.my-grid-container > div.card:first-child {
    grid-row: 1 / 3;
}

или это:

div.my-grid-container > div.card:first-child {
    grid-row: 1 / span 2;
}

---

Имейте в виду, что в каждой сетке количество строк строки равно количеству строк + 1, потому что в последней строке есть дополнительная (последняя) строка. То же самое относится и к столбцам.

Firefox предлагает полезный инструмент для просмотра этого.

В инструментах разработки Firefox при проверке контейнера сетки в объявлении CSS есть маленький значок сетки. При нажатии он отображает контур вашей сетки.

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts