Haga que un elemento de cuadrícula se extienda hasta la última fila/columna en la cuadrícula implícita

¿Es posible hacer que un elemento de la cuadrícula abarque desde la primera hasta la última fila cuando no sé el número de filas?

Digamos que tengo el siguiente contenido HTML con un número desconocido de cuadros.

¿ Cómo puedo hacer el tercer .boxtramo desde la primera línea de la cuadrícula hasta la última?

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Expandir fragmento

May 18 '17 22:05 jbe

¿Es posible hacer que un elemento de la cuadrícula abarque desde la primera hasta la última fila cuando no sé el número de filas?

Parece que falta una solución Grid natural para este problema en la especificación actual (Nivel 1). Entonces la respuesta sería "no", estrictamente con las propiedades de Grid.

Sin embargo, como se señala en esta respuesta , puede ser posible con posicionamiento absoluto.

Si bien CSS Grid no puede hacer que un área de cuadrícula abarque todas las columnas/filas en una cuadrícula implícita , puede hacer el trabajo en una cuadrícula explícita .

Utilice números enteros negativos.

Aquí hay dos secciones interesantes en la especificación CSS Grid:

7.1. La cuadrícula explícita

Los índices numéricos en las propiedades de ubicación de la cuadrícula cuentan desde los bordes de la cuadrícula explícita. Los índices positivos cuentan desde el lado inicial, mientras que los índices negativos cuentan desde el lado final.

y aquí...

8.3. Ubicación basada en líneas: las propiedades grid-row-start, grid-column-start, grid-row-endygrid-column-end

Si se proporciona un número entero negativo, cuenta a la inversa, comenzando desde el borde final de la cuadrícula explícita.

En otras palabras, cuando se trata de una cuadrícula explícita, que es una cuadrícula que usted define usando estas propiedades:

grid-template-rows
grid-template-columns
grid-template-areas

... puedes hacer que un área de cuadrícula abarque todas las columnas estableciendo esta regla:

grid-column: 3 / -1;

Eso le indica al área de la cuadrícula que se extienda desde la tercera línea de la columna hasta la última línea de la columna.

Lo contrario sería:

grid-column: 1 / -3;

Nuevamente, este método sólo funciona en cuadrículas explícitas.

May 18 '2017 16:05 Michael Benjamin

Puede agregar grid-row-start al contenido CSS de ese cuadro y configurarlo para que abarque un número absurdamente alto.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
  grid-row-start: span 9000;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Expandir fragmento

Esta no es una solución óptima y no funciona en todos los navegadores, ¡así que tenga cuidado! Aunque esto puede parecer que funciona en algunos navegadores (Chrome), otros navegadores (Firefox) crearán una cantidad absurda de filas que causa problemas.

May 18 '2017 15:05 Hodrobond

Una solución que realmente funcionó para mí fue establecer position: absolute;el elemento que querías que creciera hasta el final. Esto tendrá sus inconvenientes, pero en algunos casos podría salvar vidas. Aquí hay un ejemplo completo:

.grid {
  display: grid;
  grid-template: auto / auto 22px auto;
  position: relative;
}

.vline {
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: black;
  grid-column: 2 / span 1;
  margin: 0 10px;
}

.grid h1:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
.grid p:nth-child(2) { grid-row: 2; grid-column: 1; text-align: right; }
.grid h1:nth-child(3) { grid-row: 3; grid-column: 3; }
.grid p:nth-child(4) { grid-row: 4; grid-column: 3; }
.grid h1:nth-child(5) { grid-row: 5; grid-column: 1; text-align: right; }
.grid p:nth-child(6) { grid-row: 6; grid-column: 1; text-align: right; }
.grid h1:nth-child(7) { grid-row: 7; grid-column: 3; }
.grid p:nth-child(8) { grid-row: 8; grid-column: 3; }
p, h1 { margin: 0; padding: 0; }

<div class="grid">
  <h1>1.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>2.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h1>3.</h1>
  <p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>4.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <div class="vline"></div>
</div>

Expandir fragmento

May 03 '2018 18:05 FanManPro

Entonces, si aún no te parece posible, puedes optar por cambiar la estructura y anidar la cuadrícula.

Utilice JavaScript para sacar el tercer cuadro y colocarlo al lado de su contenedor de cuadrícula original, si no puede hacerlo con anticipación.

.container {
    display: grid;
    grid-template-columns: 65% 35%;
}

.nested_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-rows: auto;
}

.box {
    background-color: blue;
    padding-bottom: 20px;
    border: 1px solid red;
}

.side {
    background-color: yellow;
    grid-column: 1 -1;
    border: 1px solid red;
}

<div class="container">
    <div class="nested_grid">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>

Expandir fragmento

Jul 09 '2018 08:07 Duck