grid-template-areas

מגדיר את אזורי התצוגה בתבנית ה-Grid.

אפשר להגדיר את זה לדוגמה כך

    
          <style>
            .container {
              display: grid;
              grid-template-areas: 
                "header header"
                "main sidebar"
                "footer footer";
              grid-template-columns: 1fr 1fr;
              grid-template-rows: auto 1fr auto;
              gap: 10px;
            }
            .header {
              grid-area: header;
              background-color: lightcoral;
              padding: 20px;
            }
            .main {
              grid-area: main;
              background-color: lightblue;
              padding: 20px;
            }
            .sidebar {
              grid-area: sidebar;
              background-color: lightgreen;
              padding: 20px;
            }
            .footer {
              grid-area: footer;
              background-color: lightgray;
              padding: 20px;
            }
          </style>
          <div class="container">
            <div class="header">Header</div>
            <div class="main">Main Content</div>
            <div class="sidebar">Sidebar</div>
            <div class="footer">Footer</div>
          </div>
        
    

עוד בקטגוריה Grid (מודל פריסת רשת)