CSS网格区域没有给出等宽的列

如何解决CSS网格区域没有给出等宽的列

我正在玩CSS Grid，以了解更多有关它的信息。我正在创建一个简单的计算器。我正在使用grid-template-areas属性来控制按钮的位置。问题是列在容器的整个宽度上分布不均匀。这是示例：

这是网格区域的CSS：

.container {
    display: grid;
    grid-template-areas: 
        'screen screen  screen   screen'
        'clear  clear   delete   divide'
        'seven  eight   nine     multiply'
        'four   five    six      subtract'
        'one    two     three    add'
        'zero   decimal negative equal';
    background-color: rgb(49,55,61);
    padding: 10px;
    grid-gap: 5px;
}

已为相应的元素分配了正确的网格区域。但是，如您在图像中看到的，9按钮比其他按钮宽得多，而清除按钮则小于屏幕宽度的一半（应该为一半）。

据我所知，使用具有4列的grid-template-area应该创建一个均匀分布的列/行，然后可以将其用于放置元素。任何帮助，将不胜感激！ ：）