html - tutorial - grid-template-rows




Griglia CSS dove una colonna si restringe per adattarsi al contenuto, l'altra riempie lo spazio rimanente (2)

Devo creare un layout orizzontale in cui un blocco occupa tutto lo spazio disponibile e gli altri si restringono per adattarsi al loro contenuto.

Per esempio:

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

Un esempio più complesso con due righe (una griglia effettiva):

<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>

I miei requisiti:

  1. Il grande blocco dovrebbe riempire tutto lo spazio disponibile anche se corto
  2. I piccoli blocchi dovrebbero adattarsi al loro contenuto
  3. Il grande blocco (solitamente un'etichetta di testo) può essere una singola parola più grande dello spazio disponibile, quindi dovrebbe essere troncato in questo caso
  4. Il blocco grande non dovrebbe essere avvolto se multi-parola
  5. I piccoli blocchi non devono essere avvolti (sebbene nel caso di più pulsanti o icone, questo può essere risolto creando un blocco per componente)
  6. Supporta più righe (cioè le colonne devono essere allineate)

Mi rivolgo agli smartphone Android e iOS.

Ho provato ad adattare il codice da questa risposta, ma non ho potuto farlo funzionare per più righe. Inoltre, il codice sorgente deve essere fuori uso, il che è fonte di confusione (sebbene non blocchi per il mio caso d'uso). Ecco un jsfiddle: http://jsfiddle.net/k3W8L/


Ho trovato la risposta alla mia domanda mentre cercavo di creare un esempio conciso.

Usa la disposizione della tabella:

.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;
}

La width: 100% in .expand è ciò che fa sì che il blocco riempia tutto lo spazio disponibile, soddisfacendo così i primi due requisiti.

Notare che la width in .grid imposta semplicemente la larghezza dell'intera griglia, qui puoi usare qualsiasi valore.

Per qualche ragione, mettendo max-width: 0 in .expand impedisce al blocco di crescere più dello spazio disponibile, anche un valore piccolo come 100px . L'ho scoperto per caso e non so perché funzioni.

Ecco il jsfiddle: http://jsfiddle.net/fr253/

Questa risposta mi ha aiutato a iniziare.


Mi sono imbattuto recentemente in questa domanda mentre imparavo a usare la griglia nella mia app. Con l'aiuto della risposta di ilyaigpetrov, sono riuscito a ottenere un ridimensionamento della colonna per adattarsi al lavoro. Sebbene la risposta non dia molte spiegazioni, quindi ho pensato di aggiungere questo:

Quello che devi fare è usare la grid-template-column e impostare la dimensione della colonna che vuoi ridimensionare come auto , e almeno un'altra colonna nell'unità fr .

Esempio: per ricreare il layout del contenuto della barra laterale, dove la barra laterale è pieghevole,

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

puoi creare la griglia come:

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

Vedi la codepen qui per una demo e un codice: https://codepen.io/khs/pen/vegPBL Puoi fare clic sulla barra di navigazione per vedere l'auto-ridimensionamento in azione.





grid-layout