Skip to main content
Practice

advanced-grid-techniques

---
id: advanced-grid-techniques
title: Advanced Grid Techniques
description: Advanced techniques in CSS Grid and how to combine Grid with Flexbox
tags:
  - CSS
  - Grid
  - Flexbox
  - Layout
  - Advanced
sidebar_position: 9
isPublic: false
---

# 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.

```css title="CSS"
.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.


grid-template-areas​

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

CSS
.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.

CSS
.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;
}

Fine-Tuning Layouts​

minmax() sets the minimum and maximum size of grid items.

CSS
.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.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.