Advanced Grid Techniques

Using Grid for a 2-dimensional (rows and columns) layout and Flexbox for a 1-dimensional (row or column) layout together can efficiently create complex layouts.

For instance, you might use Grid for the overall page layout and Flexbox for smaller section layouts (e.g., a menu bar) within it.

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

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

In the code above, .container utilizes Grid and .menu utilizes Flexbox, capitalizing on the strengths of each layout method.

The grid-template-areas property defines grid areas using quotes (" "), (' ') 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, assigning corresponding CSS classes for layout organization.

Copy
.navbar {
  /* Navigation bar listing menu items */
  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() sets the minimum and maximum size of grid items.

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

This code specifies that the columns within .container have a minimum size of 200px and a maximum size of 1fr, filling as many columns as possible automatically.

Follow the highlighted parts of the code and try entering it yourself.