Html 自动环绕CSS3网格（具有自动拟合）和各种宽度

是否有可能创建一个网格布局

• 始终使用100%宽度
• 如果有足够的空间，则将其元素彼此相邻放置，但如果没有，则将其包装并使用两行/几行
• 和其他元素相比，第一个元素使用不同的宽度

我试图建立一个漂亮的联系形式（种类），一行应包括公司名称字段以及税号字段。后者应该只占台式机/横向屏幕宽度的1/3，但如果将其包装到下一行，则应占100%

如果两者的宽度相同，则效果良好：

.grid容器{
显示：网格；
证明内容：之间的空间；
内容对齐：间距均匀；
栅柱间隙：10px；
柱间距：10px；
网格自动流：行；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
调整项目：拉伸；
对齐项目：拉伸；
}

但是我需要类似于

网格模板列的东西：5fr repeat（auto-fit，2fr）（不工作）：


组织
VAT-Id.


如果没有
重复（自动调整，…）
单元格不会被包裹。但重复我认为没有可能结合不同的宽度。我说得对吗？我错过什么了吗？
我曾考虑过使用媒体查询，但如果没有必要，我想避免使用。
justify content
是flexbox的一个属性。它对栅格没有影响。与对齐内容、对齐项目和对齐项目相同

。所有这些都是纯flexbox属性，而不是网格属性。使用

网格柱间隙

和

柱间隙

是多余的。两者都是完全相同的财产。PS：为什么不将

flexbox

与

flexgrow

一起使用呢？