CSS

CSS Grid Layout is a two-dimensional layout system for the web. It allows web designers and developers to create complex layouts easily and efficiently, with precise control over both rows and columns.

Unlike Flexbox, which works along a single axis (either horizontally or vertically), CSS Grid works in both dimensions (rows and columns) at the same time, making it highly useful for designing complex web layouts.

🔹 Basics of CSS Grid

A grid layout consists of two main components:

1. Grid Container: The parent element that holds the grid.
2. Grid Items: The child elements inside the grid container.

To create a grid container, you need to set the display property to grid. You can also set display: inline-grid if you want the container to behave like an inline element.

Example:

.container {
  display: grid;
}

Once you have a grid container, you can define rows, columns, and the placement of grid items inside the container.

🔹 Grid Container Properties

Here are the main properties that apply to the grid container:

1. grid-template-columns

The grid-template-columns property defines the number and size of columns in the grid container. You can specify fixed sizes (e.g., px, %, em), flexible sizes (fr unit), or even repeat values using the repeat() function.

• Example: Define a grid with three columns of equal width: .container { display: grid; grid-template-columns: 1fr 1fr 1fr; }
• Example with fixed width: .container { display: grid; grid-template-columns: 200px 300px 100px; }

2. grid-template-rows

The grid-template-rows property defines the number and size of rows in the grid container, similar to how grid-template-columns works.

• Example: Define a grid with three rows of equal height: .container { display: grid; grid-template-rows: 1fr 1fr 1fr; }

3. grid-template-areas

The grid-template-areas property allows you to define the layout of grid items by assigning names to the grid areas. This helps to create more readable and maintainable code.

• Example: .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px; grid-template-areas: "header footer" "content sidebar"; }

4. grid-gap (or gap)

The grid-gap (or just gap in newer specifications) property defines the space between rows and columns.

• Example: Set a gap of 20px between rows and columns: .container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

5. justify-items

The justify-items property aligns grid items along the inline axis (horizontal axis) within each cell of the grid.

• Values: start, end, center, stretch (default).
• Example: .container { display: grid; justify-items: center; }

6. align-items

The align-items property aligns grid items along the block axis (vertical axis) within each cell of the grid.

• Values: start, end, center, stretch (default).
• Example: .container { display: grid; align-items: center; }

7. justify-content

The justify-content property aligns the entire grid (not individual items) along the inline axis (horizontal axis) within the container.

• Values: start, end, center, stretch, space-between, space-around, space-evenly.
• Example: .container { display: grid; justify-content: center; }

8. align-content

The align-content property aligns the entire grid (not individual items) along the block axis (vertical axis) within the container.

• Values: start, end, center, stretch, space-between, space-around, space-evenly.
• Example: .container { display: grid; align-content: space-between; }

🔹 Grid Item Properties

Once the grid container is set up, you can control the layout of individual grid items with the following properties:

1. grid-column

The grid-column property defines the position of a grid item on the horizontal axis (from left to right). You can specify the starting and ending positions of the item.

• Syntax: grid-column: start / end;
• Example: .item { grid-column: 1 / 3; /* Item spans from column 1 to column 3 */ }

2. grid-row

The grid-row property defines the position of a grid item on the vertical axis (from top to bottom). You can specify the starting and ending positions of the item.

• Syntax: grid-row: start / end;
• Example: .item { grid-row: 1 / 2; /* Item spans from row 1 to row 2 */ }

3. grid-area

The grid-area property is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end. It allows you to define the location of a grid item by specifying the name of the grid area.

• Syntax: grid-area: row-start / column-start / row-end / column-end;
• Example: .item { grid-area: 1 / 2 / 2 / 4; }

🔹 Practical Example:

<div class="container">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  }

  .header {
    grid-area: header;
    background-color: lightblue;
    padding: 20px;
  }

  .content {
    grid-area: content;
    background-color: lightgreen;
    padding: 20px;
  }

  .sidebar {
    grid-area: sidebar;
    background-color: lightyellow;
    padding: 20px;
  }

  .footer {
    grid-area: footer;
    background-color: lightcoral;
    padding: 20px;
  }
</style>

In this example:

• The .container is a grid with two columns and three rows.
• We define the grid areas for the header, content, sidebar, and footer.
• The layout will adapt based on the defined grid structure.

🔹 Conclusion

CSS Grid is a powerful and flexible layout system that allows you to create complex, two-dimensional layouts with minimal effort. It provides more control over both rows and columns compared to Flexbox, making it ideal for more intricate designs. By combining the grid container and grid item properties, you can build responsive and dynamic layouts for your website.

Some key benefits of CSS Grid:

• Two-dimensional layout: You can manage both rows and columns simultaneously.
• Precise control: Control over the placement of items in a grid with exact positions.
• Flexible and responsive: Create flexible, responsive layouts with ease.

If you are working on layouts that require complex designs, CSS Grid is a great choice and should be part of every web developer’s toolkit.