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

Facing issues? Have Questions? Post them here! I am happy to answer!

Author Info:

Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.

Follow him on: X

You can also reach out to him via e-mail: rakesh@code2care.org

Copyright © Code2care 2024 | Privacy Policy | About Us | Contact Us | Sitemap