Тайные пробелы в CSS Grid

Question

В фрагменте ниже есть промежутки над и под областью 'main', которые предполагают пустые ячейки с той же высотой, что и ячейки сетки.Кроме того, в самом низу есть пустое место.

Я пытался установить grid-auto-flow для других значений, но эффекта нет, за исключением самого нижнего промежутка, когда он установлен на column.

Что вызывает это?и как это исправить?

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
    display: grid;
    
    grid-auto-rows: minmax(auto, auto);
    grid-template-areas: 
      "hd hd ft"
      "sd . ft"
      "sd main ft"
      "sd . ft";
}

<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

Answer 1

Вот что происходит:

Сначала давайте посмотрим пробелы (они не появляются во многих случаях):

.wrapper {
  display: grid;
  grid-auto-rows: minmax(auto, auto);
  grid-template-areas: "hd hd ft" "sd . ft" "sd main ft" "sd . ft";
}

.header {
  grid-area: hd;
}

.footer {
  grid-area: ft;
}

.content {
  grid-area: main;
}

.sidebar {
  grid-area: sd;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

Вы видите рендеринг   ( неразрывных пробелов ) символов в коде HTML.

Как символы пробела, они невидимы, что затрудняет их обнаружение.Но как только вы удалите их, макет будет работать как положено.

.wrapper {
  display: grid;
  grid-auto-rows: minmax(auto, auto);
  grid-template-areas: "hd hd ft" "sd . ft" "sd main ft" "sd . ft";
}

.header {
  grid-area: hd;
}

.footer {
  grid-area: ft;
}

.content {
  grid-area: main;
}

.sidebar {
  grid-area: sd;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

И, наконец, почему во многих случаях отображается неверный макет?

Когда вы копируете HTML-код какна веб-странице (например, скопируйте код непосредственно из вопроса), символы  , являющиеся HTML-кодом, уже отрисованы.Таким образом, копируется только простой (складной) пробел, и макет будет работать нормально.

Кроме того, если вы копируете HTML-код из некоторых редакторов кода в некоторых браузерах (например, редактор фрагмента стека в Edge)), символы   также не копируются.Мне нужно было скопировать код из редактора jsFiddle в Chrome, чтобы наконец увидеть проблему.

Кроме того, если вы нажмете кнопку «Tidy» в редакторе, используя оригинальный код, пробелы будут добавлены между строками.

Answer 2

Пустые ячейки должны быть вставлены, вы не получите их по умолчанию, просто добавление HTML и тега body устранило проблему с нижним пробелом:

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
.empty-cell1 {
    grid-area: ec1;
}
.empty-cell2 {
    grid-area: ec2;
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
    display: grid;
    grid-template-areas: 
      "hd hd ft"
      "sd ec1 ft"
      "sd main ft"
      "sd ec2 ft";
}

<!DOCTYPE html>
<html>

  <head>
	
  </head>

<body>




<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
    <div class="empty-cell1"></div>
    <div class="empty-cell2"></div>
</div>
</body>
</html>

Answer 3

** Я протестировал код на Chrome и Firefox, и результат составил **

Всегда добавляйте объявление <!DOCTYPE> в свои документы HTML, чтобы браузер знал, какой тип документа ожидать.

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
    display: grid;
    
    grid-auto-rows: minmax(auto, auto);
    grid-template-areas: 
      "hd hd ft"
      "sd . ft"
      "sd main ft"
      "sd . ft";
}

<!DOCTYPE html>
<html>

  <head>
	
  </head>

<body>




<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
</body>
</html>