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 is a seasoned developer with over 10 years of experience in web and app development, and a deep knowledge of operating systems. Author of insightful How-To articles for Code2care.

Follow him on: X

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