Css 内容居中和左对齐的两列布局

我希望创建一个两列列表。其中，内容宽度基于最大元素的宽度，然后左对齐并居中。

看起来是这样的。 代码与此类似

<div class="grid">
  <div class="radio">
    <input type="radio">
    <label>United States</label>
  </div>
    <div class="radio">
    <input type="radio">
      <label>Canada</label>
  </div> 
  <div class="radio">
    <input type="radio">
    <label>Brazil</label>
  </div>
    <div class="radio">
    <input type="radio">
      <label>Argentina</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Peru</label>
  </div> 
  <div class="radio">
    <input type="radio">
  <label>Ivory Coast</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Really Long Content</label>
  </div>
    <div class="radio">
    <input type="radio">
      <label>Guatamala</label>
  </div>
</div>

美国
加拿大
巴西
阿根廷
秘鲁
象牙海岸
很长的内容
瓜塔马拉

您可以在以下位置上使用

宽度：最大内容

和

边距：自动

：

• a

  网格

.grid{
显示：网格；
网格模板列：重复（2，1fr）；
宽度：最大含量；
保证金：自动；
边框：实心；
间距：0.1米；
}
.收音机{
盒影：0 1px；
}

美国
加拿大
巴西
阿根廷
秘鲁
象牙海岸
很长的内容
瓜塔马拉