The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Grid Item Properties

Next ►
►

In this section, we will delve into the properties that can be applied to grid items within a CSS Grid layout. Understanding these properties will allow you to control the placement and behavior of individual items within the grid container.

Key Concepts

  1. Grid Lines: The invisible lines that define the boundaries of grid cells.
  2. Grid Tracks: The rows and columns created by the grid lines.
  3. Grid Areas: The rectangular space defined by four grid lines.

Grid Item Properties

  1. grid-column-start and grid-column-end

These properties specify the starting and ending grid lines for a grid item along the column axis.

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

Explanation:

  • The grid item will start at the second vertical grid line and span until the fourth vertical grid line.

  1. grid-row-start and grid-row-end

Similar to the column properties, these specify the starting and ending grid lines for a grid item along the row axis.

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

Explanation:

  • The grid item will start at the first horizontal grid line and span until the third horizontal grid line.

  1. grid-column and grid-row

These shorthand properties combine the start and end properties for columns and rows.

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

Explanation:

  • The grid item will span from the second to the fourth vertical grid line and from the first to the third horizontal grid line.

  1. grid-area

This property can be used to specify a grid item’s position and size within the grid by defining the start and end lines for both rows and columns.

.item {
  grid-area: 1 / 2 / 3 / 4;
}

Explanation:

  • The grid item will start at the first row line, end at the third row line, start at the second column line, and end at the fourth column line.

  1. justify-self and align-self

These properties control the alignment of a grid item within its grid cell.

  • justify-self: Aligns the item along the inline (row) axis.
  • align-self: Aligns the item along the block (column) axis.
.item {
  justify-self: center;
  align-self: end;
}

Explanation:

  • The grid item will be centered along the row axis and aligned to the end of the column axis.

  1. place-self

This shorthand property combines justify-self and align-self.

.item {
  place-self: center end;
}

Explanation:

  • The grid item will be centered along the row axis and aligned to the end of the column axis.

Practical Example

Let's create a simple grid layout and apply some of these properties to see them in action.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Item Properties</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
    }
    .item1 {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
      background-color: lightblue;
    }
    .item2 {
      grid-column: 3 / 5;
      grid-row: 1 / 3;
      background-color: lightcoral;
    }
    .item3 {
      grid-column: 1 / 2;
      grid-row: 2 / 4;
      background-color: lightgreen;
    }
    .item4 {
      grid-column: 2 / 4;
      grid-row: 3 / 4;
      background-color: lightgoldenrodyellow;
      justify-self: center;
      align-self: end;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
    <div class="item4">Item 4</div>
  </div>
</body>
</html>

Explanation:

  • item1 spans from the first to the third column and occupies the first row.
  • item2 spans from the third to the fifth column and occupies the first and second rows.
  • item3 spans from the first to the second column and occupies the second and third rows.
  • item4 spans from the second to the fourth column and occupies the third row, centered horizontally and aligned to the bottom vertically.

Exercises

Exercise 1

Create a grid layout with 3 columns and 2 rows. Place an item that spans all columns in the first row and another item that spans the first two columns in the second row.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercise 1 Solution</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 100px);
      gap: 10px;
    }
    .item1 {
      grid-column: 1 / 4;
      grid-row: 1 / 2;
      background-color: lightblue;
    }
    .item2 {
      grid-column: 1 / 3;
      grid-row: 2 / 3;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
  </div>
</body>
</html>

Exercise 2

Create a grid layout with 4 columns and 3 rows. Place an item that spans from the second to the fourth column in the second row and another item that spans from the first to the third column in the third row. Align the second item to the center both horizontally and vertically.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercise 2 Solution</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
    }
    .item1 {
      grid-column: 2 / 4;
      grid-row: 2 / 3;
      background-color: lightblue;
    }
    .item2 {
      grid-column: 1 / 3;
      grid-row: 3 / 4;
      background-color: lightcoral;
      place-self: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
  </div>
</body>
</html>

Conclusion

Understanding and utilizing grid item properties allows for precise control over the placement and alignment of items within a CSS Grid layout. By mastering these properties, you can create complex and responsive layouts with ease. In the next section, we will explore how to create entire layouts using CSS Grid, building on the knowledge of grid item properties.

◄ Previous
◄
Next ►
►

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved