如何设置所有css-grid (或flex)元素的大小相同？

Question

我正在尝试为我的web应用程序(学生预算)创建一个新的富文本编辑器，在尝试将所有按钮设置为相同大小时，除了网格/flex布局之外，其他一切都运行得很好。

Here是目前编辑外观的方式。注意到最后一个图标比其他图标大得多吗？

除了有这个问题之外，行中的按钮数量将是未知的，因为我正在构建的API允许定义此编辑器将具有哪些属性

在网上搜索了多个地方后，我找到的所有结果都与我目前已经拥有的css相同。This is the first external source I've tried。尝试the flexbox也会得到类似的结果

如果以下代码中缺少某些内容，或者您想直接尝试清理后的标记，请访问jsfiddle

css标记将修改的javascript的HTML输出

<ttace data-empty="Type something to create a post" class="TTACEEditor">
  <div class="ttace controls">
    <div>
        <div>
            <button title="Bold"><span class="ttace icon bold"></span></button>
            <button title="Italic"><span class="ttace icon italic"></span></button>
            <button title="Strike through"><span class="ttace icon strike-through"></span></button>
            <button title="Underline"><span class="ttace icon underline"></span></button>
            <button title="Insert horizontal rule"><span class="ttace icon hr"></span></button></div>
        <div>
            <button title="Align left"><span class="ttace icon justify-left"></span></button>
            <button title="Align center"><span class="ttace icon justify-center"></span></button>
            <button title="Align right"><span class="ttace icon justify-right"></span></button>
            <button title="Align full"><span class="ttace icon justify-full"></span></button></div>
        <div>
            <button title="Ordered list"><span class="ttace icon ordered-list"></span></button>
            <button title="Unordered list"><span class="ttace icon unordered-list"></span></button>
            <button title="Outdent"><span class="ttace icon indent-left"></span></button>
            <button title="Indent"><span class="ttace icon indent-right"></span></button></div>
        <div>
            <button title="Clear formatting"><span class="ttace icon clear-formatting"></span></button>
        </div>
    </div>
  </div>
  <div class="ttace textarea" contenteditable="true" data-empty="Type something to create a post"></div>
</ttace>

这是使用css-grid作为布局模板的代码

.TTACEEditor>.ttace.controls {
    margin: 0;
    padding: 0;
    display: flex;
}

.TTACEEditor>.ttace.controls>div {
    margin: 0 auto;
    padding: 0;
    display: inline-grid;
    grid-auto-flow: column;
    width: 100%;
}

.TTACEEditor>.ttace.controls>div>div {
    display: inline-grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-flow: column;
}

.TTACEEditor>.ttace.controls>div div button {
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    width: 100%;
    text-align: center;
}

.icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
}

这是使用flex，但输出非常相似，具有与上述标记相同的问题

.TTACEEditor>.ttace.controls {
    margin: 0;
    padding: 0;
    display: flex;
}

.TTACEEditor>.ttace.controls>div {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.TTACEEditor>.ttace.controls>div>div {
    display: inline-flex;
    flex-grow: 1;
    grid-auto-flow: column;
}

.TTACEEditor>.ttace.controls>div div button {
    color: black;
    margin: 0 auto;
    display: inline-block;
    flex-grow: 1;
    height: 100%;
    background-color: transparent;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
}

Answer 1

首先，由于目前没有浏览器支持建议的css subgrid specification，我建议不要尝试在嵌套网格中均匀分布项目。

其次，将图标分组为部分(创建嵌套的html结构)，这会导致“包含多个网格的网格”，这是一个很难的要求吗？如果没有，我强烈推荐一个扁平化的结构，因为这样布局就可以访问所有的按钮，并且大小相等。

最后，据我所知，你的按钮只有一行，所以使用grid布局并不是很合适，因为它主要是针对2d布局的，在你的例子中，一个好的ol flex也会做得很好(并且会对wider range of browsers有更好的支持)。

考虑到所有这些，我已经修改了您的代码，这些更改可以在in this fiddle中找到