Advanced CSS Grid Techniques

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>

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

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 */
  }

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));
  }

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 */
  }

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>

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

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 */
  }

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>

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

In this example:

• 그리드 영역: 레이아웃은 헤더, 사이드바, 메인 콘텐츠, 바닥글로 구성됩니다.
• 그리드는 각 섹션의 높이를 자동으로 조정하여 전체 뷰포트 높이를 채웁니다.

---

연습

1. CSS 그리드를 사용하여 머리글, 사이드바, 기본 콘텐츠, 바닥글이 포함된 반응형 블로그 레이아웃을 만듭니다.
2. 그리드 템플릿 영역을 사용하여 구조를 정의하세요.
3. 다양한 화면 크기에서 열 수를 조정하여 반응형 레이아웃을 만드세요.

---

다음: 다음 강의에서는 CSS 위치 지정과 절대, 상대, 고정과 같은 속성을 사용하여 요소의 위치를 ​​지정하는 방법을 살펴보겠습니다. 레이아웃 제어를 더욱 강화할 준비를 하세요!

---

LinkedIn에서 나를 팔로우하세요

리도이 하산

The above is the detailed content of Advanced CSS Grid Techniques. For more information, please follow other related articles on the PHP Chinese website!