Limitar el ancho de una columna al ancho de un elemento de cuadrícula en particular

Boaz Rymland

Tengo este caso de uso simple: un título y una descripción del artículo. El título debería aparecer encima de la descripción y quiero que el título determine el ancho de toda la columna, también para la fila 'descripción'.

¿Es eso posible con CSS Grid, y si es así, cómo?

Esta es la salida deseada:

demostración de la salida deseada

Y ese es el código, básicamente:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}
<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

Michael Benjamin

En lugar de establecer el ancho de la columna en 1fr, use min-content.

Con min-content, la columna tomará todas las oportunidades de salto de línea (ajuste de texto) .

Básicamente, envuelve todo el texto hasta que la columna alcanza el ancho de la palabra más larga.

.grid-container {
  display: grid;
  grid-template-columns: min-content; /* formerly 1fr */
}
<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

Luego, suprima los saltos de línea en el cuadro de título:

.grid-container {
  display: grid;
  grid-template-columns: min-content;
}

.A {
  white-space: nowrap;
  background-color: lightgreen; /* just for illustration */
}
<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

Referencias:

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Limitar el ancho de una columna al ancho de un elemento de cuadrícula en particular

Ancho de una columna de cuadrícula

Establezca el ancho de la primera columna igual al ancho de la cuadrícula menos la segunda columna en xaml

Limitar el ancho de la columna en la cuadrícula de datos para las columnas del botón de comando

ag-grid con una sola columna, expande la columna al ancho de la cuadrícula

Cómo configurar el relleno automático al ancho de la columna de la cuadrícula

¿Cómo calcular el ancho de una columna de cuadrícula CSS en IE11 para la animación?

¿Cómo calcular el ancho de una columna de cuadrícula CSS en IE11 para la animación?

El elemento de cuadrícula no se expande al 100% de ancho

¿Hay alguna manera de especificar el ancho de columna de la cuadrícula en porcentaje?

¿Cómo puedo enlazar a un ancho de definición de columna de cuadrícula en C #?

Kendo angular: establezca el ancho de la columna de la cuadrícula en CSS o SCSS

Cambiar el tamaño del ancho de columna de una columna en particular

Cambiar el tamaño del ancho de columna de una columna en particular

¿Cómo hacer un elemento de cuadrícula de ancho completo usando MaterialUI en React?

¿Cómo puedo limitar el ancho / alto máximo de una columna en AmCharts 4 XYChart?

Establecer el ancho mínimo de la columna en la cuadrícula

Cómo evitar que el elemento de entrada exceda el ancho de la columna de cuadrícula CSS

Cómo evitar que el elemento de entrada exceda el ancho de la columna de cuadrícula CSS

Establecer el ancho de la cuadrícula en automático

Limitar el ancho de la columna en una JTable, pero preservar la capacidad de expandir la columna

¿Cómo configuro el ancho de columna de un ancho de columna en tablas de datos?

el ancho de la columna de distribución de cuadrícula de Android excede el ancho de la matriz

Elemento de centro de cuadrícula CSS (justificar) basado en el ancho de la fila en lugar del ancho del elemento

CSS / HTML para crear dos columnas plegables, una al lado de la otra, de igual ancho, que retienen el ancho de la columna después de expandirse, usando la cuadrícula?

CSS / HTML para crear dos columnas plegables, una al lado de la otra, de igual ancho, que retienen el ancho de la columna después de expandirse, usando la cuadrícula?

¿Cómo puedo mostrar el título de un solo elemento de la cuadrícula en todo el ancho de la siguiente fila?

Enlazar el ancho de la columna de la cuadrícula de dos plantillas de elementos

Cómo forzar un ancho de columna fijo con una cuadrícula de Bootstrap y mantener las otras fluidas

TOP Lista

CalienteEtiquetas

Archivo