<>

1. Basic Grid Layout

1
2
3
4
5
6

HTML:

          

            <div class="basic-grid"> 
              <div class="basic-grid-item">1</div> 
              <div class="basic-grid-item">2</div> 
              <div class="basic-grid-item">3</div> 
              <div class="basic-grid-item">4</div> 
              <div class="basic-grid-item">5</div> 
              <div class="basic-grid-item">6</div> 
            </div>

CSS:

          

            .basic-grid { 
              display: grid; 
              grid-template-columns: repeat(3, 1fr);
              gap: 20px; 
            } 
            .basic-grid-item { 
              background-color: #3498db; 
              color: white; 
              padding: 20px; 
              text-align: center; 
              border-radius: 4px; 
            }

2. Grid Template Areas

Header
Main Content
Footer

HTML:

          

            <div class="layout-grid"> 
              <header class="header">Header</header> 
              <nav class="sidebar">Sidebar</nav> 
              <main class="main">Main Content</main> 
              <footer class="footer">Footer</footer> 
            </div>

CSS:

          

            .layout-grid { 
              display: grid; 
              grid-template-areas: "header header header" 
                                   "sidebar main main" 
                                   "footer footer footer";
              grid-template-columns: 200px 1fr 1fr; 
              gap: 20px; 
            } 
            .header {
              grid-area: header; 
            } 
            .sidebar { 
              grid-area: sidebar; 
            } 
            .main {
              grid-area: main; 
            } 
            .footer { 
              grid-area: footer; 
            }

3. Gallery Grid Layout

Wide Image 1
Tall Image
Normal 1
Normal 2
Wide Image 2
Normal 3

HTML:

          

            <div class="gallery-grid"> 
              <div class="gallery-item wide">Wide Image 1</div> 
              <div class="gallery-item tall">Tall Image</div> 
              <div class="gallery-item">Normal 1</div> 
              <div class="gallery-item">Normal 2</div> 
              <div class="gallery-item wide">Wide Image 2</div> 
              <div class="gallery-item">Normal 3</div> 
            </div>

CSS:

          

            .gallery-grid { 
              display: grid; 
              grid-template-columns: repeat(3, 1fr); 
              grid-auto-rows: 150px; gap: 20px; 
            } 
            .gallery-item {
              background-color: #9b59b6; 
              color: white; 
              padding: 20px; 
            } 
            .wide {
              grid-column: span 2; 
              background-color: #e67e22; 
            } 
            .tall { 
              grid-row:
              span 2; 
              background-color: #16a085; 
            }