CSS Grid auto-wrap aside when it gets to a certain size

Question

So I am creating a layout where I have a

<div id="structure-content">
<main>content goes here</main>
<aside>aside content</aside>
</div>

I want the aside to be a quarter of the width and to automatically wrap to below the main once it hits a certain size and the main to take the full width. I know I can do this with media queries but people are saying that it can be done with grid and no media queries. I have been experimenting and researching for hours and cannot work it out. Any ideas? If it cannot be done then that is fine and I can try it with flexbox or media queries.

Props in advance.

Answer 1

The below code the div reach certain size will goes down automatically. If you want to drop the div particular size we have to use media query only.

#structure-content {
    margin-bottom: 1em;
    background: #fff;
    color: #fff;
    padding: 1.5em 1em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

main {
    background: green;
}

aside {
    background: blue;
}

main,
aside {
    flex: 1 0 15em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

<div id="structure-content">
    <main>content goes here</main>
    <aside>aside content</aside>
</div>