CSS Grid Container

To use the grid layout, you first need a grid container. This element acts as the parent and dictates how the internal grid items are structured and aligned.

---

The fr Unit

One of the most useful units in CSS Grid is the fractional unit (fr). It allows you to create flexible columns that take up a fraction of the available space in the container.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Middle column is twice as wide as others */
}

---

The repeat() Function

Instead of typing the same value multiple times, you can use the repeat() function.

/* Creates 3 columns of 1fr each */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

---

Aligning the Grid

justify-content

Used to align the entire grid inside the container horizontally. Valid values include: center, start, end, space-between, space-around, and space-evenly.

.container {
    justify-content: space-evenly;
}

---

align-content

Used to align the entire grid vertically, assuming the container has a fixed height greater than the grid content.

.container {
    height: 400px;
    align-content: center;
}

---

---