html – CSS网格,其中一列缩小以适合内容,另一列填充重新生成空

我需要创建一个水平布局,其中一个块占用所有可用空间,而另一个块缩小以适合其内容.

例如：

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

一个包含两行(实际网格)的更复杂的示例：

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

我的要求：

>即使很短,大块也应该填满所有可用空间
>小块应符合其内容
>大块(通常是文本标签)可能是一个比可用空间大的单个字,所以在这种情况下它应该被截断
>如果是多字,大块不应该换行
>小块不应该换行(虽然在多个按钮或图标的情况下,这可以通过为每个组件制作一个块来解决)
>支持多行(即列应对齐)

我的目标是Android和iOS智能手机.

我试图调整this answer的代码,但我不能让它适用于多行.此外,源代码必须是乱序的,这是令人困惑的(虽然我的用例没有阻塞).这是一个jsfiddle：http://jsfiddle.net/k3W8L/

解决方法

您需要做的是使用grid-template-column并将要缩小的列的大小设置为auto,并将fr单元中的至少一个其他列设置为auto.

例：
要重新创建侧边栏内容布局,侧边栏可折叠,

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

您可以将网格创建为：

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

请参阅此处的codepen以获取演示和放大代码：https://codepen.io/khs/pen/vegPBL您可以单击导航栏以查看自动调整大小.

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!