<!--

Forum question answer only

https://www.sitepoint.com/community/t/how-to-make-a-flexible-column-with-css-grid/396994
-->
<div class="top">1</div>
<div class="grid">
	<div class="grid-item">2</div>
	<div class="grid-item">3</div>
	<div class="grid-item">4</div>
</div>
<hr>

<div class="top">1</div>
<div class="grid">
	<div class="grid-item">2</div>
	<div class="grid-item">3</div>
</div>
.grid {
	display: grid;
	gap: 10px;
	background-color: #2196f3;
	padding: 10px;
	grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
}
.grid-item,.top {
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 20px 0;
	font-size: 30px;
	position:relative;
}
.top{
	padding:10px 20px;
	border:10px solid #2196f3;
	border-bottom:none;
}
.top:before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-color: #2196f3;
	z-index:-1;
}

View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.