css - property - las áreas de plantilla de cuadrícula con arte ASCII no funcionan
grid template columns (1)
Cuando se trata de utilizar el arte ASCII con la propiedad de
grid-template-areas
, actualmente existe una limitación importante:
las áreas de cuadrícula con nombre deben ser rectangulares
.
En otras palabras, no se permiten áreas de cuadrícula en forma de tetris del mismo nombre .
Este comportamiento se define en dos partes de la especificación.
grid-template-areas grid-template-areas
Si un área de cuadrícula con nombre abarca varias celdas de cuadrícula, pero esas celdas no forman un solo rectángulo relleno, la declaración no es válida.
Se pueden permitir regiones no rectangulares o desconectadas en una versión futura de este módulo.
9. Colocación de elementos de cuadrícula
Cada elemento de cuadrícula tiene un área de cuadrícula, un conjunto rectangular de celdas de cuadrícula que ocupa el elemento de cuadrícula.
En su primer ejemplo, todas las áreas de la cuadrícula forman rectángulos. Entonces la regla es válida.
grid-template-areas:
"....... header header"
"sidebar content content";
En su segundo ejemplo, el área del
header
forma una forma no rectangular.
Entonces la regla no es válida.
grid-template-areas:
"....... header header"
"sidebar header content";
(Tenga en cuenta que un punto (
.
) O una serie de períodos conectados (
...
) forman un área de cuadrícula
sin nombre
, a la que no se aplica la regla anterior (
referencia de especificación
).)
Afortunadamente, Grid proporciona múltiples métodos para diseñar elementos de cuadrícula.
En lugar de
grid-template-areas
de
grid-template-areas
, puede usar la
colocación basada en líneas
.
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-auto-rows: 100px;
background-color: #fff;
color: #444;
}
.header {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.content {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
body {
margin: 40px;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
TAMBIÉN
, tenga en cuenta que todos los valores de cadena de
grid-template-areas
de
grid-template-areas
deben tener el mismo número de columnas.
Vea esta publicación para más detalles:
- Las áreas de cuadrícula no se distribuyen correctamente en CSS Grid
Cuando
grid-template-areas:
"....... header header"
"sidebar content content";
se cambia a:
grid-template-areas:
"....... header header"
"sidebar header content";
Todo se desmorona.
¿Cómo puedo lograr el mismo efecto con el diseño de CSS Grid?
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas: "....... header header"
"sidebar content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>