Why is my grid item not spanning multiple rows? - html

Question

I have a html template like the following:
<div class="my-grid-container">
<div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails" >
<div ng-include="'.....'"></div>
</div>
</div>
The included html looks like:
<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>
I want the first card to span for two rows, like:
I am using CSS3 GridBox like the following:
.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;
}
But it did not work till now. First div did not span two rows.
What am I doing wrong?

Answer 1

Your code:
div.my-grid-container > div.card:first-child {
grid-row: 1 / 2;
}
You're telling the grid item to span from grid row line 1 to grid row line 2. That spans one row.
If you want to span two rows, then use this instead:
div.my-grid-container > div.card:first-child {
grid-row: 1 / 3;
}
or this:
div.my-grid-container > div.card:first-child {
grid-row: 1 / span 2;
}
Keep in mind that in every grid the number of row lines is equal to the number of rows + 1, because the last row has an extra (final) line. The same concept applies to columns.
Firefox offers a useful tool for seeing this.
In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid.
More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts