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 respuestas
Esto es lo que está sucediendo:
Primero, veamos las brechas (no aparecen en muchos casos):
.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 ( espacio sin interrupciones ) caracteres en el código HTML.
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.
.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 , 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 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.
** Probé el código en Chrome y Firefox y el resultado fue **
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>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>