Skip to main content

Advanced Grid Techniques In Html

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.

Comments