CSS Grid :-

CSS Grid is a layout system in CSS that allows you to create grid-based designs with precision and flexibility. It's like a virtual grid on which you can place and arrange your content in rows and columns. Unlike older layout methods, CSS Grid simplifies the process of creating complex layouts, making it perfect for both beginners and experienced web designers.

There are some keys of CSS Grid:-

1. display: grid: This property is used to define an element as a grid container. It's the starting point for creating a CSS Grid.

.container {
  display: grid;
}        

1. grid-template-columns and grid-template-rows: These properties allow you to define the size and structure of the grid's columns and rows. You can set their sizes using various units like pixels, percentages, or fractions (e.g., 1fr for equal-sized columns).

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* Three equal columns */
  grid-template-rows: 100px 200px;   /* Two rows with different heights */
}        

1. grid-gap: Specifies the gap between grid items, both horizontally and vertically. It simplifies spacing within the grid.

.container {
  display: grid;
  grid-gap: 20px;
}        

1. grid-column and grid-row: These properties determine where a grid item starts and ends within the grid. You can specify line numbers or keywords like span to span multiple cells.

.item {
  grid-column: 2 / 4; /* Starts at column 2, ends at column 4 */
  grid-row: 1 / 3;    /* Starts at row 1, ends at row 3 */
}        

1. grid-template-areas: This property lets you define named grid areas, making it easy to place items in specific regions of the grid.

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "main   sidebar"
    "footer footer";
}        

1. grid-auto-columns and grid-auto-rows: These properties define the size of columns and rows for grid items that are automatically placed (e.g., when you don't explicitly specify their placement).

.container {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-rows: auto;
}        

1. justify-items and align-items: These properties control the alignment of items along the row and column axes, helping you center content within grid cells.

.container {
  display: grid;
  justify-items: center; /* Centers items horizontally */
  align-items: center;   /* Centers items vertically */
}        

1. justify-content and align-content: These properties determine how the grid as a whole is aligned within its container. Useful for centering the grid within its parent.

.container {
  display: grid;
  justify-content: center; /* Centers the grid horizontally */
  align-content: center;   /* Centers the grid vertically */
}        

1. grid-auto-flow: It specifies how grid items are automatically placed into the grid. You can choose between "row," "column," or "dense."

.container {
  display: grid;
  grid-auto-flow: column; /* Automatically place items in columns */
}        

1. grid (shorthand): The grid shorthand property combines several grid-related properties into one for concise and clean code.

.container {
  display: grid;
  grid-template: 1fr 1fr / 1fr 2fr; /* Rows / Columns */
}        

1. @media queries: Not a CSS Grid property, but important for responsive design. You can use media queries to adjust your grid layout based on screen size or other conditions.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns by default */

  /* Media query for screens 768px wide and above */
  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns on larger screens */
  }

  /* Media query for screens 1024px wide and above */
  @media (min-width: 1024px) {
    grid-template-columns: 1fr 1fr 1fr 1fr; /* Four equal columns on even larger screens */
  }
}
        

In this code, the layout starts with two equal columns by default. However, as the screen width increases, we use media queries to adjust the number of columns to three and then four. This approach ensures that the layout adapts to different screen sizes, making it a responsive grid design.

Conclusion :-

Lastly, while not an exclusive CSS Grid property, media queries play a vital role in responsive design. You can use them to adjust your grid layout based on screen size or other conditions, ensuring that your grid design adapts seamlessly to different devices and screen sizes.

By understanding and applying these CSS Grid properties and considering responsive design through media queries, you can create sophisticated and adaptable web layouts that cater to a variety of devices and screen dimensions. Embracing the power of CSS Grid empowers you to design modern, efficient, and visually appealing web pages.

Link --> Click here for Grid CSS