Why is the lower right white space left unfilled by the color red?

I'm having issues with using named lines in grid for layout. The red section is not positioning correctly next to the footer, and I can't figure out where I went wrong.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
  grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
  gap: 10px;
  padding: 10px;
}

header {
  grid-column: header-start / header-end;
  background-color: blanchedalmond;
}

.content {
  grid-column: content-start / content-end;
  background-color: skyblue;
}

section {
  grid-column: section-start / section-end;
  background-color: coral;
}

footer {
  grid-column: footer-start / footer-end;
  background-color: lightseagreen;
}


/*centering*/
.content,
header,
section,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="grid2.css">
  <title>grid-line</title>
</head>

<body>
  <div class="container">
    <header class="header">
      HEADER
    </header>

    <div class="content">
      CONTENT
    </div>

    <section class="text">
      TEXT
    </section>

    <footer class="footer">
      FOOTER
    </footer>
  </div>
</body>

</html>

htmlcsslayoutfrontendgrid

Answer №1

Insert grid-row-end: span 2; within your section

CORRECTION: I initially misinterpreted the query, so I have updated the code snippet accordingly.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
  grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
  gap: 10px;
  padding: 10px;
}

header {
  grid-column: header-start / header-end;
  background-color: blanchedalmond;
}

.content {
  grid-column: content-start / content-end;
  background-color: skyblue;
}

section {
  grid-column: section-start / section-end;
  grid-row-end: span 2;  /* <----  INSERT THIS PART */
  background-color: coral;
}

footer {
  grid-column: footer-start / footer-end;
  background-color: lightseagreen;
}
/*centering*/
.content,
header,
section,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="container">
  <header class="header">
    HEADER
  </header>

  <div class="content">
    CONTENT
  </div>

  <section class="text">
    TEXT
  </section>

  <footer class="footer">
    FOOTER
  </footer>
</div>

Answer №2

Here is the layout structure:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="grid2.css">
  <title>grid-line</title>
  <style>
    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-columns:repeat(1, 1fr, 150px);
  grid-template-rows:repeat(3, 200px, 200px, 200px);
  grid-template-areas:
  "header header header header"
  "content content content section"
  "content content content section"
  "footer footer footer footer";
  gap: 10px;
  padding: 10px;
}

header {
  grid-area:header;
  background-color: blanchedalmond;
}
.content {
  grid-area:content;
  background-color: skyblue;
}

section {
  grid-area:section;
  background-color: coral;
}

footer {
  grid-area:footer;
  background-color: lightseagreen;
}


/*centering*/
.content,
header,
section,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
  </style>
</head>

<body>
  <div class="container">
    <header class="header">
      HEADER
    </header>

    <div class="content">
      CONTENT
    </div>

    <section class="text">
      TEXT
    </section>

    <footer class="footer">
      FOOTER
    </footer>
  </div>
</body>

</html>

This representation assumes that the section should be adjacent to the content:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="grid2.css">
  <title>grid-line</title>
  <style>
    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-columns:repeat(1, 1fr, 150px);
  grid-template-rows:repeat(3, 200px, 200px, 200px);
  grid-template-areas:
  "header header header header"
  "content content content section"
  "content content content section"
  "footer footer footer section";
  gap: 10px;
  padding: 10px;
}

header {
  grid-area:header;
  background-color: blanchedalmond;
}

.content {
  grid-area:content;
  background-color: skyblue;
}

section {
  grid-area:section;
  background-color: coral;
}

footer {
  grid-area:footer;
  background-color: lightseagreen;
}


/*centering*/
.content,
header,
section,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
  </style>
</head>

<body>
  <div class="container">
    <header class="header">
      HEADER
    </header>

    <div class="content">
      CONTENT
    </div>

    <section class="text">
      TEXT
    </section>

    <footer class="footer">
      FOOTER
    </footer>
  </div>
</body>

</html>

A simplified approach to utilizing the display grid property.

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

Leverage scope variables and dynamic CSS properties when using ngClass

Is there a way to manipulate the CSS dynamically in HTML using a scope variable? <div ng-class="myClassScope, { 'dynamic-class': !ifIsNot }"> ...

cssangularjsangularjs-scopeng-class

C#: Issues with loading static content in MVC on various environments with IIS

Within my C# MVC 4.5 Website, I recently introduced a new folder to host CMS-type applications separately from the main site. While everything seemed fine during local testing, issues arose after deploying the updates to the DEV environment. A closer look ...

c#cssasp.netasp.net-mvciis

preventing the ball from landing inside the container (JavaScript)

I developed a straightforward website with the following functionality: Upon entering any text into the prompt and clicking okay, a ball will drop into the 1st box, namely the Past Thoughts box. Below is the code snippet: HTML <h1> Welcome t ...

javascripthtmlcss

What steps can I take to ensure that the browser prints out a PDF copy of a webpage?

Imagine you have a website page saved as example.html, and also a printable file named example.pdf. Is there a way to prompt the browser to open and print example.pdf instead of example.html when users attempt to print? If this isn't achievable, how ...

javascripthtmlprinting

Is there a way to extract the HTMLElement[] type from the DOM?

In my TypeScript project, I am trying to gather all the top-level elements of a page using the code snippet below: const getHTMLElement() : HTMLElement[] { const doc = document.body.children; const list : HTMLElement[] = []; for (let c of Array.f ...

htmltypescriptdom

Unusual shift in the modal's behavior occurs when the parent component's style.transform is applied

I have encountered an unusual issue with a modal's appearance and functionality. The modal is designed to enlarge images sent in a chat, with the chat upload preview div serving as the parent element and the modal as the child element. This strange be ...

javascriptcssreactjscss-transforms

Once the if condition is implemented, the functionality of the toggle button ceases to operate

Take a look at this demo link: http://jsbin.com/labuxuziraya/1/edit I encountered an issue where the button stops working after adding an if condition. I suspect there are some minor bugs in the code, but my level of experience is not enough to pinpoint t ...

javascriptjqueryhtmlcss

There was an error in calculating the Foundation 5 - 1170 grid

Currently, I am in the process of learning Foundation 5 and working on an app that utilizes a 1170 grid system. The app has 70px columns and 30px gutters (which equals to 1170 when calculated as 70 * 12 + 30 * 11). However, after setting the default values ...

htmlcsssasszurb-foundation

The Bootstrap navigation bar is experiencing issues and is not functioning properly, as the classes are not

<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" d ...

jquerycssbootstrap-4

Using Jquery to encase an element in a div while scrolling down and removing it while scrolling up

After some experimentation, I've managed to wrap an element inside a div using jQuery. My next challenge is to wrap it as you scroll down and unwrap it as you scroll up. Do you think this is achievable? Although I have succeeded in wrapping it while ...

javascriptjqueryhtmlcss

jQuery form validation not functioning as expected

I'm attempting jQuery form validation but encountering issues with the desired functionality. I would like the border of an input to turn red when it's empty upon focus out. Alternatively, I aim to incorporate the "has-danger" bootstrap class to ...

javascriptjqueryhtmlcssfrontend

Is it possible to showcase a FullCalendar event in full width while being positioned behind other events scheduled for the same time slot?

Is there a way to customize FullCalendar so that concurrent events in the same timeslot are not vertically divided? I have a Google calendar named "time-blocking template" where I want all events to take up 100% of the timeslot width, even if there are ot ...

jquerycssfullcalendar

Is it possible for the relative path of a gif image to become invalid when added to a div?

Question Context: In the view, I have a form that will show a loading 'spinner' gif when a user submits it. The Problem: If I place the spinner img element within its container div, the spinner is always displayed, which is not desired: https ...

javascriptjqueryhtmlasp.net-mvcrazor

What steps should be followed to make progress bar function properly?

Currently, I am delving into the world of Angular and attempting to craft a progress bar using a directive: var module = angular.module("app", []); module.directive("progressbar", function () { return { restrict: "A", link: function (s ...

angularjshtmltwitter-bootstrap-3

Creating the appearance of a white sheet of paper on a computer screen

I appreciate all the comments provided earlier. Looking back, I realize I should have been more thorough in my explanation. Hopefully, the updated version will make things clearer. On a broad level, my goal is to create a digital screen background that re ...

htmlcsscolors

Click on the link within the Checkbox label on MUI

I am working on creating a checkbox for the "Terms of Use," using FormControlLabel to nest a Checkbox. However, I also need to include a link that opens a Dialog component displaying the terms. The challenge is that clicking on the link checks the checkbox ...

javascripthtmlreactjsmaterial-ui

``Navigating the gaps: Finding balance between navigation links

I'm struggling with creating spacing between my navigation links, specifically wanting to add space between each link that is bordered with a black border. I've looked online for solutions but all I find are ways to reduce space instead of adding ...

htmlcss

What is the correct way to utilize Bootstrap grid offsets?

Recently, I have been working on a webpage that features a unique layout using Bootstrap grid rows. Each row consists of a paragraph of text and an image. The layout is designed to have the text occupy specific columns on large screens, with the image shif ...

htmlcssbootstrap-5

Click on the link or tab to update the marker location on the Google Map

Can you click on Tab 2 to change the marker/location, and then go back to Tab 1 to switch it back to the original location? [Links to Fiddle] http://jsfiddle.net/ye3x8/ function initialize() { var styles = [{ stylers: [{ saturati ...

javascripthtmlgoogle-mapsjsfiddle

JQuery is failing to locate elements that have dynamic data titles assigned to them

I've been attempting to locate an element using a jQuery regex comparison in the data title. My situation involves having divs with the class .textbox, each containing a dynamically generated data title. To target specific boxes with that particular d ...

jqueryhtmlfindarabic