Advanced Grid Techniques

By using Grid for 2-dimensional (rows and columns) layouts and Flexbox for 1-dimensional (row or column) layouts together, you can efficiently create complex layouts.

For example, the entire page layout can be constructed with Grid, while smaller section layouts within it (e.g., the menu bar) can be built with Flexbox.

Copy
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.menu {
  display: flex;
  justify-content: space-between;
}

In the code above, .container uses Grid, and .menu uses Flexbox to take advantage of each layout system's strengths.

The grid-template-areas property defines grid areas by using quotes (" ") or (' ') for each row.

Copy
.container {
  display: grid;
  grid-template-areas:
    'navbar navbar' /* Navigation area */
    'sidebar main-content' /* Sidebar and main content area */
    'footer footer'; /* Footer area */
}

This code defines four areas: navbar, sidebar, main-content, and footer, and uses appropriate CSS classes to shape the layout.

Copy
.navbar {
  /* Navigation bar */
  grid-area: navbar;
  background-color: #f2f2f2;
}

.sidebar {
  /* Sidebar */
  grid-area: sidebar;
  background-color: #add8e6;
}

.main-content {
  /* Main content */
  grid-area: main-content;
  background-color: #e6e6e6;
}

.footer {
  /* Footer */
  grid-area: footer;
  background-color: #4caf50;
}

• minmax(): Specifies the minimum and maximum size of grid items

Copy
.container {
  display: grid; /* Grid container */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

The code above sets the minimum width of columns inside .container to 200px, and the maximum width to 1fr, while filling as many columns as possible automatically.

Follow the sections marked with asterisks in the code and try entering them yourself.