CSS Grid Layout Simple Example

 .ui .layout {

    display: grid;
    grid-template-columns: 90px auto;
    grid-template-rows: 60px auto 30px;
    grid-template-areas: 
        "sidebar header"
        "sidebar content-section"
        "sidebar footer";
    height: 100vh; /* Full height of the viewport */
}

---

Explanation of Each Property:

1. display: grid;

   • This sets the layout type to grid, which allows placing child elements in a structured way (rows and columns).

2. grid-template-columns: 90px auto;

   • This defines two columns:
     • The first column is fixed at 90px width (typically for a sidebar).
     • The second column takes up the remaining space (auto).

3. grid-template-rows: 60px auto 30px;

   • This defines three rows:
     • The first row is 60px (likely for a header).
     • The second row expands to fit the available space (auto), probably for the main content section.
     • The third row is 30px (probably for a footer).

4. grid-template-areas: ...;

   • This names specific areas within the grid and assigns elements to them.
   • Layout Explanation:

     "sidebar header"
     "sidebar content-section"
     "sidebar footer"
     

   • This means:
     • The sidebar occupies the first column across all three rows.
     • The header is in the first row, second column.
     • The content-section is in the second row, second column.
     • The footer is in the third row, second column.

---

Visual Layout Overview:

+---------------------+------------------------+
|      Sidebar (90px) | Header (60px)          |
+---------------------+------------------------+
|      Sidebar (90px) | Content-Section (auto) |
+---------------------+------------------------+
|      Sidebar (90px) | Footer (30px)          |
+---------------------+------------------------+

---

How to Use the Named Grid Areas:

With grid-template-areas, you can assign elements to these named areas using the grid-area property:

<div class="ui">
  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="header">Header</div>
    <div class="content-section">Content</div>
    <div class="footer">Footer</div>
  </div>
</div>

.sidebar {
    grid-area: sidebar;
    background-color: lightgray;
}

.header {
    grid-area: header;
    background-color: lightblue;
}

.content-section {
    grid-area: content-section;
    background-color: lightgreen;
}

.footer {
    grid-area: footer;
    background-color: lightcoral;
}

---

Summary:

• The layout creates two columns and three rows.
• The sidebar spans the first column across all rows.
• The header, content-section, and footer are placed in the second column, each in a different row.
• This structure is useful for building dashboards or complex UIs where you need consistent sections like a sidebar, header, and content area.