What is Grid in CSS

CSS Grid Layout is a powerful two-dimensional grid system that allows for complex web page layouts. It provides precise control over the positioning and alignment of elements in a grid structure.a grid layout is a powerful system for creating two-dimensional layouts. It allows you to divide a container into columns and rows, creating a grid structure where you can position and align elements with precision.
To create a grid layout in CSS, you need to define a parent container as a grid container using the display: grid property. Once the container becomes a grid, you can define the size and structure of the grid using properties like grid-template-columns and grid-template-rows.

Here’s an example of a basic grid layout:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 200px;
    gap: 10px;
}

In the example above, we have a container with three columns and two rows. The grid-template-columns property divides the container into three equal columns (1fr represents a fraction unit). The grid-template-rows property sets the height of the rows to 100 pixels and 200 pixels respectively.

After defining the grid structure, you can place elements within the grid using the grid-column and grid-row properties. These properties specify the starting and ending positions of the elements within the grid

.item {
     grid-column: 1 / 3; /* Element spans from column 1 to column 3 /  
     grid-row: 1 / 2; / Element spans from row 1 to row 2 */
}

In the example above, the .item element is positioned to span from the first column to the second column (grid-column: 1 / 3) and from the first row to the second row (grid-row: 1 / 2).

Grid layouts offer numerous additional features and properties, such as grid gaps (gap), grid lines (grid-column-start, grid-column-end, grid-row-start, grid-row-end), and grid areas (grid-template-areas), among others. These features provide fine-grained control over the placement and sizing of elements within the grid.

Grid layouts are widely supported by modern web browsers, making them a powerful tool for creating complex and responsive web layouts.

Once the grid structure is defined, you can place elements within the grid using CSS properties like grid-column and grid-row. These properties allow you to specify the starting and ending positions of the elements within the grid.

.item {
   grid-column: 1 / 3;
   /* Element spans from column 1 to column 3 /
  grid-row: 1 / 2; / Element spans from row 1 to row 2 */
}

In the example above, the .item element is positioned to span from the first column to the second column (grid-column: 1 / 3) and from the first row to the second row (grid-row: 1 / 2).

CSS Grid offers many other features, such as auto placement, grid lines, grid gaps, spanning and alignment options, and named grid areas. These features provide extensive control over the placement, sizing, and responsiveness of elements within the grid layout.

CSS Grid is widely supported in modern web browsers and has become a popular choice for creating flexible and dynamic web layouts. It complements other layout techniques like Flexbox and enables the creation of sophisticated and responsive designs.

In the CSS, we target the .item-1 class and use the grid-column property to span the item from the second column to the fourth column (grid-column: 2 / 4). Additionally, the grid-row property is used to span the item from the first row to the second row (grid-row: 1 / 2).
By adjusting the values of grid-column and grid-row, you can change the position and size of the grid item within the grid. The grid lines and tracks define the positioning, and you can specify the starting and ending lines to control the item’s placement.
Remember that the grid column and row indices start from 1. You can also use the span keyword to specify the number of columns or rows an item should span.
By modifying the grid-column and grid-row properties for different items, you can create custom layouts and rearrange elements within the CSS Grid.