CSS grid-template Property - Playground Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.grid-container,
.grid-container2 {
   display: grid;
   margin-top: 5px; 
   padding: 10px;
   background: rgb(0,150,208);
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000;
   text-align: center;
} 
.grid-container {
   grid-template: [row1] 1fr [row2] 2fr [row3] 3fr / [col1] 25% [col2] 25% [col3] 25%;
}
.grid-container2 {
   grid-template: 60px 40px 20px /  1fr 2fr 1fr;
}
</style>
</head>
<body>
<div class="grid-container">
   <div>A</div>
   <div>B</div>
   <div>C</div>
   <div>D</div>
   <div>E</div>
   <div>F</div>
   <div>G</div>
   <div>H</div>
</div>
<div class="grid-container2">
   <div>A</div>
   <div>B</div>
   <div>C</div>
   <div>D</div>
   <div>E</div>
   <div>F</div>
   <div>G</div>
   <div>H</div>
</div>
</body>
</html>