fix(curriculum): add missing information for css grid review (freeCodeCamp#58457)

Author: jdwilkin4

curriculum/challenges/english/25-front-end-development/review-css-grid/671a99394bedfb9a5bc687c4.md

@@ -21,6 +21,39 @@ Review the concepts below to prepare for the upcoming quiz.
 
 - **The `fr` (Fractional) Unit**: This unit represents a fraction of the space within the grid container. You can use the `fr` unit to create flexible grids.
 - **Creating Gaps Between Tracks**: There are three ways to create gaps between tracks in CSS grid. You can use the `column-gap` property to create gaps between columns. You can use the `row-gap` property to create gaps between rows. Or you can use the `gap` shorthand property to create gaps between both rows and columns.
+- **`grid-template-columns`**: This is used to set lines names and sizing for the grid track columns.
+
+```css
+.container {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 30px 1fr;
+}
+```
+
+- **`grid-template-rows`**: This is used to set lines names and sizing for the grid track rows.
+- **`grid-auto-flow`**: The determines how auto placed items fit in the grid.
+
+```css
+.container {
+  display: grid;
+  width: 100%;
+  grid-auto-flow: column;
+}
+```
+
+- **`grid-auto-columns`**: This is used to set the size for columns created implicitly. 
+
+```css
+.container {
+  display: grid;
+  width: 100%;
+  grid-auto-columns: auto;
+}
+```
+
+- **`place-items`**: This is used to align items for both block and inline directions.
+- **`align-items`**: This is used to set the alignment for the items in a grid container.
 - **`repeat()` Function**: This function is used to repeat sections in the track listing. Instead of writing `grid-template-columns: 1fr 1fr 1fr;` you can use the `repeat()` function instead. 
 
 ```css
@@ -43,6 +76,15 @@ Review the concepts below to prepare for the upcoming quiz.
 ```
 
 - **Line-based Placement**: All grids have lines. To specify where the item begins on a line, you can use the `grid-column-start` and `grid-row-start` properties. To specify where the item ends on the line, you can use the `grid-column-end` and `grid-row-end` properties. You can also choose to use the `grid-column` or `grid-row` shorthand properties instead.
+
+Here is an example of using the `grid-column` property to make an element stretch across all columns.
+
+```css
+.element {
+  grid-column: 1 / -1;
+}
+```
+
 - **`grid-template-areas`**: The property is used to provide a name for the items you are going to position on the grid. 
 
 ```html
@@ -94,6 +136,12 @@ Review the concepts below to prepare for the upcoming quiz.
 }
 ```
 
+## Debugging CSS
+
+- **DevTools (Developer Tools)**: DevTools allow you to inspect and modify your CSS in real-time. The Styles pane shows all the CSS rules applied to the selected element, including inherited styles. You can toggle individual properties on and off, edit values, and even add new rules directly in the browser. This immediate feedback is incredibly useful for experimenting with different styles without modifying your source code.
+- **CSS Validators**: Validators are used to check your CSS against the official specifications and reports any errors or warnings. A popular validator you can use is the W3C CSS Validator.
+- **Debugging Responsive Designs**: The DevTools has an option to allow you to simulate how your site looks on various screen sizes and devices. This can help you identify breakpoint issues or styles that don't scale well across different viewport sizes. 
+
 # --assignment--
 
 Review the CSS Grid topics and concepts.