I'm playing around with CSS Grid a bit to learn a bit more about it. I'm creating a simple calculator. I'm using the grid-template-areas attribute to control where the buttons go. The issue is that the columns are not being distributed evenly across the width of the container. Here is the example:
Here is the CSS for the grid areas:
.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;
}
The corresponding elements have been assigned the correct grid areas. However as you can see in the image, the 9 button is much wider than the others, and the clear button is less than half the width of the screen, when it should be half.
As far as I understand it, using grid-template-areas with 4 columns should create an evenly distributed column/row that can then be used to place elements. Any help would be appreciated! :)
