In the above image, you can see track sizes are shown as I inspect the page, but as per my knowledge they are showing wrong track sizes.
For example, in the first row track size it is showing 150px.100px whereas as per my knowledge it should be 150px.900px as the total row width is 900px, because as my columns are divided into 400px, 300px, 200px in the grid.
Can you tell me where my misunderstanding is?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>CSS Grid</title>
<style>
*{
box-sizing: border-box;
}
.container{
border: 2px solid brown;
display: grid;
grid-template-columns: 400px 300px 200px;
grid-template-rows: 150px 250px auto;
}
.item{
border: 2px solid black;
margin: 5px;
height: 100px;
width: 100px;
background-color: yellow;
}
.item1{
grid-row: 1/3;
}
.item2{
}
.item3{
}
.item4{
}
.item5{
grid-row: 1/3;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>
</html>
