CODEWITHSUNDEEP
htmltwitter-bootstrapcsscss-grid
StrugglingCoder
StrugglingCoder

Reputation: 5021

Why is my grid item not spanning multiple rows?

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:

enter image description here

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.

enter image description here

What am I doing wrong?

Upvotes: 0

Views: 3883

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372244

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.

enter image description here

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Upvotes: 4

Related Questions