html - tabla - Cuadrícula CSS donde una columna se contrae para ajustarse al contenido, la otra llena el espacio remanente

ocupar todo el espacio de un div

Question

Necesito crear un diseño horizontal donde un bloque toma todo el espacio disponible y los otros se contraen para ajustarse a su contenido.

Por ejemplo:

<div class="grid">
    <div class="expand">Long text label</div>
    <div class="shrink">Button</div>
</div>

Un ejemplo más complejo con dos filas (una cuadrícula real):

<div class="grid">
    <div class="row">
        <div class="shrink">...</div>
        <div class="expand">...</div>
        <div class="shrink">...</div>
        <div class="shrink">...</div>
    </div>
    <div class="row">
        <div class="shrink">...</div>
        <div class="expand">...</div>
        <div class="shrink">...</div>
        <div class="shrink">...</div>
    </div>
</div>

Mis requisitos:

1. El bloque grande debe llenar todo el espacio disponible, incluso si es corto
2. Los pequeños bloques deben ajustarse a su contenido
3. El bloque grande (generalmente una etiqueta de texto) puede ser una sola palabra más grande que el espacio disponible, por lo que debe truncarse en este caso
4. El bloque grande no se debe ajustar si se usan varias palabras
5. Los pequeños bloques no deben envolverse (aunque en el caso de múltiples botones o iconos, esto se puede resolver haciendo un bloque por componente)
6. Admite múltiples filas (es decir, las columnas deben estar alineadas)

Me refiero a los teléfonos inteligentes Android e iOS.

Intenté adaptar el código de esta respuesta, pero no pude hacerlo funcionar para varias filas. Además, el código fuente debe estar fuera de servicio, lo cual es confuso (aunque no bloquea mi caso de uso). Aquí hay un jsfiddle: http://jsfiddle.net/k3W8L/

Answer 1

Encontré la respuesta a mi propia pregunta al tratar de crear un ejemplo conciso.

Utiliza el diseño de la tabla:

.grid {
    display: table;
    table-layout: auto;
    width: 100%;
}
.row {
    display: table-row;
}
.expand {
    display: table-cell;
    width: 100%;
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shrink {
    display: table-cell;
    white-space: nowrap;
}

El width: 100% en .expand es lo que hace que el bloque llene todo el espacio disponible, cumpliendo así los dos primeros requisitos.

Tenga en cuenta que el width en .grid simplemente establece el ancho de toda la grilla, puede usar cualquier valor aquí.

Por alguna razón, al poner max-width: 0 en .expand evita que el bloque crezca más que el espacio disponible, un valor pequeño como 100px también lo hará. Descubrí esto por casualidad y no sé por qué funciona.

Aquí está el jsfiddle: http://jsfiddle.net/fr253/

Esta respuesta me ayudó a comenzar.

Answer 2

Me topé con esta pregunta recientemente mientras aprendía a usar grid en mi aplicación. Con la ayuda de la respuesta del ilyaigpetrov, pude lograr que el tamaño de la columna de contracción ajustada funcionara. Aunque la respuesta no da mucha explicación, entonces pensé en agregar esto:

Lo que debe hacer es usar grid-template-column y establecer el tamaño de la columna que desea encoger para ajustar como auto , y al menos otra columna en la unidad fr .

Ejemplo: para recrear el diseño del contenido de la barra lateral, donde la barra lateral es plegable,

-------------------------------
| Sidebar |       Content     |
-------------------------------

puedes crear la grilla como:

.grid {
  display: grid;
  ...
  grid-template-column: auto 1fr;
  grid-template-areas: "sidebar content";
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}

Vea el codepen aquí para obtener una demostración y código: https://codepen.io/khs/pen/vegPBL Puede hacer clic en la barra de navegación para ver el auto-tamaño en acción.

Answer 3

No sé si mi código es válido, pero hace el trabajo: ya sea con grilla o con flexión.

.container {
  display: grid;
  grid-template-columns: 1fr auto auto;
}
.one {
  background-color: pink;
}
.two {
  background-color: yellow;
}
.three {
  background-color: lightgreen;
}


/* Now the same but with flex. */
.whole-row {
  grid-column: 1 / -1;
}
.flexy {
  display: flex;
  border: 1px solid red;
}
.flexy > .one {
  flex-grow: 1;
}
.flexy > .two,
.flexy > .three {
  /* flex-grow: 0; <- This value is a default. */
}

<div class="container">

  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>

  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>

  <div class="whole-row flexy">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
  </div>

</div>