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

Question

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

我的代码(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 时，死 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>

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