html - principales - Las propiedades de cuadrícula no funcionan en elementos dentro del contenedor de cuadrícula

tags en html

Question

Estoy tratando de colocar una li anidada ( ul li ul li ) en una cuadrícula CSS creada en la parte superior ul . Sin amor todavía (no está funcionando). ¿Quizás no es posible o me falta algo?

#orgChart ul.orgChartLevel1 {
  display: grid;
  grid-template-columns: 12px auto;
  grid-template-rows: 100px auto auto;
  grid-row-gap: 30px;
}

#orgChart li.orgChartLevel2b {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

<ul class="orgChartLevel1">
  <li class="orgChartLevel1a">
    <ul class="orgChartLevel2">
      <li class="orgChartLevel2b">
      </li>
    </ul>
  </li>
</ul>

Answer 1

El alcance de un contexto de formato de cuadrícula se limita a una relación padre-hijo.

Esto significa que un contenedor de cuadrícula es siempre el elemento primario y un elemento de cuadrícula es siempre el elemento secundario. Las propiedades de cuadrícula solo funcionan dentro de esta relación.

Los descendientes de un contenedor de cuadrícula más allá de los elementos secundarios no forman parte del diseño de cuadrícula y no aceptarán propiedades de cuadrícula.

Intenta aplicar propiedades de cuadrícula a elementos que son descendientes, pero no secundarios, de un contenedor de cuadrícula. Esos elementos están fuera del alcance del diseño de la cuadrícula.

En pocas palabras: siempre deberá aplicar display: grid o display: inline-grid a un elemento primario para aplicar propiedades de cuadrícula al elemento secundario.

Tenga en cuenta que los elementos de cuadrícula también pueden ser contenedores de cuadrícula.

Ver también:

• Posicionar el contenido de los elementos de la cuadrícula en el contenedor primario (función de subcuadrícula)
• Uso adecuado de las propiedades flexibles al anidar contenedores flexibles
• ¿Es una mala práctica anidar CSS Grids?