• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

Grid Item

← Previous Next →

🔹 What is a Grid Item?

A Grid Item is a direct child of a grid container (display: grid or inline-grid). Grid items can be individually placed, sized, and aligned using various CSS properties such as grid-column, grid-row, justify-self, align-self, and grid-area.

🔸 Grid Item vs Grid Container

  • Grid Container: The parent with display: grid;

  • Grid Items: The immediate children inside the grid container

Example:

<div class="grid-container">
  <div class="item">Item 1</div>  <!-- Grid Item -->
  <div class="item">Item 2</div>  <!-- Grid Item -->
</div>

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

🔸 Grid Item Properties

Property Description
grid-column-start Defines the column line where the item starts
grid-column-end Defines the column line where the item ends
grid-column Shorthand for start/end → e.g., grid-column: 1 / 3
grid-row-start Defines the row line where the item starts
grid-row-end Defines the row line where the item ends
grid-row Shorthand for start/end → e.g., grid-row: 2 / span 2
grid-area Assigns item to a named area or custom grid line
justify-self Aligns item horizontally inside its cell
align-self Aligns item vertically inside its cell

🔸 Example: Span Across Columns and Rows

.item1 {
  grid-column: 1 / 3; /* spans columns 1 to 2 */
  grid-row: 1 / 2;    /* stays in row 1 */
}

🔸 Example: Using justify-self and align-self

.item2 {
  justify-self: center;
  align-self: end;
}

This centers the item horizontally and aligns it at the bottom of its grid cell.

Practice Questions

✅ Write CSS for the following:

Q1. Span one item across 2 columns.

Q2. Span one item across 2 rows.

Q3. Place an item in row 2, column 3.

Q4. Center a specific item inside its cell.

Q5. Align an item to the bottom of its cell.

Q6. Use grid-column: 2 / span 2.

Q7. Name a grid area and assign an item to it.

Q8. Set different alignments for two items using justify-self.

Q9. Place a grid item at column 1, row 1 explicitly.

Q10. Make an item take full width but fixed height.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top