Home  >  Q&A  >  body text

CSS Grid: Create new row when child content overflows column width

<p>I have a two column layout based on CSS Grid. I want to create a new row when the content of the second column exceeds <code>1fr</code>. As it currently stands, the content simply overflows the column. </p> <p>One requirement of this layout is that the items in the <code>right menu</code> column are in one row. I achieve this by: </p> <pre class="brush:php;toolbar:false;">.right-menu { ... grid-auto-flow: column dense; ... }</pre> <p>If I remove the <code>grid-auto-flow</code> attribute, the overflow stops. However, the items are now stacked into multiple rows, which is not what I want. </p> <p>I also tried changing <code>.right-menu</code> to </p> <pre class="brush:php;toolbar:false;">.right-menu { display: 'inline-flex'; }</pre> <p>However, the result is the same as before. Content overflows column. Is there a way to do this without JavaScript? Media queries are deprecated as this is based on content, not viewport width. </p> <p> <pre class="snippet-code-css lang-css prettyprint-override"><code>.main-container { background-color: #ccc; padding: 1.0rem; width: 1200px; margin: 1.0rem 0 0 1.0rem; } .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); grid-template-rows: repeat(auto-fill, 1fr); grid-auto-flow: row; grid-row-gap: 1.0rem; } .left-menu { font-size: 1.25rem; } .right-menu { display: grid; background-color: white; grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); grid-auto-flow: column dense; grid-row-gap: 0.5rem; grid-column-gap: 0.75rem; } .right-item { background-color: #fff; text-align: center; min-width: 65px; border: 1px solid black; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="main-container"> <div class="menu-grid"> <div class="left-menu">Left</div> <div class="right-menu"> <div class="right-item">Item: 1</div> <div class="right-item">Item: 2</div> <div class="right-item">Item: 3</div> <div class="right-item">Item: 4</div> <div class="right-item">Item: 5</div> <div class="right-item">Item: 6</div> <div class="right-item">Item: 7</div> <div class="right-item">Item: 8</div> <div class="right-item">Item: 9</div> <div class="right-item">Item: 10</div> <div class="right-item">Item: 11</div> <div class="right-item">Item: 12</div> <div class="right-item">Item: 13</div> </div> </div> </div></code></pre> </p>
P粉212114661P粉212114661434 days ago549

reply all(1)I'll reply

  • P粉269847997

    P粉2698479972023-09-06 11:04:03

    Using Flexbox will bring you good luck

    .main-container {
      background-color: #ccc;
      padding: 1.0rem;
      width: 1200px;
      margin: 1.0rem 0 0 1.0rem;
    }
    
    .menu-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1.0rem;
    }
    .menu-grid > * {
      flex: 600px;
    }
    .left-menu {
      font-size: 1.25rem;
    }
    
    .right-menu {
      display: grid;
      background-color: white;
      grid-auto-columns: 65px;
      grid-auto-flow: column; 
      grid-row-gap: 0.5rem;
      grid-column-gap: 0.75rem;
    }
    
    .right-item {
      background-color: #fff;
      text-align: center;
      min-width: 65px;
      border: 1px solid black;
    }
    <div class="main-container">
        <div class="menu-grid">
            <div class="left-menu">Left</div>
                <div class="right-menu">
                    <div class="right-item">Item: 1</div>
                    <div class="right-item">Item: 2</div>
                    <div class="right-item">Item: 3</div>
                    <div class="right-item">Item: 4</div>
                    <div class="right-item">Item: 5</div>
                    <div class="right-item">Item: 6</div>
                    <div class="right-item">Item: 7</div>
                    <div class="right-item">Item: 8</div>
                    <div class="right-item">Item: 9</div>
                    <div class="right-item">Item: 10</div>
                    <div class="right-item">Item: 11</div>
                    <div class="right-item">Item: 12</div>
                    <div class="right-item">Item: 13</div>
            </div>
        </div>
    </div>

    reply
    0
  • Cancelreply