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

Sending Javascript Variable through Form

I'm a newcomer to JavaScript and struggling to solve a particular issue in my script. I need help passing the variable "outVal" to a PHP script when the submit form is clicked. The value of "outVal" should come from the "output" value in the script. I ...

javascripthtmlforms

I'm struggling to achieve the placement of my logo and navigation bar side by side

Check out the codes here body{ margin: 0; } .logo { text-indent: -999999px; background: url('logo3.png'); width: 216px; height: 219px; } .header{ width: 100%; height: auto; background-color: #eef3f5; padd ...

htmlcss

Expand the div to fit 100% width inside the Blueprint container

I am currently working on a website and considering using the Blueprint CSS framework. You can view the site I'm referencing here: http://jsfiddle.net/timkl/uaSe3/ The Blueprint framework allows for a nice 24 column grid layout. One challenge I&apos ...

cssblueprint-css

Tips on incorporating additional spacing between columns in Bootstrap 4

Is there a way to increase the distance between these two columns? <div class="row "> <div class="col-md-6 shadow"> ... </div> <div class="col-md-6 shadow "> ... </div> </div> ...

cssbootstrap-4

How can you trigger a modal to appear when an image is clicked?

There are images inside <div> tags. When one of the images is clicked, a modal appears to display information about the specific image. Each modal has a unique id or class, such as modal4. My example: <image type="image" src="Images/Drake.jpg" ...

htmlcssbootstrap-4

Displaying a loading indicator as content loads within the iframe

How to Display a Loading Indicator During Content Loading Within an iFrame: 1) When a postback or submit event occurs within a form inside the iFrame ...

asp.netjavascriptjqueryhtml

Four-region selection box

Is there a way to create a quad state checkbox without using a set of images for various icons? I know how to have a tri-state checkbox with indeterminate, but I need to rotate through 4 states. Are there any more elegant solutions available? ...

htmlcss

Concealing information based on the value of a variable

Creating a dynamic price estimator. I need help writing a jQuery function that can hide or show a specific div element based on the value of a variable. For example, let's say I have an HTML div with the ID 'Answer': <div id="answer"&g ...

javascriptjquerycsshideshow-hide

Verify the status of the internet button and display a message indicating whether it has been selected or not

I’ve been attempting to complete this task: opening this particular page in Python, and observing the outcome when the "Remote eligible" button is enabled; do any job positions appear or not? Here's the code I have so far, but it keeps throwing thi ...

pythonhtmlcssselenium-webdriverweb-scraping

Ensure that the file exists before including it in the $routeProvider template for ng-include

Using Angular routes, I have set up a system where the slug from the URL determines which file to load. The code looks like this: $routeProvider.when("/project/:slug", { controller: "ProjectController", template: function($routeParams){ return & ...

javascripthtmlangularjsnode.jsroutes

Mysterious attributes of angular 6's <table mat-table> tag

This particular question regarding the angular material table has not been duplicated in any other discussions. Other similar questions pertain to angular versions 2-5, not version 6 The issue I am encountering is as follows: Can't bind to 'dat ...

htmlangulartypescriptangular-material

How can I ensure that a button remains fixed at the bottom of a Material UI React Component?

I am currently working on developing a layout for a web application, and I have encountered an issue that I am struggling to resolve. The structure of my grid is as follows: My goal is to ensure that each section inside the card starts at the same point. ...

javascriptcssreactjswebmaterial-ui

Flexibility on smaller screens using Flexbox

On larger screens, I have arranged 4 icons in a row, but on smaller screens (less than 768px), I need to display only 2 icons in a row. This is my current code : .welcome { display: flex; justify-content: space-around; } @media (max-width: 768px) ...

htmlcssflexboxresponsive

Turn off automatic vertical scrolling when refreshing thumbnails with scrollIntoView()

My Image Gallery Slider has a feature that uses ScrollIntoView() for its thumbnails, but whenever I scroll up or down the page and a new thumbnail is selected, it brings the entire page back to the location of that thumbnail. Is there a way to turn off t ...

javascripthtmljquerycsssass

Element does not cross both explicit and implicit columns

When working in a grid container with only 1 column and 1 row, if there is an implicit column in the first row, how can an element in the second row (as shown by the green column in the example) span across both the explicit and implicit columns? I appreci ...

csscss-grid

Changing font color of a selected item in Material-UI's textview

I have a select textview in my react app and I am wondering how to change the font color after selecting an item from this textview. <div> <TextField id="standard-select-currency" select fullWidth l ...

javascriptcssreactjsmaterial-ui

Verify the tags associated with an element that has multiple tags

For a test I am conducting, I need to examine the tags and styles present in a specific element. The element, displayed on the page as bold, italic, and centered, looks like this: <p style="text-align: center;"> <em> <strong>TE ...

javahtmleclipseseleniumtags

Backgrounds filled by nested <li> elements inside another <li> element

My website features a sidebar menu with nested lists. When hovering over a list item, a sub-list appears. However, I am having an issue where the background color fills the entire sub-list instead of just the first list item. See the images below for clari ...

htmlcss

ISO 8 takes a different approach by disregarding the meta viewport tag and autonomously adjusts the website layout to

<meta name="viewport" content="width=device-width,initial-scale=0"> I am facing an issue with my code not running on iPhone 6 and causing a problem with the responsiveness of my site. Any suggestions on what steps I should take? The site is constru ...

cssiphonehtmltwitter-bootstrapiso

Customize your website with eye-catching full width colored blocks using Bootstrap 3

I am in need of colorful full-width blocks to differentiate the sections on my website. Currently, I am constructing my website with Bootstrap 3 within a standard container. However, I would like certain sections to be vibrant blocks that span across the ...

htmlcsstwitter-bootstrap