En el fragmento de abajo, hay espacios arriba y debajo del área 'main' que se supone que son celdas vacías con la misma altura que las celdas de la cuadrícula. También hay un espacio vacío en la parte inferior.

Intenté configurar grid-auto-flow en diferentes valores, pero no hay ningún efecto, excepto el espacio muy inferior cuando se establece en column.

¿Qué causa eso? ¿Y como arreglarlo?

.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>
3
Dohab 27 sep. 2019 a las 12:23

3 respuestas

La mejor respuesta

Esto es lo que está sucediendo:

Primero, veamos las brechas (no aparecen en muchos casos):

enter image description here

.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>

Lo que está viendo es la representación de &nbsp; ( espacio sin interrupciones ) caracteres en el código HTML.

enter image description here

Como caracteres de espacio en blanco, son invisibles, lo que los hace difíciles de detectar. Pero una vez que los elimina, el diseño funciona como se esperaba.

enter image description here

.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>

Por último, ¿por qué no se muestra el diseño defectuoso en muchos casos?

Cuando copia el código HTML tal como se representa en una página web (por ejemplo, copia el código directamente de la pregunta), los caracteres &nbsp;, que son código HTML, ya se han representado. Por lo tanto, solo se copia el espacio en blanco liso (plegable) y el diseño parecerá funcionar bien.

Además, si copia el código HTML de algunos editores de código en algunos navegadores (por ejemplo, el editor de fragmentos de pila en Edge), los caracteres &nbsp; tampoco se copian. Necesitaba copiar el código del editor jsFiddle en Chrome para finalmente ver el problema.

Además, si presiona el botón "Tidy" en el editor usando el código original, se agregarán espacios entre las líneas.

1
Michael Benjamin 27 sep. 2019 a las 16:47

** Probé el código en Chrome y Firefox y el resultado fue **

enter image description here

enter image description here

Agregue siempre la declaración <!DOCTYPE> a sus documentos HTML, para que el navegador sepa qué tipo de documento esperar.

.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>
1
Wassim Al Ahmad 27 sep. 2019 a las 10:25

Deben insertarse las celdas vacías, no lo obtendrá de forma predeterminada, solo agregando el HTML y la etiqueta del cuerpo se solucionó el problema de la brecha inferior:

.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>
-1
Prawin soni 27 sep. 2019 a las 09:53