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

user_15029517 0
Viewed 321

How can I add a new column in css dynamically (e.g. a button is toggled and a new component (I'm working with Svelte) appears in a new column), but without that (if viewport is too small) the new component skips to a new row. The already visible components should just get "squeezed".

my code (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>

my 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;
        }

at the moment the .marginal skips to a new row and doesn't stay in place and when toggling the Facsimile-View, die ReadingVersionView doesn't move one bit and it just "overlays".

I hope my question is clear enough. Thanks a lot!

svelte css html
1 Answers

The CSS property you looking for is grid-auto-flow.

Here is this repl for a simple example implementation.

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

You can add as many boxes as you want with no new rows.

user_84450720
Related