JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex grid">
    <div class="item">
        <img src="https://via.placeholder.com/500x500" />
    </div>
    <div class="item">
        <img src="https://via.placeholder.com/500x500" />
    </div>
    <div class="item">
        <img src="https://via.placeholder.com/500x500" />
    </div>
    <div class="item">
        <img src="https://via.placeholder.com/500x500" />
    </div>
</div>

<div class="options">
</div>

CSS

.flex {
    display: flex;
	width: fit-content;
}

.flex.grid {
	display: grid;
 	grid-template: 100px / auto auto;
}

.flex.wrap {
	flex-wrap: wrap;
	width: 250px;
	justify-content: space-evenly;
}

.flex .item {
    display: flex;
    height: 100px;
}

.flex .item img {
    height: 100%;
}

.options {
	display: flex;
	margin-top: 20px;
}

.options .option {
	display: flex;
	background: gray;
	padding: 4px 8px;
	margin-right: 2px;
}

.options .option.selected {
	background: #ccc;
}

JavaScript

const options = [
	'grid',
	'wrap'
];

const optionsWrapper = document.querySelector('.options');
const flex = document.querySelector('.flex');

for (const option of options) {
	const button = document.createElement('div');
	button.textContent = option;
	button.classList.add('option');
	// init
	if (option === 'grid') {
		button.classList.add('selected');
	} 
	button.addEventListener('click', () => {
		flex.classList = '';
		flex.classList.add('flex');
		flex.classList.add(option);
		button.classList.add('selected');
		const sibling = button.previousElementSibling || button.nextElementSibling;
		// Pretty sure I don't need this but just incase
		if (sibling) {
			sibling.classList.remove('selected');
		}
	});
	optionsWrapper.appendChild(button);
}