如何在CSS网格中动态添加一列而不包装到新行？

debugcn 发表于 Dev

安妮娜

如何在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不会移动一点，而只是“覆盖”。

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

OmG3r

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

这是一个简单示例实现的副本。

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。