Grid Playground | Grid Guide

Pelajari Grid CSS dengan visual yang mudah dipahami

Kolom:

Gap:

Item 1

Item 2

Item 3

Item 4


<div className="grid">
  <div className="grid-item">Item 1</div>
  <div className="grid-item">Item 2</div>
  <div className="grid-item">Item 3</div>
  <div className="grid-item">Item 4</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.grid-item {
  background-color: rgb(30,41,59);
  display:flex;
  justify-content: center;
  align-items: center;
}