Shipsar Tutorials

Chapter 10: Grid Layout and Its Properties

CSS Grid Layout is a two-dimensional layout system that allows you to create complex layouts with rows and columns. It provides precise control over positioning and alignment of elements in a grid, making it ideal for building responsive designs and complex layouts.

1. Grid Layout Basics

CSS Grid Layout enables you to define a container as a grid and then place child elements into this grid using various properties.

Creating a Grid Container

To create a grid container, set the display property to grid or inline-grid.

• display: grid;: Defines a block-level grid container.
• display: inline-grid;: Defines an inline-level grid container.

.container {
  display: grid;
}

2. Grid Container Properties

Grid container properties define the structure and behavior of the grid.

Grid Template Columns and Rows

grid-template-columns and grid-template-rows define the number and size of columns and rows in the grid.

• grid-template-columns: Specifies the size of each column.
• grid-template-rows: Specifies the size of each row.

.container {
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: 100px auto 200px; /* 3 rows with different sizes */
}

Grid Template Areas

grid-template-areas allows you to define named grid areas and place grid items into these areas.

.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

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

Grid Gap

grid-gap (or gap) defines the spacing between grid items.

• grid-gap: Specifies both row and column gaps.
• grid-row-gap: Specifies the gap between rows.
• grid-column-gap: Specifies the gap between columns.

.container {
  grid-gap: 10px; /* Space between grid items */
}

Justify Items and Align Items

justify-items and align-items control the alignment of grid items within their grid area.

• justify-items: Aligns items horizontally within their grid area.

  • start: Aligns items at the start of the grid area.
  • end: Aligns items at the end of the grid area.
  • center: Centers items horizontally.
  • stretch: Stretches items to fill the grid area (default value).

• align-items: Aligns items vertically within their grid area.

  • start: Aligns items at the start of the grid area.
  • end: Aligns items at the end of the grid area.
  • center: Centers items vertically.
  • stretch: Stretches items to fill the grid area (default value).

.container {
  justify-items: center;
  align-items: center;
}

Justify Content and Align Content

justify-content and align-content control the alignment of the grid within the container.

• justify-content: Aligns the entire grid horizontally.

  • start: Aligns the grid at the start of the container.
  • end: Aligns the grid at the end of the container.
  • center: Centers the grid horizontally.
  • space-between: Distributes space between grid items.
  • space-around: Distributes space around grid items.
  • space-evenly: Distributes space evenly between and around grid items.
  • stretch: Stretches the grid to fill the container (default value).

• align-content: Aligns the entire grid vertically.

  • start: Aligns the grid at the start of the container.
  • end: Aligns the grid at the end of the container.
  • center: Centers the grid vertically.
  • space-between: Distributes space between grid items.
  • space-around: Distributes space around grid items.
  • space-evenly: Distributes space evenly between and around grid items.
  • stretch: Stretches the grid to fill the container (default value).

.container {
  justify-content: space-between;
  align-content: space-around;
}

3. Grid Item Properties

Grid item properties control the placement and size of individual items within the grid.

Grid Column and Row Start / End

grid-column-start, grid-column-end, grid-row-start, and grid-row-end specify where a grid item should start and end within the grid.

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

Grid Column and Row

grid-column and grid-row are shorthand properties for grid-column-start, grid-column-end, grid-row-start, and grid-row-end.

.item {
  grid-column: 1 / 3; /* Starts at column 1, ends at column 3 */
  grid-row: 2 / 4; /* Starts at row 2, ends at row 4 */
}

Justify Self and Align Self

justify-self and align-self allow you to override the alignment of an individual item within its grid area.

• justify-self: Aligns the item horizontally within its grid area.

  • start: Aligns the item at the start.
  • end: Aligns the item at the end.
  • center: Centers the item.
  • stretch: Stretches the item to fill the grid area (default value).

• align-self: Aligns the item vertically within its grid area.

  • start: Aligns the item at the start.
  • end: Aligns the item at the end.
  • center: Centers the item.
  • stretch: Stretches the item to fill the grid area (default value).

.item {
  justify-self: center;
  align-self: start;
}

4. Practical Examples

Basic Grid Layout

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 100px);
  grid-gap: 10px;
}

.item {
  background-color: #007bff;
  color: #fff;
  padding: 20px;
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.item3 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.item4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

Grid Layout with Areas

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

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

.header {
  grid-area: header;
  background-color: #007bff;
  color: #fff;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #28a745;
  color: #fff;
  padding: 10px;
}

.content {
  grid-area: content;
  background-color: #ffc107;
  color: #000;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #dc3545;
  color: #fff;
  padding: 10px;
}

Conclusion

CSS Grid Layout provides a powerful and flexible way to create complex layouts with precise control over the placement and alignment of elements. By mastering grid container and item properties,

you can build responsive and intricate designs with ease.

---