JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<div class="grid grid-half">
	<div class="grid-item"></div>
	<div class="grid-item"></div>
</div>

<div class="grid grid-trio">
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
</div>

<div class="grid grid-content">
	<div class="grid-item"></div>
	<div class="grid-item"></div>
</div>

CSS

.grid {
	display: grid;
	grid-gap: 1rem;
	
	margin-bottom: 1rem;
}

.grid-half {
	grid-template-columns: 1fr 1fr;
}

.grid-trio {
	grid-template-columns: 1fr 1fr 1fr;
}

.grid-content {
	grid-template-columns: 25% 1fr;
}

.grid-item {
	padding: 1rem;
	background-color: #cdcdcd;
}