CSS Grid - default layout (rows)

by ospatil

HTML

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>
<div class="toolbar">
  <button onclick="addItem()">Add Item</button>
  <button onclick="removeItem()">Remove Item</button>
</div>

CSS

.grid-container {
  display: grid;
  gap: 0.5rem;
  border: 1px solid black;
  width: 20rem;
  height: 20rem;
  padding: 0.5rem;
}

.grid-item {
  background-color: gainsboro;
}

.toolbar {
  margin-top: 1rem;
}

JavaScript

function addItem() {
	document.querySelector('.grid-container').
  	insertAdjacentHTML('beforeend', '<div class="grid-item"></div>')
}

function removeItem() {
	const parent = document.querySelector('.grid-container')
  parent.removeChild(parent.lastElementChild)
  	
}