CSS Grids and Fraction Unit - html

Question

I'm trying to understand the basics of CSS grids but have a problem with fraction grid-template: repeat(4, 1fr) / repeat(3, 1fr); unit.
.grid-container {
display: grid;
grid-template: repeat(4, 1fr) / repeat(3, 1fr);
grid-gap: 20px;
grid-template-areas: 'header header header' 'sidebar content content' 'sidebar content content' 'footer footer footer';
}
.item-1 {
grid-area: content;
background: #000;
color: #ffffff;
text-align: justify;
padding: 10px;
}
.item-2 {
grid-area: sidebar;
background: #852021;
color: #ffffff;
padding: 10px;
}
.item-3 {
grid-area: header;
background: yellow;
text-align: center;
padding: 10px;
}
.item-4 {
grid-area: footer;
background: gray;
color: #fff;
text-align: center;
padding: 10px;
}
<div class="grid-container">
<div class="item-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nulla sapiente cumque ratione quas consequatur, quaerat qui possimus et voluptatibus expedita tempore porro fuga aliquam, cum aut rerum perspiciatis blanditiis.
</div>
<div class="item-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nulla sapiente cumque ratione quas consequatur, quaerat qui possimus et voluptatibus expedita tempore porro fuga aliquam, cum aut rerum perspiciatis blanditiis.
</div>
<div class="item-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nulla sapiente cumque ratione quas consequatur, quaerat qui possimus et voluptatibus expedita tempore porro fuga aliquam, cum aut rerum perspiciatis blanditiis.
</div>
<div class="item-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nulla sapiente cumque ratione quas consequatur, quaerat qui possimus et voluptatibus expedita tempore porro fuga aliquam, cum aut rerum perspiciatis blanditiis.
</div>
</div>

Answer 1

It allows you to define a ratio. So if you use "1fr 1fr 1fr 1fr" this means 4 columns, each with 1 share of the width, so they will each be 25% of the width. If however you use "1fr 2fr 1fr" then there will be 3 columns, where the first and last will both be 25% but the middle one will be 50%.
It makes adding another column easier, without having to do the maths to work out what all the percentages should be now.
See this article for more information.

Answer 2

The first part defines 4 rows, each with 1 fr, so each row will get 25% of the total height
The second part defines 3 columns, each with 1 fr, so each column will get 33% of the total width.
THis agrees with the following definition of areas, where there are 4 strings, one for each row, with 3 names in every string, one for each column.