Advanced Grid Techniques In Html

Advanced grid techniques allow you to create more complex and sophisticated layouts using CSS Grid. This section covers grid template areas, alignment properties, and grid gaps with detailed tables and examples.

---

Grid Template Areas for Complex Layouts

The grid-template-areas property allows you to define areas of your grid layout using named grid areas. This is particularly useful for creating complex layouts:

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
  grid-gap: 10px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

In this example, the layout is defined using named grid areas, making it easier to manage complex structures.

---

Aligning Grid Items

CSS Grid provides several properties for aligning grid items both within their container and within their individual grid cells. These properties include align-items, justify-items, align-self, and justify-self.

Align Items

The align-items property aligns grid items along the block (vertical) axis of the grid container. Here are the possible values:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; /* align-items */
}

Value	Description
start	Aligns items to the start of the block (vertical) axis.
end	Aligns items to the end of the block (vertical) axis.
center	Centers items along the block (vertical) axis.
stretch	Stretches items to fill the container along the block (vertical) axis (default).

Align Content

The align-content property aligns the entire grid within the grid container's block (vertical) axis. Here are the possible values:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: space-between; /* align-content */
}

Value	Description
start	Aligns the entire grid to the start of the block (vertical) axis.
end	Aligns the entire grid to the end of the block (vertical) axis.
center	Centers the entire grid along the block (vertical) axis.
space-between	Distributes items evenly with the first item at the start and last item at the end.
space-around	Distributes items evenly with equal space around each item.
stretch	Stretches the entire grid to fill the container along the block (vertical) axis.

Justify Items

The justify-items property aligns grid items along the inline (horizontal) axis of the grid container. Here are the possible values:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: end; /* justify-items */
}

Value	Description
start	Aligns items to the start of the inline (horizontal) axis.
end	Aligns items to the end of the inline (horizontal) axis.
center	Centers items along the inline (horizontal) axis.
stretch	Stretches items to fill the container along the inline (horizontal) axis (default).

Justify Content

The justify-content property aligns the entire grid within the grid container's inline (horizontal) axis. Here are the possible values:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center; /* justify-content */
}

Value	Description
start	Aligns the entire grid to the start of the inline (horizontal) axis.
end	Aligns the entire grid to the end of the inline (horizontal) axis.
center	Centers the entire grid along the inline (horizontal) axis.
space-between	Distributes items evenly with the first item at the start and last item at the end.
space-around	Distributes items evenly with equal space around each item.
stretch	Stretches the entire grid to fill the container along the inline (horizontal) axis.

Align Self

The align-self property allows individual grid items to override the align-items property and be aligned along the block (vertical) axis. Here are the possible values:

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

.grid-item {
  align-self: center; /* align-self */
}

Value	Description
start	Aligns the item to the start of the block (vertical) axis.
end	Aligns the item to the end of the block (vertical) axis.
center	Centers the item along the block (vertical) axis.
stretch	Stretches the item to fill the container along the block (vertical) axis (default).

Justify Self

The justify-self property allows individual grid items to override the justify-items property and be aligned along the inline (horizontal) axis. Here are the possible values:

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

.grid-item {
  justify-self: end; /* justify-self */
}

Value	Description
start	Aligns the item to the start of the inline (horizontal) axis.
end	Aligns the item to the end of the inline (horizontal) axis.
center	Centers the item along the inline (horizontal) axis.
stretch	Stretches the item to fill the container along the inline (horizontal) axis (default).

---

Grid Gap Items:

The grid-gap, row-gap, and column-gap properties define the spacing between grid items. Here are the details:

Grid Gap

The grid-gap property sets the gap between both rows and columns:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px; /* row-gap, column-gap */
}

Property	Description
grid-gap	Sets the gap between both rows and columns.
row-gap	Sets the gap between rows only.
column-gap	Sets the gap between columns only.

---

Conclusion

Advanced grid techniques like grid template areas, alignment properties, and grid gaps provide powerful tools for creating sophisticated layouts. By mastering these techniques, you can build responsive and complex grid structures with ease.