CSS Grid Layout

1.grid-container {
2  display: grid;
3  /* Creates 3 columns: 1st is 200px, 2nd & 3rd share remaining space 1:2 */
4  grid-template-columns: 200px 1fr 2fr;
5  gap: 20px;
6}

1.card-grid {
2  display: grid;
3  /* Automatically adds/removes columns based on viewport width */
4  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
5  gap: 1.5rem;
6}

1.layout {
2  display: grid;
3  grid-template-areas:
4    "header header header"
5    "sidebar main   aside"
6    "footer footer footer";
7  grid-template-columns: 200px 1fr 150px;
8  gap: 1rem;
9}
10 
11.header  { grid-area: header; }
12.sidebar { grid-area: sidebar; }
13.main    { grid-area: main; }
14.aside   { grid-area: aside; }
15.footer  { grid-area: footer; }

1/* Combined Example: Grid for layout, Flexbox inside items */
2.dashboard-grid {
3  display: grid;
4  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
5  gap: 24px;
6}
7 
8.widget-card {
9  display: flex;
10  justify-content: space-between;
11  align-items: center;
12}