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>