CSS Grid: как растянуть ячейку сетки по ширине родительского элемента? - ProgramBox

ProgramBox

CSS Grid: как растянуть ячейку сетки по ширине родительского элемента?

Post author:admin
Запись опубликована:15 апреля, 2023
Post category:Вопросы по программированию

#css #css-grid

#css #css-сетка

Вопрос:

CSS Grid: как растянуть ячейку сетки по ширине родительского элемента?

В следующем CSS-коде #nav { } не позволяет элементу #nav охватывать всю ширину родительского элемента по горизонтали. Похоже, что она занимала бы всю ширину родительского элемента, если бы элемент #nav содержал больше содержимого. Есть ли способ заставить этот элемент занимать весь экран, используя только содержимое в приведенном ниже HTML-формате?

Буду признателен за любую помощь.

CSS:

 html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.body  {
  display: grid;
  grid-template-rows: fr, fr, fr, fr, fr;
  grid-template-columns: fr, fr;

  grid-template-areas:
  "header header"
  "nav nav"
  "main details"
  "about aside"
  "footer footer";

  color: white;
  background-color: hsl(0, 100%, 28%);
  font-family: verdana, sans-serif;
}

@media only screen and (max-width: 768px) {
  .body {
    display: block;
  }
}

#planb {
  background-color: grey;
}

#header {
  display: flex;
  flex-direction: row;
  grid-area: header;
  justify-content: space-evenly;
  color: gold;
}

#nav {
  display: flex;
  flex-direction: row;
  grid-area: nav;
  justify-content: space-evenly;
  list-style-type: none;
  background-color: black;
}

#main {
  grid-area: main;
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 5%;
  padding-bottom: 5%;
  color: gold;
  border: solid 1px;

}

#details {
  grid-area: details;
  margin-right: 10%;
  margin-left: 10%;

}

#about {
  grid-area: about;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

#aside {
  grid-area: aside;
  margin-top: 5%;
  margin-left: 10%;
  padding-top: 1.7%;
}

#footer{
  grid-area: footer;
  margin-top: 5%;
  margin-left: 10%;
}

li {
  padding-right: 1 rem;
}

th {
  text-align: left;
}

td {
  text-align: right;
  color: white;
}

dt {
  font-weight: bold;
}

a:link, a:visited {
  color: gold;
}

a:focus, a:hover, a:active {
  color: grey;
}

#header, #nav, #main, #details, #about, #aside {
  border: solid 1px;
}

HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body class="body">
  <header id="header">
    <p>this is the header</p>
  </header>
  <nav>
    <ul id="nav">
      <li><a href="/">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="main">
    <main>
      <table>
        <tr>
          <th><p>this is the table</p></th>
        </tr>
      </table>
    </main>
  </section>
  <section id="details">
    <p>this is the details</p>
  </section>
  <section id="about">
    <p>this is the about</p>
  </section>
  <aside id="aside">
    <p>this is the aside</p>
  </aside>
  <footer id="footer">
    <p>this is the footer</p>
  </footer>
</body>
</html>

Ответ №1:

Решение:

Переместите атрибут id id="nav" из <ul> элемента в <nav> элемент.

CSS:

 html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.body  {
  display: grid;
  grid-template-rows: fr, fr, fr, fr, fr;
  grid-template-columns: fr, fr;

  grid-template-areas:
  "header header"
  "nav nav"
  "main details"
  "about aside"
  "footer footer";

  color: white;
  background-color: hsl(0, 100%, 28%);
  font-family: verdana, sans-serif;
}

@media only screen and (max-width: 768px) {
  .body {
    display: block;
  }
}

#planb {
  background-color: grey;
}

#header {
  display: flex;
  flex-direction: row;
  grid-area: header;
  justify-content: space-evenly;
  color: gold;
}

#nav {
  grid-area: nav;
  color: gold;
  background-color: black;
}

#nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style: none;
  color: gold;
}

#main {
  grid-area: main;
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 5%;
  padding-bottom: 5%;
  color: gold;
  border: solid 1px;

}

#details {
  grid-area: details;
  margin-right: 10%;
  margin-left: 10%;

}

#about {
  grid-area: about;
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
}

#aside {
  grid-area: aside;
  margin-top: 5%;
  margin-left: 10%;
}

#footer{
  grid-area: footer;
  margin-top: 5%;
  margin-left: 10%;
}

#header, #nav, #main, #details, #about, #aside, #footer {
  border: solid 1px;
  height: 100%;
  width: 100%
}

th {
  text-align: left;
}

td {
  text-align: right;
  color: white;
}

dt {
  font-weight: bold;
}

a:link, a:visited {
  color: gold;
}

a:focus, a:hover, a:active {
  color: grey;
}

HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body class="body">
  <header id="header">
    <p>this is the header</p>
  </header>
  <nav id="nav">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="main">
    <main>
      <table>
        <tr>
          <th><p>this is the table</p></th>
        </tr>
      </table>
    </main>
  </section>
  <section id="details">
    <p>this is the details</p>
  </section>
  <section id="about">
    <p>this is the about</p>
  </section>
  <aside id="aside">
    <p>this is the aside</p>
  </aside>
  <footer id="footer">
    <p>this is the footer</p>
  </footer>
</body>
</html>