Ways to expand the height of content using grid?

I'm having trouble getting my grid template to stretch content to the end using CSS Grid. The behavior is unexpected, and I want to create a Jeopardy game where clicking on a box reveals a question.

Initially, I applied display: grid to the body element.

Note that I do not want to involve the ::after pseudo-element in this issue.

body {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(5, 20%);

    height: 100vh;
}

.question-block {
      /* attempting to stretch content */
        grid-row: 1/-1;
}

Below is a snippet of the code:

* {
    box-sizing: border-box;
}

body {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(5, 20%);

    height: 100vh;
}

p {
    margin: 0;
}

.question-block {
  /* attempting to stretch content */
    grid-row: 1/-1;
}

.question-block * {
    border: 2px solid black;
}

.category {
    padding: 1em;
    word-wrap: break-word;
    font-size: max(1rem, min(1rem + 3vw, 3.5rem));
}

.question {
    font-size: 0;
}

.q100::after {
    content: "100$";
}

.q200::after {
    content: "200$";
}

.q300::after {
    content: "300$";
}

.q400::after {
    content: "400$";
}

.text-helper::after {
    display: block;
    padding-block: 0;

    text-align: center;
    font-size: max(1.5rem, min(1rem + 3vw, 5rem));
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
    <link rel="stylesheet" href="style/style.css" />
    <title>Jeopardy</title>
</head>

<body>
    <div class="question-block">
        <p class="category">Entertainment: Television</p>
        <p class="question q100 text-helper">AMC's "The Walking Dead", Rick, Carl, Daryl, Morgan, Carol and Maggie were
            introduced to us in Season 1.</p>
        <p class="question q200 text-helper">In the TV series Red Dwarf, Kryten's full name is Kryten 2X4B-523P.</p>
        <p class="question q300 text-helper">Like his character in "Parks and Recreation", Aziz Ansari was born in South
            Carolina.</p>
        <p class="question q400 text-helper">In "Star Trek", Klingons respect William Shakespeare, they even suspect him
            having a Klingon lineage.</p>
    </div>
    <div class="question-block">
        <p class="category">Science: Computers</p>
        <p class="question q100 text-helper">The very first recorded computer "bug" was a moth found inside a Harvard
            Mark II computer.</p>
        <p class="question q200 text-helper">Linus Torvalds created Linux and Git.</p>
        <p class="question q300 text-helper">It's not possible to format a write-protected DVD-R Hard Disk.</p>
        <p class="question q400 text-helper">The Python programming language gets its name from the British comedy group
            "Monty Python."</p>
    </div>
    <div class="question-block">
        <p class="category">Vehicles</p>
        <p class="question q100 text-helper">Arriva is owned by the Deutsche Bahn.</p>
        <p class="question q200 text-helper">Ferrari has never made a V10 engine for any of its cars.</p>
        <p class="question q300 text-helper">The General Motors EV1 was the first street-legal production electric
            vehicle.</p>
        <p class="question q400 text-helper">BMW M GmbH is a subsidiary of BMW AG that focuses on car performance.</p>
    </div>
    <div class="question-block">
        <p class="category">Entertainment: Board Games</p>
        <p class="question q100 text-helper">In the game "Racko" you may pick up ANY card from the discard pile.</p>
        <p class="question q200 text-helper">The Angry Video Game Nerd's alter ego is "Board James".</p>
        <p class="question q300 text-helper">"PAYDAY: The Heist" is a sequel to the board game "Payday".</p>
        <p class="question q400 text-helper">The board game Go has more possible legal positions than the number of
            atoms in the visible universe.</p>
    </div>

    <!-- <script src="js/index.js"></script> -->
</body>

</html>

When I change .question-block to display: grid, it causes content overlapping issues. Below is the updated code:

    * {
        box-sizing: border-box;
    }

    body {
        display: grid;
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: repeat(5, 20%);

        height: 100vh;
    }

    p {
        margin: 0;
    }

    .question-block {
      /* attempting to stretch content */
      
      /* modified property here */
      display: grid;
      /* above */
      
        grid-row: 1/-1;
    }

    .question-block * {
        border: 2px solid black;
    }

    .category {
        padding: 1em;
        word-wrap: break-word;
        font-size: max(1rem, min(1rem + 3vw, 3.5rem));
    }

    .question {
        font-size: 0;
    }

    .q100::after {
        content: "100$";
    }

    .q200::after {
        content: "200$";
    }

    .q300::after {
        content: "300$";
    }

    .q400::after {
        content: "400$";
    }

    .text-helper::after {
        display: block;
        padding-block: 0;

        text-align: center;
        font-size: max(1.5rem, min(1rem + 3vw, 5rem));
    }
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
        <link rel="stylesheet" href="style/style.css" />
        <title>Jeopardy</title>
    </head>

    <body>
        <div class="question-block">
            <p class="category">Entertainment: Television</p>
            <p class="question q100 text-helper">AMC's "The Walking Dead", Rick, Carl, Daryl, Morgan, Carol and Maggie were
                introduced to us in Season 1.</p>
            <p class="question q200 text-helper">In the TV series Red Dwarf, Kryten's full name is Kryten 2X4B-523P.</p>
            <p class="question q300 text-helper">Like his character in "Parks and Recreation", Aziz Ansari was born in South
                Carolina.</p>
            <p class="question q400 text-helper">In "Star Trek", Klingons respect William Shakespeare, they even suspect him
                having a Klingon lineage.</p>
        </div>
        <div class="question-block">
            <p class="category">Science: Computers</p>
            <p class="question q100 text-helper">The very first recorded computer "bug" was a moth found inside a Harvard
                Mark II computer.</p>
            <p class="question q200 text-helper">Linus Torvalds created Linux and Git.</p>
            <p class="question q300 text-helper">It's not possible to format a write-protected DVD-R Hard Disk.</p>
            <p class="question q400 text-helper">The Python programming language gets its name from the British comedy group
                "Monty Python."</p>
        </div>
        <div class="question-block">
            <p class="category">Vehicles</p>
            <p class="question q100 text-helper">Arriva is owned by the Deutsche Bahn.</p>
            <p class="question q200 text-helper">Ferrari has never made a V10 engine for any of its cars.</p>
            <p class="question q300 text-helper">The General Motors EV1 was the first street-legal production electric
                vehicle.</p>
            <p class="question q400 text-helper">BMW M GmbH is a subsidiary of BMW AG that focuses on car performance.</p>
        </div>
        <div class="question-block">
            <p class="category">Entertainment: Board Games</p>
            <p class="question q100 text-helper">In the game "Racko" you may pick up ANY card from the discard pile.</p>
            <p class="question q200 text-helper">The Angry Video Game Nerd's alter ego is "Board James".</p>
            <p class="question q300 text-helper">"PAYDAY: The Heist" is a sequel to the board game "Payday".</p>
            <p class="question q400 text-helper">The board game Go has more possible legal positions than the number of
                atoms in the visible universe.</p>
        </div>

        <!-- <script src="js/index.js"></script> -->
    </body>

    </html>

htmlcsscss-grid

Answer №1

I successfully solved the problem.

All questions were organized within a 

<div class="questions">
with specific styling applied to it.

.questions {
        height: 100%;
        display: grid;
        grid-template-rows: repeat(4, 17%);
    }


* {
        box-sizing: border-box;
    }

    body {
        display: grid;
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: repeat(5, 20%);

        height: 100vh;
    }

    p {
        margin: 0;
    }

    .question-block {
      /* not doing the trick */
      
      /* only change here */
      display: grid;
      /* above */
      
        grid-row: 1/-1;
    }

    .question-block * {
        border: 2px solid black;
    }

  .category {
    height: 35%;
    padding: 0.3em;
    word-wrap: break-word;
    font-size: max(1rem, min(1rem + 3vw, 3rem));
}

.questions {
    height: 100%;
    display: grid;
    grid-template-rows: repeat(4, 20%);
}

    .question {
        font-size: 0;
    }

    .q100::after {
        content: "100$";
    }

    .q200::after {
        content: "200$";
    }

    .q300::after {
        content: "300$";
    }

    .q400::after {
        content: "400$";
    }

    .text-helper::after {
        display: block;
        padding-block: 0;

        text-align: center;
        font-size: max(1.5rem, min(1rem + 3vw, 5rem));
    }
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
        <link rel="stylesheet" href="style/style.css" />
        <title>Jeopardy</title>
    </head>

    <body>
        <div class="question-block">
            <p class="category">Television</p>
            <div class="questions">
            <p class="question q100 text-helper">AMC's "The Walking Dead", Rick, Carl, Daryl, Morgan, Carol and Maggie were
                introduced in Season 1.</p>
            <p class="question q200 text-helper">In the TV series Red Dwarf, Kryten's full name is Kryten 2X4B-523P.</p>
            <p class="question q300 text-helper">Aziz Ansari, like his character in "Parks and Recreation," was born in South
                Carolina.</p>
            <p class="question q400 text-helper">In "Star Trek," Klingons have a deep respect for William Shakespeare, suspecting he may even have Klingon lineage.</p>
            </div>
        </div>
                <div class="question-block">
            <p class="category">Television</p>
            <div class="questions">
            <p class="question q100 text-helper">AMC's "The Walking Dead", Rick, Carl, Daryl, Morgan, Carol and Maggie were
                introduced in Season 1.</p>
            <p class="question q200 text-helper">In the TV series Red Dwarf, Kryten's full name is Kryten 2X4B-523P.</p>
            <p class="question q300 text-helper">Aziz Ansari, like his character in "Parks and Recreation," was born in South
                Carolina.</p>
            <p class="question q400 text-helper">In "Star Trek," Klingons have a deep respect for William Shakespeare, suspecting he may even have Klingon lineage.</p>
            </div>
        </div>
                <div class="question-block">
            <p class="category">Television</p>
            <div class="questions">
            <p class="question q100 text-helper">AMC's "The Walking Dead", Rick, Carl, Daryl, Morgan, Carol and Maggie were
                introduced in Season 1.</p>
            <p class="question q200 text-helper">In the TV series Red Dwarf, Kryten's full name is Kryten 2X4B-523P.</p>
            <p class="question q300 text-helper">Aziz Ansari, like his character in "Parks and Recreation," was born in South
                Carolina.</p>
            <p class="question q400 text-helper">In "Star Trek," Klingons have a deep respect for William Shakespeare, suspecting he may even have Klingon lineage.</p>
            </div>
        </div>
                <div class="question-block">
            <p class="category">Television</p>
            <div class="questions">
            <p class="question q100 text-helper">AMC's "The Walking Dead", Rick, Carl, Daryl, Morgan, Carol and Maggie were
                introduced in Season 1.</p>
            <p class="question q200 text-helper">In the TV series Red Dwarf, Kryten's full name is Kryten 2X4B-523P.</p>
            <p class="question q300 text-helper">Aziz Ansari, like his character in "Parks and Recreation," was born in South
                Carolina.</p>
            <p class="question q400 text-helper">In "Star Trek," Klingons have a deep respect for William Shakespeare, suspecting he may even have Klingon lineage.</p>
            </div>
        </div>

        <!-- <script src="js/index.js"></script> -->
    </body>

    </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimizing VueJS applications with browser caching features for faster loading

I've encountered an issue with my VueJS app. After running npm run build, a new set of dist/* files are generated. However, when I upload them to the server (replacing the old build) and try to access the page in the browser, it seems to be loading th ...

htmlvue.jsbrowser-cache

Problem with Angular Slider

I'm in the process of creating a carousel component in Angular, but I'm facing an issue where the carousel is not appearing as it should. Below is the code for my carousel component. carousel.component.html: <div class="carousel"> ...

htmlcssangulartypescriptslider

Attempting to extract information from a webpage that contains multiple data tables, but encountering an issue where only the first table is successfully scraped

For my current project, I am attempting to extract data from basketball players' profiles on Basketball-Reference. Each player page on B-R contains several tables of valuable information that I need to access. However, when trying to extract the table ...

pythonhtmlbeautifulsoupxml-parsinghtml-parsing

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssangulartwitter-bootstrap

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

My webpage contains a div element positioned in the middle of the content, with its height being adjustable through JavaScript code. I am seeking a way to manage the scrolling behavior when the height of the div changes. Specifically, I want the content t ...

javascripthtmlcss

Angular is unable to fetch the chosen option from a dropdown selection

Recently, I encountered an issue with a module form that appears as a pop-up. Within this form, users can input data required to create a new object of a specific class. One field allows users to select a ventilation zone for the new room object being crea ...

htmlangulartypescriptforms

Tips for removing the Y-Axis entirely from a CanavasJS chart

I'm working with a canvasJS chart and my goal is to completely hide the Y-Axis. I've managed to remove the Y-Axis line and title in this JSFiddle example. I came across these properties to hide the Y-Axis title and line, but I'm struggling t ...

javascripthtmltypescriptjsfiddlecanvasjs

If a specific class is identified, add a border to the div when clicked using JavaScript

Is there a way to use javascript/jquery to add a border to a selected div? I have multiple rows with columns, and I want only one column per row to be highlighted with a border when clicked. Each row should have one column with a border, so it's clear ...

javascriptjquerycssborderaddition

What is the best way to guide a user to a specific page based on the choice they made after submitting a form?

My form includes a list of 6 options where users can only select one. After submitting the form, I want to redirect them to a specific page based on their selection. For example, I have the following 3 options: Facebook Youtube Twitter If a user selects ...

javascripthtmlcssjss

Spaces ahead and beneath the text

I'm struggling to style a small block of text within its element perfectly. Despite my efforts, there always seems to be unnecessary space in front and below the words. One workaround I found was adjusting the line height to remove the bottom gap, but ...

htmlcss

The issue with the Hidden Content feature in the Slick Carousel is that it does not function correctly on the

There are some related topics worth exploring, such as: Slick carousel center class not working when going from last item to first item Despite trying various solutions, the issue still persists in my code. My goal is to have each item displayed in the ce ...

javascripthtmljquerycssslick.js

Guide on showcasing an array of objects in HTML with the help of the template element

My goal was to populate the HTML page with an array of objects using the template element. However, I made a mistake and only the last object in the array was displayed correctly on the page. Can anyone help me identify my error and suggest a correction? I ...

javascripthtml

What steps can I take to ensure that this list remains fixed at the bottom of the page?

Looking to have this content positioned at the very bottom of my webpage without any empty space below it. I'm having trouble applying the usual CSS to achieve this. .footer li{ display:inline; } <footer> <div cla ...

htmlcss

I'm trying to figure out how to retrieve data from a JQuery autocomplete response that contains an array. Specifically, I want

https://i.stack.imgur.com/YpuJl.pngThis form field is for entering text input. <span> <img src="images/author2.jpg" width="50" /> //The profile picture displayed here is static but in the database I have a dynamic image. <input class="sea ...

phphtmlarraysajax

Intercepting 401 with Angular 5 HTTP Interceptor recognizes it as status code 0

One issue I am currently facing is the inability to intercept a 401 status and redirect to the login page, which is a common practice in most applications. My interceptor code seems pretty standard: intercept(request: HttpRequest<any&g ...

htmlcssangularhttp

Adding an arrow to a Material UI popover similar to a Tooltip

Can an Arrow be added to the Popover similar to the one in the ToolTip? https://i.stack.imgur.com/syWfg.png https://i.stack.imgur.com/4vBpC.png Is it possible to include an Arrow in the design of the Popover? ...

javascriptcssreactjstypescriptmaterial-ui

Enhancing ag-grid with alternating row group colors following row span

My data structure is shown below: https://i.stack.imgur.com/fy5tn.png The column spanning functionality in ag-grid is working for columns 1 and 2 as expected. However, I am looking to implement alternate row colors based on the values in column 2 (animal ...

javascriptpythoncssag-grid

How can I remove a dynamically added <tr> element using jQuery?

I insert the <tr> into the <tbody> for (var i = 0 ;i < 12 ;i++){ $(`<tr><td>test</td></tr>`).appendTo('#songsTbody'); } within this HTML structure. <tbody id="songsTbody"> </tbody> ...

javascripthtmljquery

Height of dropdown items in the horizontal navbar

I am working on a navbar that includes a dropdown menu. Currently, the dropdown items are being displayed horizontally in full width with a larger height. However, I would like them to be displayed vertically in full width and with a smaller, normal height ...

csstwitter-bootstrap-3

Having trouble with Javascript in getting one-page scroll navigation to work?

Hey there, I am working on creating a one-page scroll navigation with some basic javascript to add a smooth animation effect that takes 1 second as it scrolls to the desired section. However, I seem to be experiencing an issue where it's not functioni ...

javascriptjqueryhtmlcss