paso - tablas en html5 y css3

¿Cómo apuntar a una columna o fila específica en CSS Grid Layout?

Question

¿Es posible seleccionar una columna o fila de cuadrícula específica con CSS?

Por ejemplo, supongamos que tengo un diseño de cuadrícula CSS de 3 filas por 2 columnas: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; . ¿Cómo seleccionaría todos los elementos de la segunda columna? Por ejemplo: grid:nth-child(column:2) (solo mi idea, código no válido).

He probado nth-child selectores nth-child en los elementos div , pero esto no me permite especificar filas o columnas cuando el motor de diseño de cuadrícula coloca los elementos automáticamente.

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.item {
  background: #999;
}

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Right Justify</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

Answer 1

CSS Grid excluye el concepto de fila por diseño, por lo que debe agregar esa relación semántica al marcado explícitamente.

Si está controlando la creación de la lista, puede agregar una propiedad odd o odd , por ejemplo (en el generador JSX para ilustración / simplicidad):

for (const rowIndex in items) {
  const row = items[rowIndex]
  const parity = {[rowIndex % 2 ? ''odd'' : ''even'']: ''''}
  for (const col in row.columns) {
     yield <div class=''col'' {...parity}>{col}</div>
  }
}

Lo que generará algo como:

<div class=''col'' even>...</div>
<div class=''col'' even>...</div>
<div class=''col'' even>...</div>
<div class=''col'' odd>...</div>
<div class=''col'' odd>...</div>
<div class=''col'' odd>...</div>
<div class=''col'' even>...</div>
<div class=''col'' even>...</div>
<div class=''col'' even>...</div>

Luego en tu CSS:

.col[even] { ... }
.col[odd] { ... }

Answer 2

No es posible con CSS.

CSS se dirige a elementos HTML, atributos y valores de atributos.

Las columnas y filas de la cuadrícula no tienen ninguno de estos "ganchos".

Tendrá que apuntar a los elementos de la cuadrícula directamente.

Tu escribiste:

Por ejemplo, supongamos que tengo un diseño de cuadrícula CSS de 3 filas por 2 columnas: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; . ¿Cómo seleccionaría todos los elementos de la segunda columna?

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 50vh;
  background-color: gray;
}

grid-item {
  background-color: lightgreen;
}

grid-item:nth-child(2n) {
  border: 2px dashed red;
}

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

Answer 3

No hay elementos de columna o fila a los que pueda apuntar, pero si la cuadrícula es uniforme (el mismo número de celdas en cada fila) puede seleccionar celdas. Aquí hay unos ejemplos.

1. Columnas

Última columna en una cuadrícula de 5 columnas:

    .item:nth-child(5n) { /* ... */ }

Cuarta (2da última) columna en una cuadrícula de 5 columnas:

    .item:nth-child(5n-1) { /* ... */ }

Primera (quinta última) columna en una cuadrícula de 5 columnas:

    .item:nth-child(5n-4) { /* ... */ }

2. Filas

Primera fila en una cuadrícula de 5 columnas (primeras cinco celdas):

    .item:nth-child(-n+5) { /* ... */ }

Segunda fila en una cuadrícula de 5 columnas (celdas de 6 a 10):

    .item:nth-child(n+6):nth-child(-n+10) { /* ... */ }

Tercera fila en una cuadrícula de 5 columnas (celdas del 11 al 15):

    .item:nth-child(n+11):nth-child(-n+15) { /* ... */ }

Última fila en una cuadrícula de 5 columnas con 20 celdas (celdas de 16 en adelante):

    .item:nth-child(n+16) { /* ... */ }

Answer 4

No se puede. No tienes tales selectores.

Pero eso es extraño, porque puede orientar fácilmente la fila / columna desde CSS

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

Es natural esperar algo:

div[style*="display:grid"]:grid-row(3) {
    background-color: blue;
}

div[style*="display:grid"]:grid-column(3) {
    background-color: green;
}

No explique las razones por las que el borrador de esto aún no se ha propuesto.

UPD
Parece que existen columnas: https://drafts.csswg.org/selectors-4/#the-nth-col-pseudo

UPD
Issue en el repositorio del W3C

Answer 5

Para diseñar una fila arbitraria, puede usar un elemento contenedor con su display configurada en contents . Vea el fragmento de código a continuación:

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 2px;
}

.grid-item {
  border: 1px solid black;
  padding: 5px;
}

.grid-row-wrapper {
  display: contents;
}

.grid-row-wrapper > .grid-item {
  background: skyblue;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-row-wrapper">
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
  </div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
</div>

EDITAR: Al igual que con todas las implementaciones, debe verificar para asegurarse de que funcione en su (s) entorno (s) de destino. Puede consultar la tabla de compatibilidad en MDN o caniuse.com para obtener soporte para la display: contents :

• https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility
• https://caniuse.com/#search=display%3A%20contents

Answer 6

Si alguna vez desea diseñar una fila, se aplica el mismo principal. Tomando ese ejemplo de arriba:

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 50vh;
  background-color: gray;
}

grid-item {
  background-color: lightgreen;
}

grid-item:nth-child(4n+3),grid-item:nth-child(4n) {
  border: 2px dashed red;
}

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>