HTML Full Course (Day 13)

1. Introduction to CSS grid:

CSS grid is a powerful layout system that allows you to create complex two-dimensional grid-based layouts in HTML. It provides a flexible and responsive way to arrange elements in rows and columns. With CSS grid, you can easily create dynamic and responsive layouts without relying heavily on floats or positioning. 

2. Grid container and grid items:

In CSS grid, the parent element that contains grid items is called the grid container. The direct children of the grid container are referred to as grid items. Here's how they work:

   - Grid container:

To create a grid container, you need to apply the `display: grid;` property to the parent element. This converts the element into a grid container and enables you to define the grid layout.

   - Grid items: 

Any direct child elements of the grid container automatically become grid items. These elements are placed within the grid and follow the defined layout rules.

3. Grid template columns and rows:

CSS grid allows you to define the columns and rows of your grid layout using the `grid-template-columns` and `grid-template-rows` properties. Here's how they work:

   - Grid template columns: 

The `grid-template-columns` property defines the size and number of columns in the grid. You can specify the width of each column using values such as fixed lengths (e.g., `100px`), relative lengths (e.g., `1fr`), or a combination of both.

   - Grid template rows: 

Similarly, the `grid-template-rows` property defines the size and number of rows in the grid. You can set the height of each row using similar units and values as with `grid-template-columns`.

   - Grid tracks: 

Each column and row in the grid is referred to as a grid track. You can define multiple tracks using space-separated values in the `grid-template-columns` and `grid-template-rows` properties.

4. Grid alignment and placement:

CSS grid provides various properties to control the alignment and placement of grid items within the grid. Here are some key properties:

   - `justify-items` and `align-items`: 

These properties control the alignment of grid items along the column and row axes, respectively. Values like `start`, `end`, `center`, or `stretch` can be used to position items within their grid cells.

   - `justify-content` and `align-content`: 

These properties align the entire grid within its container along the column and row axes, respectively. Values like `start`, `end`, `center`, `space-between`, or `space-around` can be used to distribute grid tracks or adjust the overall position of the grid.

   - `grid-column` and `grid-row`:

 These properties allow you to position and span grid items across specific columns or rows. You can specify the starting and ending positions using line numbers or keywords like `span`.

   - `grid-area`:

 This property combines the `grid-row` and `grid-column` properties to assign a grid item to a specific area within the grid, using a named grid area or a combination of line numbers.

By using these alignment and placement properties, you can control the positioning and layout of grid items within the grid container.

CSS grid is a powerful tool for creating flexible and responsive layouts. By defining grid columns and rows, adjusting alignment and placement, and utilizing the grid container and items, you can achieve complex and versatile designs in your HTML documents.