英文:
CSS grid column min of max-content and a fixed width
问题
我帮您翻译以下内容：
我有一个 CSS 网格，我希望列的宽度要么是该列中最大项目的宽度，要么是 100px，取两者中较小的值。我以为 minmax(max-content, 100px) 可能会起作用，但实际上并没有。在下面的示例中，窄列应该是 max-content（但是是 100px），而宽列应该是 100px（但是是 max-content）。是否可以使用 CSS 网格来实现这个效果？
.table {
display: grid;
gap: 4px;
grid-template-columns: repeat(4, minmax(max-content, 100px));
}
.element {
background-color: lightblue;
word-break: break-all;
white-space: nowrap;
}
<div class="table">
<div class="element">a</div>
<div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
<div class="element">narrow</div>
<div class="element">d</div>
<div class="element">narrow</div>
<div class="element">b</div>
<div class="element">c</div>
<div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
</div>
希望这对您有所帮助。
英文:
I have a css grid for which I would like the column widths to be either the width of the largest item in that column or 100px, whichever is smaller. I thought minmax(max-content, 100px) might work but it doesn't. In the below example, the narrow column should be max-content (but is 100px) and the wide column should be 100px (but is max-content). Is it possible to do this with css grid?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.table {
display: grid;
gap: 4px;
grid-template-columns: repeat(4, minmax(max-content, 100px));
}
.element {
background-color: lightblue;
word-break: break-all;
white-space: nowrap;
}
<!-- language: lang-html -->
<div class="table">
<div class="element">a</div>
<div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
<div class="element">narrow</div>
<div class="element">d</div>
<div class="element">narrow</div>
<div class="element">b</div>
<div class="element">c</div>
<div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
</div>
<!-- end snippet -->
答案1
得分: 1
使用 max-width 在项目上，保持列的自动宽度。
.table {
display: grid;
gap: 4px;
grid-template-columns: repeat(4, auto);
justify-content: start; /* 为了避免列之间的间隙，您需要这个 */
}
.element {
background-color: lightblue;
word-break: break-all;
white-space: nowrap;
max-width: 100px;
/* 隐藏溢出部分 */
overflow: hidden;
text-overflow: ellipsis;
}
<div class="table">
<div class="element">a</div>
<div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
<div class="element">narrow</div>
<div class="element">d</div>
<div class="element">narrow</div>
<div class="element">b</div>
<div class="element">c</div>
<div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
</div>
英文:
Use max-width on the item and keep the column auto width
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.table {
display: grid;
gap: 4px;
grid-template-columns: repeat(4, auto);
justify-content: start; /* you need this to avoid the gap between column */
}
.element {
background-color: lightblue;
word-break: break-all;
white-space: nowrap;
max-width: 100px;
/* hiding the overflow */
overflow: hidden;
text-overflow: ellipsis;
}
<!-- language: lang-html -->
<div class="table">
<div class="element">a</div>
<div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
<div class="element">narrow</div>
<div class="element">d</div>
<div class="element">narrow</div>
<div class="element">b</div>
<div class="element">c</div>
<div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论