0

I have created a site design and everything is okay except that I am having problem in getting the grid items to occupy all the space available to them.

I have added the site in codepen here.

.container{
    border-radius: 8px;
    width:90%;
    height: 90vh;
    margin: 0 auto;
    background: #ecf0f1;

    display: flex;
    flex-direction: column;
}

main{
    display: grid;
    grid-template-columns: 300px 1fr;
    flex-grow: 1;
}

.data-box{
    padding-top:1rem; 
    background: #e74c3c;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3rem 2.5rem 2.5rem auto;
    justify-items: center;
    align-items: center;

}

.display-box{
    padding: 2em;
    background: #2c3e50;

    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(6em,1fr));
    grid-gap:1.5rem;
    align-items: center;
    justify-items: center;
}

HTML:

 <div class="container">
        <div class="main-text">
            <h1>Smart Parking System UI</h1>
            <p>Currently viewing: <span class="lot-id">Beta</span></p>
        </div>
        <main>
            <div class="data-box">
                <p class="m-para">Parking Status</p>
                <p class="total-para">Total Seats:</p><span class="total-data">15</span>
                <p class="avail-para">Available: </p><span class="avail-data">12</span>
                <div class="location">
                        <p>Your Location:</p><i class="fas fa-map-marker-alt"></i><p>Asgard</p>
                </div>
            </div>
            <div class="display-box">
                <div class="lot-box inactive">1</div>
                <div class="lot-box">2</div>
                <div class="lot-box">3</div>
                <div class="lot-box">4</div>
                <div class="lot-box">5</div>
                <div class="lot-box">6</div>
                <div class="lot-box">7</div>
                <div class="lot-box">8</div>
                <div class="lot-box">9</div>
                <div class="lot-box inactive">10</div>
                <div class="lot-box inactive">11</div>
                <div class="lot-box">12</div>
                <div class="lot-box">13</div>
                <div class="lot-box">14</div>
                <div class="lot-box">15</div>

            </div>
        </main>
    </div>

The problem can be noticed in full page view. The container div is a flexbox and contains the main-text div with flex-grow 0 and main tag with flex-grow 1. The main tag is a grid container with two grid items display-box and data-box. I am having difficulty in making them occupy all the space available to them in main tag as seen by the white blankspace.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
rustyelectron
  • 1
  • 1
  • 4

1 Answers1

2

The main element actually is stretching the full height of the container. In other words, flex-grow: 1 is working. (You may know this already.) The child elements (data-box and display-box) are not stretching the full height of the parent because they simply don't have enough content in them yet.

You also have data-box set to:

grid-template-rows: 3rem 2.5rem 2.5rem auto;

That creates four rows of a defined or content-based height. Using fr units covers available space.

grid-template-rows: 3fr 2fr 1fr auto;

revised codepen

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • In case of `grid-template-rows: 1fr 1fr 1fr auto`, the white space appears again. How do i fix it such that the auto part gets the rest of the space. – rustyelectron Jul 16 '18 at 20:15
  • also for `grid-template-rows: 1fr auto auto auto 1fr` – rustyelectron Jul 16 '18 at 20:21
  • I have gone through your question and code again. It's possible that my original answer was incorrect or, more specifically, a workaround, not a solution. – Michael Benjamin Jul 17 '18 at 14:09
  • Instead of `flex-grow: 1` on the `main` element, try `flex: 1` ([revised codepen](https://codepen.io/anon/pen/EpyVvY)). Here's an explanation (see the "Examples" in my answer): https://stackoverflow.com/q/43520932/3597276 – Michael Benjamin Jul 17 '18 at 14:14
  • Also note that the problem is Chrome-specific. I don't think the problem exists in Firefox of Edge. – Michael Benjamin Jul 17 '18 at 14:17