如何在 CSS 网格中动态添加一列而不换行到新行？答案

【问题标题】：How can I dynamically add a column in CSS grid without wrapping to a new row?如何在 CSS 网格中动态添加一列而不换行到新行？
【发布时间】：2021-05-24 21:14:55
【问题描述】：

如何在 css 中动态添加一个新列（例如，一个按钮被切换并且一个新组件（我正在使用 Svelte）出现在一个新列中），但没有那个（如果视口太小）新的组件跳到新行。已经可见的组件应该只是被“挤压”。

我的代码（html）：

<div class="entity-view">
    <CorrespondenceNavigation entity = "{$entitiesStore.get(id)}"/>
    {#if $entitiesStore.get(id).entityType === "person"}
        <PersonView entity="{$entitiesStore.get(id)}" />
    {:else}
         <div class = "reading-version-view-and-facsimile">
                <div class = "reading-version">
            {#if $entitiesStore.get(id).showReadingView}
                <ReadingVersionView entity="{$entitiesStore.get(id)}" />
            {/if}
                </div>
            {#if $entitiesStore.get(id).showFacsimile}
                <FacsimileView entity="{$entitiesStore.get(id)}" />
            {/if}
                <div class = "marginal">
                <MarginalColumnView entity="{$entitiesStore.get(id)}" />
                </div>
            </div>
        {/if}
</div>

我的CSS：

        .entity-view {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 45px;
            box-sizing: border-box;
    
        }
        .reading-version-view-and-facsimile{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
        .reading-version {
            grid-column: span 1.42;
        }
    
        .marginal{
            position: relative;
            margin-left: 7em;
        }

此时 .marginal 跳到新行并且没有保持原位，并且在切换传真视图时，ReadingVersionView 不会移动一点，它只是“叠加”。

我希望我的问题足够清楚。非常感谢！

【问题讨论】：

标签： html css svelte

【解决方案1】：

您要查找的 CSS 属性是 grid-auto-flow。

这是repl 的简单示例实现。

.wrapper {
  display: grid;
  grid-auto-flow: column;
}

.wrapper {
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box c">D</div>
  <div class="box c">C</div>
  <div class="box c">D</div>
</div>

您可以添加任意数量的框，无需新行。

【讨论】：