Simple CSS Grid Example

HTML Code:

<div class="grid-container">
  <div class="grid">Gird 1</div>
  <div class="grid">Grid 2</div>
  <div class="grid">Grid 3</div>
  <div class="grid">Gird 4</div>
  <div class="grid">Grid 5</div>
  <div class="grid">Grid 6</div>
</div>

CSS Grid Style Code:

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

.grid {
  background-color: lightgray;
  border: 2px inset #333;
  border-radius: 10px;
  padding: 25px;
  text-align: center;
}

CSS Grid Example Output:

Gird 1
Grid 2
Grid 3
Gird 4
Grid 5
Grid 6

Comments & Discussion

Facing issues? Have questions? Post them here! We're happy to help!