Как использовать display: grid для создания адаптивного макета из двух столбцов, где оба столбца должны иметь минимальную и / или максимальную ширину?

Question

Когда в контейнере достаточно места, я хочу, чтобы дочерний макет составлял два столбца, но если места недостаточно, они должны быть просто двумя строками, занимающими всю ширину.(типичная адаптивная сетка)

Я могу сделать это обычным способом с медиа-запросами.Но я хотел бы знать, есть ли лучшее решение, использующее display:grid.Тем более, что медиа-запросы работают только с шириной области просмотра и хотели бы, чтобы это работало на уровне контейнера.(избегая JS-решений, таких как resizeObserver)

Хотелось бы, чтобы он вел себя так:

• Если места достаточно (min-width: 30em):
  A:Ширина столбца: 10em + B: минимум столбца 20em

• Если места недостаточно (<30em): <br>A (= полная ширина строки) B (= полная ширина строки)

Можно ли это сделать с display:grid и без медиазапросов?Это также должно работать с пространством между дочерними элементами, например, как grid-row-gap.