html - track - Las áreas de cuadrícula no se disponen correctamente en CSS Grid

grid-template-rows

Question

Quiero hacer que mi sitio web use un sistema de grillas CSS, pero parece que no funciona. Aquí está mi código:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

Answer 1

Si esto:

Es el resultado deseado, entonces solo has cometido un error menor.

Has configurado la cuadrícula para que sea un cuadrado de 2 x 2 aquí:

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;

Pero no estás llenando todo el espacio.

  grid-template-areas: "logo faq", "about-us";

Esa línea de código dice "En los dos cuadros superiores, coloca logo y faq respectivamente. En las dos filas inferiores colocamos about-us" y eso causa un error. Si desea que un grid-area ocupe todo el espacio, debe declararlo dos veces . Por lo tanto, la línea anterior se convierte en:

  grid-template-areas: "logo faq", "about-us about-us";

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq", "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

Answer 2

Al usar la propiedad grid-template-areas , los valores de cadena deben tener el mismo número de columnas.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

Puede usar un período o una línea continua de períodos para representar una celda vacía ( referencia de especificación ).

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" " ... about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

<div class="grid">
  <div class="logo">
    LOGO
  </div>
  <div class="faq">
    FAq
  </div>
  <div class="aboutUs">
    About-us
  </div>
</div>

Desde la especificación de Grid:

7.3. Áreas con nombre: the grid-template-areas propiedad the grid-template-areas

Todas las cadenas deben tener el mismo número de columnas, o la declaración no es válida.

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

Se pueden permitir regiones no rectangulares o desconectadas en una versión futura de este módulo.

Nota: Como se indica en la especificación, además de un número igual de columnas, las áreas de la cuadrícula también deben ser rectangulares ( consulte esta publicación para obtener más detalles ).