<!--

Forum question answer only

https://www.sitepoint.com/community/t/how-to-make-a-flexible-column-with-css-grid/396994
-->

<div class="flex">
	<div class="flex-item">1</div>
	<div class="flex-item">2</div>
	<div class="flex-item">3</div>
	<div class="flex-item">4</div>
</div>
<hr>
<div class="flex">
	<div class="flex-item">1</div>
	<div class="flex-item">2</div>
	<div class="flex-item">3</div>
</div>

.flex {
	display: flex;
	flex-wrap:wrap;
	gap: 10px;
	background-color: #2196f3;
	padding: 10px;
}
.flex-item, {
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 20px 0;
	font-size: 30px;
	flex:1 0 0;
}
.flex-item:first-child {
	flex:1 0 100%;
}