Here's a different layout option with a sidebar
<div class="row">
<div class="main-content columns small-6>
{main content}
</div>
<div class="columns small-6>
{sidebar}
</div>
</div>
And here is another layout without a sidebar
<div class="row">
<div class="columns small-12">
{main content}
</div
</div>
When it comes to the main content section, the code looks like this
<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
In Layout 2, the main content adjusts properly at different screen sizes. However, I am looking for a way to have the block grid adapt based on the available width inside the parent section instead of the total screen width.
For instance, in Layout 1 where the main content column is 450px wide, the block grid should automatically adjust to "small-block-grid-1", regardless of the overall screen size being greater than 900px (medium size).