如何在不换行的情况下在 CSS 网格中动态添加列？

Question

我如何在 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 跳到一个新行并且没有停留在原位，并且在切换 Facsimile-View 时，die ReadingVersionView 不会移动一位，它只是“覆盖”。

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

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

您可以根据需要添加任意数量的框，没有新行。

如何在不换行的情况下在 CSS 网格中动态添加列？

How can I dynamically add a column in CSS grid without wrapping to a new row?

html

css

svelte