J'aimerais avoir une grille avec la 1ère colonne de 50px, le dernier avec 50px aussi et toutes les colonnes au milieu (ne connaissez pas la quantité de colonnes) pour avoir 1fr.
J'ai Essayé avec P>
Modèle de grille-colonnes: répétition 50px (ajustement automatique, Minmax (100px, 1fr)) 50px; code> mais sans chance. p>
<div class="container">
<div class="item1">Item 1 - 50px</div>
<div class="item2">Item 2 - 1fr</div>
<div class="item3">Item 3 - 1fr</div>
<div class="item4">Item 4 - 1fr</div>
<div class="item5">Item 5 - 1fr</div>
<div class="item6">Item 6 - 1fr</div>
<div class="item7">Item 7 - 1fr</div>
<div class="item8">Item 8 - 50px</div>
</div>
3 Réponses :
Le problème réside avec votre Vous devez utiliser p> 100px code> (sur la mise en page restreinte, il devient trop gros pour min code> Min, forçant la disposition de la grille à briser). Calc ((100% - 100px) / 6) code> comme min code>. p>
<div class="container opt1">
<div class="item1">Item 1 - 50px</div>
<div class="item2">Item 2 - 1fr</div>
<div class="item3">Item 3 - 1fr</div>
<div class="item4">Item 4 - 1fr</div>
<div class="item5">Item 5 - 1fr</div>
<div class="item6">Item 6 - 1fr</div>
<div class="item7">Item 7 - 1fr</div>
<div class="item8">Item 8 - 50px</div>
</div>
<div class="container opt2">
<div class="item1">Item 1 - 50px</div>
<div class="item2">Item 2 - 1fr</div>
<div class="item3">Item 3 - 1fr</div>
<div class="item4">Item 4 - 1fr</div>
<div class="item5">Item 5 - 1fr</div>
<div class="item6">Item 6 - 1fr</div>
<div class="item7">Item 7 - 1fr</div>
<div class="item4">Item 8 - 1fr</div>
<div class="item5">Item 9 - 1fr</div>
<div class="item6">Item 10 - 1fr</div>
<div class="item7">Item 11 - 1fr</div>
<div class="item8">Item 12 - 50px</div>
</div>
<div class="container opt3">
<div class="item1">Item 1 - 50px</div>
<div class="item2">Item 2 - 1fr</div>
<div class="item3">Item 3 - 1fr</div>
<div class="item7">Item 4 - 1fr</div>
<div class="item8">Item 5 - 50px</div>
</div>
L'utilisation de 10px comme valeur min ne fonctionne pas non plus. Ces colonnes au milieu sont créées de manière dinodique et je ne connais pas le nombre exact de colonnes, je peux utiliser JS pour recalculer la mise en page, mais je pense qu'il doit y avoir un moyen de le faire uniquement avec CSS.
Ce que vous dites ne s'additionne pas. Vous pouvez le voir travailler clairement ici. Il doit y avoir autre chose qui l'affecte (peut-être des min-largeur ou similaire). Si ce que vous dites est vrai, cela ne fonctionnerait pas dans ma réponse aussi. Pouvez-vous poster un exemple réel qui échoue actuellement avec min défini sur 0 ? La réponse qui vous conseille d'avoir 3 colonnes grille et de mettre une autre grille dans la colonne du milieu est assez solide, si vous me demandez. Cela ne peut essentiellement pas échouer. La gauche et la droite restera toujours 50px .
Oui, l'option d'envelopper les colonnes du milieu est une solution agréable, mais je ne peux pas le faire. Voici d'autres options qui ne fonctionnent pas jsfiddle.net/dte14q53
Utilisons un gros marteau: array.from (document.QuatrySelectorallall ('. Container'))). Foreach (c => c.style.gridtempleColumns = '50px Repeat (Auto-Fit, Minmax (Calc ((( 100% - 100px) / '+ (C.ChildelementCount - 2) +'), 1fr)) 50px '); - jsfiddle.net/websiter/1jc4ymrd/3
Je l'ai fait avec écran d'affichage. En leur donnant tous p> flex: 1 code> Ils sont pareils avec, et pour la première et la dernière et la dernière, nous avons défini une largeur:
<div class="container">
<div class="item1">Item 1 - 50px</div>
<div class="item2">Item 2 - 1fr</div>
<div class="item3">Item 3 - 1fr</div>
<div class="item4">Item 4 - 1fr</div>
<div class="item5">Item 5 - 1fr</div>
<div class="item8">Item 8 - 50px</div>
</div>
J'envisage d'utiliser Flex mais j'ai besoin de le résoudre à l'aide de la grille en ce moment.
Vous pouvez utiliser Travail Jsfiddle: https://jsfiddle.net/7mgnaf5l/
P.s. Vous pouvez utiliser Editer 1:
Essayez de régler les largeurs des enfants de 50 px et de définir grille-template-colonnes: 50px Auto 50px pour le conteneur DIV, puis placez le nombre insipide inconnu de divs dans un autre div et définir Affichage: grille de cette div pour contenir l'enfant divs.
affichage: Inline pour l'enfant divs si vous les souhaitez sur une ligne.
grille-auto-flux: colonne pour la div.
Je ne peux pas ajouter un supplément de div à l'intérieur.
La chose qui vous permet de définir une largeur fixe sur le contenu, pas à la colonne, look i. imgur.com/f8kwjs2.png
Donc tu veux seulement 1 rangée? parce que avec l'ajustement automatique, vous pouvez avoir de nombreuses lignes
Oui j'ai besoin de cette configuration en une seule ligne