Растянуть строку по всем столбцам в CSS Grid

У меня возникли проблемы с тем, чтобы моя навигационная система полностью растянулась по моим столбцам, несмотря на то, что я указал, какие столбцы я хотел бы растянуть навигацию, если бы вы могли взглянуть на мой код и указать на мою ошибку, которая могла бы будь офигенным.

Вот изображение HTML-файла в браузере

Веб-пример

body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / 2;
  grid-row: 1 / 1;
  background-color: #5eccc0;
}

.navul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navli {
  float: left;
  text-align: center;
}

.navli a {
  display: block;
  text-decoration: none;
}

main {
  grid-column: 1 / 1;
  grid-row: 2 / 2;
  background-color: #ffff77;
}

.sidebar {
  background-color: #b200a4;
  grid-column: 2 / 2;
  grid-row: 2 / 2;
}
<div class="container">
  <nav class="mainnav">
    <ul class="navul">
      <li class="navli"><a href="index.html">Home</a></li>
      <li class="navli"><a href="contact.html">Contact</a></li>
      <li class="navli"><a href="about.html">About</a></li>
    </ul>
  </nav>

  <main>
    <h1>Html Example Header</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim congue sapien, faucibus ultricies metus pulvinar nec. Vestibulum vitae mattis nibh. Sed nibh mauris, rhoncus id urna rutrum, dignissim luctus ligula. Pellentesque quis nulla
      eget elit egestas dignissim. Vivamus blandit congue sem. Fusce eget condimentum massa, sit amet convallis erat. Proin in justo ac nisl vulputate vulputate id et sem. Donec consectetur mollis mi, ut tempor sem scelerisque in. Nulla facilisi.
      <br>
      <br> Nunc tempus lectus mi, ac posuere metus elementum vitae. Praesent non elit at lacus bibendum ornare. Sed pretium ultricies justo, fringilla sagittis ligula aliquam quis. Aenean aliquet euismod fringilla. Curabitur sit amet pharetra nisi. Donec
      ac suscipit arcu, ac accumsan tortor. Ut facilisis egestas augue, laoreet tempus ligula. Morbi pulvinar arcu et lectus tincidunt condimentum. Mauris ut nisl at lectus condimentum suscipit.
      <br>
      <br> Vestibulum vel magna id lacus ullamcorper pretium vitae a eros. Sed vestibulum metus eu justo volutpat, nec facilisis lacus tempus. Nulla at maximus sapien, eget finibus massa. Phasellus pulvinar iaculis augue rhoncus aliquet. Vestibulum vitae
      massa bibendum, pretium justo ultrices, fermentum turpis. Vestibulum id scelerisque lacus. In mattis viverra justo, vel suscipit enim egestas ac. Ut fringilla lobortis nulla, vitae tempus nibh fermentum ac. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Phasellus ac urna vitae arcu varius suscipit. Pellentesque nec nunc ligula. Sed sollicitudin pretium iaculis. Aliquam ut ex molestie, vulputate lacus vitae, dapibus lorem. Phasellus nec bibendum tortor.
    </p>
  </main>
  <div class="sidebar">
    <h2>Sidebar Example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</div>


html css css-grid
person S. Schultz    schedule 13.07.2017    source источник

Ответы (2)


arrow_upward
10
arrow_downward

У меня возникли проблемы с тем, чтобы моя навигационная панель полностью растянулась по моим столбцам, несмотря на то, что я указал, какие столбцы я хотел бы растянуть навигатор, если вы мог бы взглянуть на мой код и указать на мою ошибку, что было бы круто.

На самом деле вы не указали столбцы, на которые должна растягиваться навигация.

Вы указали строки столбцов.

Когда вы говорите элементу сетки следующее:

grid-column: 1 / 2

Это сводится к следующему:

grid-column-start: 1
grid-column-end: 2

Это называется линейным размещением и определяет граничные линии для столбцов.

В этом случае вы указываете элементу сетки простираться от линии 1 столбца сетки до линии 2 столбца сетки. Это покрывает один столбец.

За исключением вашей сетки, есть два столбца.

.container {
  display: grid;
  grid-template-columns: 4fr 1fr;
}

Имейте в виду, что в сетке из двух столбцов есть три линии столбцов сетки.

Фактически, в каждой сетке количество строк столбца / строки равно количеству столбцов / строк + 1, потому что последний столбец / строка имеет дополнительную (последнюю) строку.

Firefox предлагает полезный инструмент для этого.

В инструментах разработчика Firefox, когда вы проверяете контейнер сетки, в объявлении CSS есть крошечный значок сетки. При щелчке он отображает контур вашей сетки.

введите описание изображения здесь

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Есть несколько способов решить эту проблему.

Один из них - изменить ваше grid-column правило:

grid-column: 1 / 2

to

grid-column: 1 / 3

Но, при работе с явными сетками, вы также можете сделать это:

grid-column: 1 / -1

Положительные целые числа начинают отсчет с начала сетки.

Отрицательные целые числа начинают счет с конца сетки (source < / а>).

body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / -1;       /* adjustment (was 1 / 2) */
  grid-row: 1 / 2;           /* adjustment (was 1 / 1) */
  background-color: #5eccc0;
}

.navul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navli {
  float: left;
  text-align: center;
}

.navli a {
  display: block;
  text-decoration: none;
}

main {
  grid-column: 1 / 1;
  grid-row: 2 / 2;
  background-color: #ffff77;
}

.sidebar {
  background-color: #b200a4;
  grid-column: 2 / 2;
  grid-row: 2 / 2;
}
<div class="container">
  <nav class="mainnav">
    <ul class="navul">
      <li class="navli"><a href="index.html">Home</a></li>
      <li class="navli"><a href="contact.html">Contact</a></li>
      <li class="navli"><a href="about.html">About</a></li>
    </ul>
  </nav>

  <main>
    <h1>Html Example Header</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim congue sapien, faucibus ultricies metus pulvinar nec. Vestibulum vitae mattis nibh. Sed nibh mauris, rhoncus id urna rutrum, dignissim luctus ligula. Pellentesque quis nulla
      eget elit egestas dignissim. Vivamus blandit congue sem. Fusce eget condimentum massa, sit amet convallis erat. Proin in justo ac nisl vulputate vulputate id et sem. Donec consectetur mollis mi, ut tempor sem scelerisque in. Nulla facilisi.
      <br>
      <br> Nunc tempus lectus mi, ac posuere metus elementum vitae. Praesent non elit at lacus bibendum ornare. Sed pretium ultricies justo, fringilla sagittis ligula aliquam quis. Aenean aliquet euismod fringilla. Curabitur sit amet pharetra nisi. Donec
      ac suscipit arcu, ac accumsan tortor. Ut facilisis egestas augue, laoreet tempus ligula. Morbi pulvinar arcu et lectus tincidunt condimentum. Mauris ut nisl at lectus condimentum suscipit.
      <br>
      <br> Vestibulum vel magna id lacus ullamcorper pretium vitae a eros. Sed vestibulum metus eu justo volutpat, nec facilisis lacus tempus. Nulla at maximus sapien, eget finibus massa. Phasellus pulvinar iaculis augue rhoncus aliquet. Vestibulum vitae
      massa bibendum, pretium justo ultrices, fermentum turpis. Vestibulum id scelerisque lacus. In mattis viverra justo, vel suscipit enim egestas ac. Ut fringilla lobortis nulla, vitae tempus nibh fermentum ac. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Phasellus ac urna vitae arcu varius suscipit. Pellentesque nec nunc ligula. Sed sollicitudin pretium iaculis. Aliquam ut ex molestie, vulputate lacus vitae, dapibus lorem. Phasellus nec bibendum tortor.
    </p>
  </main>
  <div class="sidebar">
    <h2>Sidebar Example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</div>

person Michael Benjamin    schedule 13.07.2017
comment
grid-column: 1 / -1 было тем, что мне было нужно. Спасибо! - person dekisha; 10.11.2017

arrow_upward
1
arrow_downward

Вам следует изменить .mainnav { grid-column: 1 / 2; }

to .mainnav { grid-column: 1 / 3; }.

Также вы можете изменить на .mainnav { grid-column: 1 / span 2; }

Вы указываете номера линий сетки, а не номера столбцов в grid-column. Из Полного руководства по сетке:

grid-column: <start-line> / <end-line> | <start-line> / span <value>;

Демо:

body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / 3; /* or grid-column: 1 / span 2; */
  grid-row: 1 / 1;
  background-color: #5eccc0;
}

.navul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navli {
  float: left;
  text-align: center;
}

.navli a {
  display: block;
  text-decoration: none;
}

main {
  grid-column: 1 / 1;
  grid-row: 2 / 2;
  background-color: #ffff77;
}

.sidebar {
  background-color: #b200a4;
  grid-column: 2 / 2;
  grid-row: 2 / 2;
}
<div class="container">
  <nav class="mainnav">
    <ul class="navul">
      <li class="navli"><a href="index.html">Home</a></li>
      <li class="navli"><a href="contact.html">Contact</a></li>
      <li class="navli"><a href="about.html">About</a></li>
    </ul>
  </nav>

  <main>
    <h1>Html Example Header</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim congue sapien, faucibus ultricies metus pulvinar nec. Vestibulum vitae mattis nibh. Sed nibh mauris, rhoncus id urna rutrum, dignissim luctus ligula. Pellentesque quis nulla
      eget elit egestas dignissim. Vivamus blandit congue sem. Fusce eget condimentum massa, sit amet convallis erat. Proin in justo ac nisl vulputate vulputate id et sem. Donec consectetur mollis mi, ut tempor sem scelerisque in. Nulla facilisi.
      <br>
      <br> Nunc tempus lectus mi, ac posuere metus elementum vitae. Praesent non elit at lacus bibendum ornare. Sed pretium ultricies justo, fringilla sagittis ligula aliquam quis. Aenean aliquet euismod fringilla. Curabitur sit amet pharetra nisi. Donec
      ac suscipit arcu, ac accumsan tortor. Ut facilisis egestas augue, laoreet tempus ligula. Morbi pulvinar arcu et lectus tincidunt condimentum. Mauris ut nisl at lectus condimentum suscipit.
      <br>
      <br> Vestibulum vel magna id lacus ullamcorper pretium vitae a eros. Sed vestibulum metus eu justo volutpat, nec facilisis lacus tempus. Nulla at maximus sapien, eget finibus massa. Phasellus pulvinar iaculis augue rhoncus aliquet. Vestibulum vitae
      massa bibendum, pretium justo ultrices, fermentum turpis. Vestibulum id scelerisque lacus. In mattis viverra justo, vel suscipit enim egestas ac. Ut fringilla lobortis nulla, vitae tempus nibh fermentum ac. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Phasellus ac urna vitae arcu varius suscipit. Pellentesque nec nunc ligula. Sed sollicitudin pretium iaculis. Aliquam ut ex molestie, vulputate lacus vitae, dapibus lorem. Phasellus nec bibendum tortor.
    </p>
  </main>
  <div class="sidebar">
    <h2>Sidebar Example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</div>

person Vadim Ovchinnikov    schedule 13.07.2017