¿Por qué no funcionan mis áreas de plantilla de cuadrícula con arte ASCII?

Resuelto Konrad Albrecht asked hace 7 años • 2 respuestas

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

Expandir fragmento

https://codepen.io/rachelandrew/pen/oXKgoQ

Aug 02 '17 18:08 Konrad Albrecht

Aceptado

Cuando se trata de utilizar arte ASCII con la grid-template-areaspropiedad, existe una limitación importante actualmente: las áreas de cuadrícula con nombre deben ser rectangulares .

Es decir, no se permiten áreas de cuadrícula con forma de tetris del mismo nombre .

Este comportamiento se define en dos partes de la especificación.

7.3. Áreas nombradas: the grid-template-areas propiedad

Si un área de cuadrícula con nombre abarca varias celdas de la cuadrícula, pero esas celdas no forman un único rectángulo relleno, la declaración no es válida.

Es posible que se permitan regiones no rectangulares o desconectadas en una versión futura de este módulo.

9. Colocar elementos de la cuadrícula

Cada elemento de la cuadrícula tiene un área de cuadrícula, un conjunto rectangular de celdas de la cuadrícula que ocupa el elemento de la 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 headerárea tiene una forma no rectangular. Entonces la regla no es válida.

grid-template-areas:
       "....... header  header"
       "sidebar header content";

(Tenga en cuenta que un período ( .) 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 la cuadrícula.

En lugar de grid-template-areas, puede utilizar la ubicación basada en líneas .

Mostrar fragmento de código

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

Expand snippet

TAMBIÉN , tenga en cuenta que todos los valores de cadena grid-template-areasdeben tener el mismo número de columnas. Vea esta publicación para más detalles:

Las áreas de la cuadrícula no se distribuyen correctamente en CSS Grid

Aug 02 '2017 13:08 Michael Benjamin