例えばこんな感じ。

横幅 180px のボタンが横並びで表示されていますが、親の幅が小さくなって 180px のボタン2個が収まらなくなり、1列になったときは、100% 幅で表示されます。

ボタンに直接サイズを指定しようとすると難しいですが、CSS グリッドを使えば簡単に実装できます。

.buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

auto-fill にすると、180px のグリッドセルが要素にあわせて確保され、残ったスペースはそのままになります。auto-fit にすると残りのスペースを埋める形でグリッドが引き伸ばされるので、ここでは auto-fill にします。

minmax(180px, 1fr) は、グリッドセルが 180px 〜 1fr の幅で表示されます。auto-fill にしているので、折り返さなくても入りきる場合は 180px、入らなくなって1列になると 1fr で表示されます。

一応、min(180px, 100%) としておくと、親の幅が 180px より小さくなったときでもはみ出さないので安全です。

grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%),1fr));

unitone で実装するには

unitone の場合、これと同じ挙動をする「レスポンシブグリッド」というブロックがあるのでそれを使います。設定はこんな感じ。

入れ子はこう。

- レスポンシブグリッド（unitone/responsive-grid）
  - ボタン（core/buttons）
    - ボタン（core/button）
  - ボタン（core/buttons）
    - ボタン（core/button）

レスポンシブグリッドの下にボタン（core/button）を2つ置ければきれいですが、ボタンブロックの仕様上それはできないので、上記のような入れ子になります。

で、ボタン（core/button）の幅を 100% に設定します。そしたらグリッドセルのサイズ（180px or 1fr）にあわせて広がってくれます。