What is CSS Grid?

CSS Grid is a powerful layout system that allows you to create complex layouts using rows and columns. It provides precise control over the placement of elements, making it easier to design responsive layouts that adapt to different screen sizes.

Why Use CSS Grid?

• Flexible & Powerful: Allows for intricate layouts without the need for floats or manual positioning.
• Responsive: Automatically adjusts your layout for different screen sizes.
• Organized & Maintainable: The grid system helps keep your code clean and easy to maintain.

Grid Container Properties

To create a grid layout, you first need to define a grid container. The grid container holds all the grid items and controls the overall layout.

<style>
  .container {
    background-color: grey;
    display: grid;
    grid-template-rows: 100px 200px auto;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px 20px;
  }
.div {
background-color: limegreen;
}
</style>
<div class="container"><div class="div">first</div><div class="div">second</div><div class="div">third</div><div class="div">fourth</div><div class="div">fifth</div>
</div>

1. grid-template-rows

Defines the number and height of rows in the grid.

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

This example creates three rows: the first is 100px, the second is 200px, and the third row adjusts automatically to fill the remaining space.

2. grid-template-columns

Defines the number and width of columns in the grid.

.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}

In this example, there are three columns: the first and third take up equal space (1fr each), while the middle column takes up twice as much space (2fr).

3. gap

The gap property controls the spacing between rows and columns.

.container {
gap: 10px 20px; /* 10px between rows, 20px between columns */
}

You can specify different values for row and column gaps or use a single value to set equal spacing for both.

4. grid-auto-rows and grid-auto-columns

These properties define the size of rows and columns that are created automatically.

.container {
grid-auto-rows: 50px;
grid-auto-columns: 100px;
gap: 10px 20px;
}

If you have more items than explicitly defined rows or columns, these properties set the size for the extra ones. In the example, new rows will be 50px high, and new columns will be 100px wide.

Grid Item Properties

Once the grid container is defined, you can control the placement and alignment of individual grid items.

<style>
.container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px 20px;
}

.div {
background-color: limegreen;
}
</style>
<div class="container"><div class="div item">first</div><div class="div">second</div><div class="div">third</div><div class="div">fourth</div><div class="div">fifth</div><div class="div">sixth</div><div class="div">seventh</div>
</div>

1. grid-row

Controls where a grid item is placed within the grid rows.

.item {
grid-row: 1 / 3;
}

This example places the item starting at row 1 and spanning two rows.

2. grid-column

Controls where a grid item is placed within the grid columns.

.item {
grid-column: 2 / 4;
}

In this example, the item starts at column 2 and spans across two columns (up to column 4).

3. align-self

Controls the vertical alignment of a grid item within its grid area.

.item {
align-self: center;
}

• start: Aligns the item at the start of the row.
• center: Aligns the item in the center of the row.
• end: Aligns the item at the end of the row.
• stretch: Stretches the item to fill the entire row (default).

4. justify-self

Controls the horizontal alignment of a grid item within its grid area.

.item {
justify-self: start;
}

• start: Aligns the item at the start of the column.
• center: Aligns the item in the center of the column.
• end: Aligns the item at the end of the column.
• stretch: Stretches the item to fill the entire column (default).