What is CSS grid system

The CSS Grid Layout (often referred to simply as “CSS Grid”) is a powerful layout system available in CSS that allows you to create complex, responsive web layouts with ease. It introduces a grid-based approach for designing web pages, which can help you arrange and align elements in a two-dimensional grid structure (both rows and columns).

Key concepts and features of CSS Grid:

Basic Concepts

1. Grid Container:
   • To use CSS Grid, you first define a container element as a grid container by setting its display property to grid or inline-grid.
   css

   .grid-container {
display: grid;
}

2. Grid Items:
   • The direct children of a grid container become grid items. These items can be placed into the grid according to the defined grid lines and areas.
3. Grid Lines:
   • Grid lines are the lines that form the boundaries of the rows and columns of the grid. They are numbered from 1 starting at the top-left corner of the grid.
4. Grid Tracks:
   • Grid tracks are the space between grid lines. They are essentially the rows and columns of the grid.
5. Grid Cells:
   • A grid cell is the smallest unit of the grid, created by the intersection of grid lines.
6. Grid Areas:
   • Grid areas are the rectangular spaces enclosed by four grid lines. They can span multiple grid cells.

Key Properties

1. Grid Container Properties:
   • grid-template-columns and grid-template-rows: Define the number and size of the columns and rows in the grid.
     css

     .grid-container {
grid-template-columns: 1fr 2fr 1fr; /*

     Three columns with different widths */


     grid-template-rows: 100px auto; /* Two rows with specified height */
}

   • grid-gap (or gap): Sets the spacing between rows and columns.
     css

     .grid-container {
gap: 10px;
}

   • grid-template-areas: Allows you to define named grid areas, which can be a more intuitive way to position items.
     css

     .grid-container {
grid-template-areas:
"header header header"


     "main sidebar sidebar"
"footer footer footer";
}

2. Grid Item Properties:
   • grid-column and grid-row: Determine how many columns and rows an item should span.
     css

     .item {
grid-column: 1 / 3; /* Spans from the first to the third column

     */
grid-row: 2; /* Spans the second row */
}

   • grid-area: Allows you to specify the grid area by referencing the named areas defined in the grid container.
     css

     .item {
grid-area: main; /*

     This item will be placed in the "main" area defined in

     grid-template-areas */
}


Example

Here’s a simple example of a CSS Grid layout:

In this example:

• The grid has two columns and two rows.
• The grid-template-areas property defines named areas for the header, main content, sidebar, and footer.
• Each grid item is placed into its respective area.