CSS Grid автоматически переносится в сторону, когда он достигает определенного размера

Question

Итак, я создаю макет, где у меня есть

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

Я хочу, чтобы отступ составлял четверть ширины и автоматически оборачивался ниже основного, как только он достигнет определенного размера, а основной займет всю ширину. Я знаю, что могу сделать это с помощью медиа-запросов, но люди говорят, что это можно сделать с помощью сетки и без медиа-запросов. Я экспериментировал и искал много часов и не могу решить это. Есть идеи? Если это невозможно, то это нормально, и я могу попробовать это с помощью flexbox или медиазапросов.

Реквизит заранее.

Answer 1

Приведенный ниже код div достигает определенного размера, автоматически уменьшается. Если вы хотите удалить конкретный размер div, мы должны использовать только медиа-запрос.

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

Answer 2

С помощью CSS Grid вы можете заставить main и aside брать половину доступной ширины и автообтекание , когда любой из элементов сетки попадет в минимум ширина с использованием grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - см. Демонстрацию ниже:

body {
  margin: 0;
}
#structure-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
main {
  background: aliceblue;
}
aside {
  background: cadetblue;
}

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

---

Решение

С помощью CSS Grid я бы сказал, что вы можете использовать mediaзапросы .В любом случае flexbox будет работать здесь хорошо:

• использовать упаковку flexbox
• сохранить min-width для каждого из asideи main и добавьте flex: 1 к , согните его в оставшееся пространство, если доступно - см. демонстрацию ниже:

body {
  margin: 0;
}
#structure-content {
  display: flex;
  flex-wrap: wrap; /* a wrapping flexbox */
}
main {
  background: aliceblue;
  min-width: 75vw; /* forces aside to take one-fourth space */
  flex: 1;
}
aside {
  background: cadetblue;
  min-width: 250px; /* minimum width of aside */
  flex: 1;
}

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