csscss-grid

Make height of grid row adaptive for content

I have a page layout with 3 columns. On desktop, header might take more than one line and when it's multiple lines, it overflows the second row. How do I make the first row height adjust to content height? How do I start second row only after the first row ends? Here's my Codepend. Here's my code:

.grid {
    display: grid;
    grid:
        "header"
        "image"
        "box"
        "table";
    grid-template-rows: 4 (auto);
    gap: 1rem;
    border: 1px solid #000;
}

.area-header {
    grid-area: header;
    border: 1px solid #000;
    background-color: red;
    margin: 0;
}

.area-image {
    grid-area: image;
    border: 1px solid #000;
}

.area-box {
    grid-area: box;
    border: 1px solid #000;
    background-color: pink;
}

.area-table {
    grid-area: table;
    border: 1px solid #000;
    background-color: purple;
    color: white;
}

@media screen and (min-width: 768px) {
    .grid {
        display: grid;
        grid-template-areas:
            "image header box"
            ". table .";
        grid-template-rows: 40px 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 0;
        margin-top: 80px;
    }
}
<div class="grid">
    <h1 class="area-header">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Maecenas in aliquet quam. Sed ac lectus scelerisque, maximus
        nulla eu, fringilla.
    </h1>
    <img src="https://i.ibb.co/6yzWVry/rectangle.png" class="area-image" />
    <div class="area-box">
        <p>content</p>
    </div>
    <table class="area-table">
        <tr>
            <td>table</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</div>

Here's the screenshot of what I talked about. I want table to start only after the title. enter image description here

Solution

  • The solution has 2 parts. Part 1 is fixing your grid-template-rows. Part 2 is fixing your grid-template-areas.

    Part 1

    Your header text is overflowing because you specified that the first row is only 40 pixels tall. Naturally, any text that extends beyond that will overflow. If you want the height of the first row to fit, don't use a set amount—use either min-content or fit-content. But now a new problem arises:

    Part 2

    Now the header and content boxes take up a lot of vertical space without needing to. That's because min-content will extend the row to whatever it needs to fit the largest cell, and the largest cell is the image box. The .area-image cell is defined to occupy the top left corner, so the whole row has to extend to match its height (notice how the red and pink boxes extend to match the height of the gray rectangle). The solution to this is to just allow that image to take up the full left column. That way, the image box doesn't contribute to the consideration for min-content, so the first row will be the maximum height between the header box and the content box.

    .grid {
    display: grid;
    grid:
        "header"
        "image"
        "box"
        "table";
    grid-template-rows: 4 (auto);
    gap: 1rem;
    border: 1px solid #000;
}

.area-header {
    grid-area: header;
    border: 1px solid #000;
    background-color: red;
    margin: 0;
}

.area-image {
    grid-area: image;
    border: 1px solid #000;
}

.area-box {
    grid-area: box;
    border: 1px solid #000;
    background-color: pink;
}

.area-table {
    grid-area: table;
    border: 1px solid #000;
    background-color: purple;
    color: white;
}

@media screen and (min-width: 768px) {
    .grid {
        display: grid;
        grid-template-areas:
            "image header box"
            "image table .";
        grid-template-rows: min-content 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 0;
        margin-top: 80px;
    }
}
    <div class="grid">
    <h1 class="area-header">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Maecenas in aliquet quam. Sed ac lectus scelerisque, maximus
        nulla eu, fringilla.
    </h1>
    <img
        src="https://i.ibb.co/6yzWVry/rectangle.png"
        class="area-image"
    />
    <div class="area-box">
        <p>content</p>
    </div>
    <table class="area-table">
        <tr>
            <td>table</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</div>