DEV Community

Cover image for Advanced CSS Grid Techniques
Ridoy Hasan
Ridoy Hasan

Posted on • Updated on

Advanced CSS Grid Techniques

#webdev #css #learning #programming

Lecture 10: Advanced CSS Grid Techniques

Welcome to the tenth lecture of the "Basic to Brilliance" course. In this lecture, we’ll delve deeper into advanced CSS Grid techniques. These techniques will enable you to create even more complex and responsive layouts. By the end of this lecture, you’ll be able to work with grid areas, grid auto-placement, and combine CSS Grid with other layout systems like Flexbox.

1. Grid Areas

Grid areas allow you to assign names to sections of your grid, making it easier to manage and visualize your layout.

  • Example: Naming grid areas for a layout with a header, sidebar, content, and footer.

HTML:

<div class="grid-container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}
Enter fullscreen mode Exit fullscreen mode

In this example:

  • Grid Areas: The grid-template-areas property defines a layout with three sections: a header spanning two columns, a sidebar and main content in the middle, and a footer.
  • By assigning grid items (header, sidebar, etc.) to specific areas, you control the layout more effectively.

2. Grid Auto-Placement

CSS Grid has an auto-placement feature that automatically positions grid items when they are not explicitly placed. You can control how this works using grid-auto-flow.

  • Values:

    • row: Items are placed row by row (default).
    • column: Items are placed column by column.
    • dense: Items will be packed into empty spaces in the grid.

  • Example:

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense; /* Auto-places items and packs them densely */
  }
Enter fullscreen mode Exit fullscreen mode

In this case, grid items will be placed row by row, and smaller items will fill any gaps.

3. Using the minmax() Function

The minmax() function allows you to define a range for grid tracks, such as specifying the minimum and maximum size a grid track can take.

  • Example: 
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
Enter fullscreen mode Exit fullscreen mode

In this example:

  • The grid has three columns.
  • Each column will be at least 150px wide but can grow to fill the available space (1fr).

4. Grid Auto-Fill vs. Auto-Fit

Both auto-fill and auto-fit are used to create dynamic grids, but they work slightly differently:

  • Auto-Fill: Adds as many columns as possible, even if they’re empty.

  • Auto-Fit: Shrinks or grows columns to fit the available space.

  • Example: Auto-fit and auto-fill comparison.

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

  .grid-container-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Auto-fit */
  }
Enter fullscreen mode Exit fullscreen mode

Both options automatically adjust the number of columns based on the available space, but auto-fit will collapse empty columns.

5. Combining CSS Grid with Flexbox

While CSS Grid is great for structuring the overall layout, Flexbox is perfect for controlling alignment within individual items. You can combine both to handle different parts of your layout.

  • Example: Using CSS Grid for the main layout and Flexbox for alignment inside grid items.

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="content">
    <div class="flexbox-item">Item 1</div>
    <div class="flexbox-item">Item 2</div>
  </div>
  <div class="footer">Footer</div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flexbox-item {
  padding: 20px;
  background-color: #ddd;
}
Enter fullscreen mode Exit fullscreen mode

In this example:

  • Grid Layout: The overall layout is structured with CSS Grid, with a header, content, and footer.
  • Flexbox: The content section uses Flexbox to align items inside it.

6. Implicit vs. Explicit Grids

Grids can be defined explicitly (using grid-template-columns and grid-template-rows) or implicitly (where new tracks are created automatically).

  • Explicit Grid: You define the number of rows and columns.

  • Implicit Grid: The grid automatically creates rows or columns to accommodate extra items.

  • Example:

  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-rows: 50px; /* Implicitly adds rows */
  }
Enter fullscreen mode Exit fullscreen mode

In this case, the grid will automatically create new rows if more items are added than fit in the defined columns.

7. Creating a Full-Page Grid Layout

Let’s use CSS Grid to create a responsive full-page layout with a header, main content area, sidebar, and footer.

HTML:

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main-content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh; /* Full height layout */
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: #f4f4f4;
  padding: 20px;
}

.main-content {
  grid-area: main;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

In this example:

  • Grid Areas: The layout consists of a header, sidebar, main content, and footer.
  • The grid adjusts the height of each section automatically, filling the full viewport height.

Practice Exercise

  1. Create a responsive blog layout with a header, sidebar, main content, and footer using CSS Grid.
  2. Use grid-template-areas to define the structure.
  3. Make the layout responsive by adjusting the number of columns on different screen sizes.

Next Up: In the next lecture, we’ll explore CSS Positioning and how to position elements using properties like absolute, relative, and fixed. Get ready to enhance your layout control even further!

follow me on LinkedIn

Ridoy Hasan

visit my website- Ridoyweb.com

Top comments (2)

Collapse
 
wizard798 profile image
Wizard •

Very helpful, but it can be more useful if you've included some demos cause it can greatly Fit in mind

Collapse
 
ridoy_hasan profile image
Ridoy Hasan •

I will try next time

Read next

codemee profile image

HTML meta 標籤中 viewport 的設定

codemee -

codeitbro profile image

How to Create a Gamertag Generator App Using Next.js

CodeItBro -

suzuki0430 profile image

Avoiding Connection Pinning in Lambda and RDS Proxy with NestJS and Proxy Splitting

Atsushi Suzuki -

nozibul_islam_113b1d5334f profile image

list of the most common JavaScript string methods

Nozibul Islam -