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

<button type="button" class="js-change">Переключить</button>
* {
	box-sizing: border-box;
}

.js-change {
	position: fixed;
	top: 20px;
	left: 20px;
	padding: 20px;
	font-size: 20px;
	background-color: white;
	border: 0;
}

body {
	background-color: #23262d;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	max-width: 400px;
	height: 400px;
	gap: 20px;
	margin: 80px auto;
	
	transition: all 0.3s ease;
}

.item {
	background-color: hsl(36, 100%, 60%);
}

.grid--mod{
	gap: 50px;
}
View Compiled
const btn = document.querySelector('.js-change');

const grid = document.querySelector('.grid');

btn.addEventListener('click', function(evt) {
	evt.preventDefault();
	
	grid.classList.toggle('grid--mod');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.