CSS Grid

CSS Grid Layout is a powerful system for creating two-dimensional layouts. Unlike Flexbox (which is one-dimensional), CSS Grid allows us to control both rows and columns simultaneously, making it ideal for complex layouts.

1️⃣ What is CSS Grid?

CSS Grid provides a way to divide a webpage into sections using a grid structure. It consists of:

Grid Container → The parent element (display: grid;)
Grid Items → The child elements inside the grid

2️⃣ How to Use CSS Grid?

To use CSS Grid, apply display: grid; to a container:

.container {
  display: grid;
}

✔ Now, all direct children of .container become grid items.

3️⃣ Main CSS Grid Properties

🔹 1. `display: grid;`

This makes an element a grid container, allowing its children to be grid items.

.container {
  display: grid;
}

🔹 2. `grid-template-columns` & `grid-template-rows`

Defines the number and size of columns and rows.

Value	Effect
`auto`	Adjusts size based on content
`px`, `%`, `em`	Fixed size for rows/columns
`fr` (fractional unit)	Distributes space flexibly
`repeat(n, value)`	Repeats the value `n` times

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 columns of 200px each */
  grid-template-rows: 100px 100px; /* 2 rows of 100px each */
}

✔ Creates 3 columns and 2 rows.

🔹 3. `gap` (Spacing Between Items)

Controls spacing between grid items.

Value	Effect
`gap: 10px;`	10px space between rows and columns
`row-gap: 10px;`	10px space between rows
`column-gap: 10px;`	10px space between columns

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

🔹 4. `grid-column` & `grid-row` (Item Positioning)

Controls how many columns or rows an item spans.

Property	Effect
`grid-column-start`	Defines where the column starts
`grid-column-end`	Defines where the column ends
`grid-column: start / end;`	Shortcut for both start and end

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

✔ The item takes two columns and one row.

🔹 5. `grid-auto-rows` & `grid-auto-columns`

Defines the default size for extra rows or columns.

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

✔ Any new row will have 100px height.

🔹 6. `justify-content` & `align-content` (Grid Alignment)

Controls how the entire grid aligns inside the container.

Property	Effect
`justify-content`	Aligns the grid horizontally
`align-content`	Aligns the grid vertically

Value	Effect
`start`	Aligns to the left/top
`center`	Aligns to the center
`end`	Aligns to the right/bottom
`space-between`	Equal space between grid lines
`space-around`	Equal space around grid items

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}

✔ Centers the entire grid inside the container.

🔹 7. `justify-items` & `align-items` (Item Alignment)

Controls how individual grid items align.

Property	Effect
`justify-items`	Aligns items horizontally in each grid cell
`align-items`	Aligns items vertically in each grid cell

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

✔ Centers each grid item inside its cell.

5️⃣ Summary Table

Property	Effect
`display: grid;`	Enables CSS Grid
`grid-template-columns`	Defines column structure
`grid-template-rows`	Defines row structure
`gap`	Controls spacing between items
`grid-column`	Controls item width (spanning columns)
`grid-row`	Controls item height (spanning rows)
`justify-content`	Aligns entire grid horizontally
`align-content`	Aligns entire grid vertically
`justify-items`	Aligns items horizontally
`align-items`	Aligns items vertically

6️⃣ Conclusion

✔ CSS Grid is the best choice for complex layouts.
✔ Use display: grid; to create a grid container.
✔ Adjust rows & columns using grid-template-columns & grid-template-rows.
✔ Control spacing & alignment with gap, justify-content, and align-items.

CSS

CSS Grid

1️⃣ What is CSS Grid?

2️⃣ How to Use CSS Grid?

3️⃣ Main CSS Grid Properties

🔹 1. display: grid;

🔹 2. grid-template-columns & grid-template-rows

🔹 3. gap (Spacing Between Items)

🔹 4. grid-column & grid-row (Item Positioning)

🔹 5. grid-auto-rows & grid-auto-columns

🔹 6. justify-content & align-content (Grid Alignment)

🔹 7. justify-items & align-items (Item Alignment)