Using CSS Grid instead of Float's for a 3 column simple list

HTML

<!-- The old float layout -->
<h2>The old Float Layout</h2>
<p>Now that i look at this code it seems quite simple and neat.</p>
<div class='f-container'>
  <div class='f-item'>Item 1</div>
  <div class='f-item'>Item 2</div>
  <div class='f-item'>Item 3</div>
</div>
<p>Now lets have a look at this same layout with css grid, and see what is improved. </p>
<h2>The New CSS Grid layout</h2>
<p>You can see that the code is a bit neater here, and the grid is all specified in the container. You can specify the width of each item, and then also add a px gap still, and the items go all the way to the edge of the container, so its definately better. </p>
<p>It seems that grid's are much neater and easier to control the layout. I will try and start using this rather than floats!</p>
<div class='g-container'>
  <div class='g-item'>Item 1</div>
  <div class='g-item'>Item 2</div>
  <div class='g-item'>Item 3</div>
</div>

<p>So if i wanted to make the middle item 50% i could just change that in the container grid, rather than having to add a class to the item, or selecting it with n-th. </p>
<div class='g-container-2'>
  <div class='g-item'>Item 1</div>
  <div class='g-item'>Item 2</div>
  <div class='g-item'>Item 3</div>
</div>

CSS

/* The old float layout */
.f-container {
	overflow:auto;
  	clear: both;
  	width:100%;
  	margin-bottom:20px;
}
.f-item {
  	width:31%;
  	margin:0 1%;
	float:left;
  	border-radius:5px;
  	background:teal;
  	padding:30px;
}
/* The old float layout */

/* The New CSS Grid layout */
.g-container {
	display: grid;
  	grid-template-columns: 33.33% 33.33% 33.33%;
  	grid-template-rows: 100%;  
  	grid-gap: 10px;
  	margin-bottom:20px;
}
.g-item {
  	border-radius:5px;
  	background:purple;
  	padding:30px;  
}
/* The New CSS Grid layout */

/* Different Grid Item Widths */
.g-container-2 {
	display: grid;
  	grid-template-columns: 25% 50% 25%;
  	grid-template-rows: 100%;  
  	grid-gap: 10px;
  	margin-bottom:20px;
}
/* Different Grid Item Widths */