JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
			<div class="cssgrid">
				<!-- row -->
				<div class="column column1">0</div>
				<div class="column column2">1</div>
				<div class="column column3">2</div>
				<div class="column column4">3</div>
				<div class="column column5">4</div>
				<!-- row -->
				<div class="column column1">5</div>
				<div class="column column2">6</div>
				<div class="column column3">7</div>
				<div class="column column4">8</div>
				<div class="column column5">9</div>
			</div>
		</div>

CSS

body {
				margin: 0;
			}
			.container {
				width: 100%;
			}
			.cssgrid {
				display: grid;
				grid-template-columns: minmax(40px, 40px) repeat(3, 1fr) minmax(40px, 40px);
				grid-auto-flow: dense;
			}
			.column {
				padding: 10px;
				border-bottom: 1px solid black;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.column1 {
				grid-column: 1;
				background-color: wheat;
			}
			.column2 {
				grid-column: 2;
				background-color: palegreen;
			}
			.column3 {
				grid-column: 3;
				background-color: lemonchiffon;
			}
			.column4 {
				grid-column: 4;
				background-color: lightcyan;
			}
			.column5 {
				grid-column: 5;
				background-color: thistle;
			}
			@media screen and (max-width: 800px) {
				.cssgrid {
					grid-template-columns: minmax(25px, 25px) repeat(2, 1fr) minmax(25px, 25px);
				}
				.column1 {
					grid-column: 1;
					grid-row: span 2;
				}
				.column2 {
					grid-column: 2;
					border: 0;
				}
				.column3 {
					grid-column: 3;
					border: 0;
				}
				.column4 {
					grid-column: 2;
					grid-column: span 2;
				}
				.column5 {
					grid-column: 4;
					grid-row: span 2;
				}
			}