Question 207154 in Html Question posted in
Some basic documentation can be found here.

Html – why the lower right white space is not filled by red

I’m trying to use named lines with grid to do the layout but it doesn’t work for me as it should I know where I went wrong because the red section doesn’t want to go next to the footer

* {
  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>
Tags:

2

Answers


  1. 0

    Change the value of your footer grid-column: footer-start / footer-end;

    * {
  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 / span 2;
  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>
    Login or Signup to reply.
  2. 0

    This is the layout: 

    <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 is what I thought you were expecting, so just in case, in this one the section spawns next 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>

    This is a simplified way of using the display grid property.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search