JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
			<div class="main">
			</div>
				<div class="article-one">
				</div>
				<div class="article-two">
				</div>
				<div class="article-three">
				</div>
				<div class="article-four">
				</div>
			<div class="extra">
			</div>
		</div>

CSS

* {
	box-sizing: border-box;
}

body {
	background: white;
	margin: 0;
	padding: 0;	
	margin-left: auto;
	margin-right: auto;
}

.container {
	display: grid;
	grid-template-columns: repeat(1920, 1px);
	grid-template-rows: repeat(2280, 1px);	
}

.main {
	grid-column-start: 1;
	grid-column-end: 1920;
	grid-row-start: 20;
	grid-row-end: 1300;
	background: red;
}

.article-one, .article-two, .article-three, .article-four {
	grid-row-start: 1320;
	grid-row-end: 1820;
}

.article-one {	
	grid-column-start: 1;
	grid-column-end: 480;
	background: yellow;
}

	
.article-two {
	grid-column-start: 480;
	grid-column-end: 960;	
	background: green;
}

.article-three {
	grid-column-start: 960;
	grid-column-end: 1440;
	background: gray;
}

.article-four {
	grid-column-start: 1440;
	grid-column-end: 1920;
	background: black;
}

.extra {
	grid-column-start: 1;
	grid-column-end: 1920;
	grid-row-start: 1820;
	grid-row-end: 2204;
	background: red;
}