• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

Grid Item Quiz

Q1: What is a Grid Item in CSS Grid?

A. Any HTML element
B. A direct child of a grid container
C. A CSS property
D. A floated element

Q2: What does grid-column: 1 / 4; mean?

A. The item spans from column 1 to before column 4
B. It places the item in row 1
C. It defines 3 columns
D. It aligns item center

Q3: Which property aligns an item horizontally inside its cell?

A. align-items
B. justify-self
C. text-align
D. float

Q4: Which property makes a grid item span 2 rows?

A. grid-row: 2;
B. grid-row: span 2;
C. row-span: 2;
D. span: row 2;

Q5: Which value stretches a grid item in its cell?

A. center
B. stretch
C. fill
D. auto

Q6: What does grid-column: 2 / -1; do?

A. Makes two columns
B. Starts from column 2 to last column
C. Skips column 2
D. Adds margin

Q7: What is required for grid-area: header; to work?

A. grid-template-areas in container
B. Flexbox
C. JavaScript
D. Inline styles

Q8: Which is correct to place an item in row 2 and column 3?

A. grid-row: 2; grid-column: 3;
B. row: 2; col: 3;
C. place: 2 3;
D. line: row2 col3;

Q9: What does grid-column: 1 / span 2; do?

A. Start at column 1 and span 2 columns
B. Start at row 1 and span 2
C. End at column 2
D. Span rows

Q10: Which property allows vertical alignment of individual grid items?

A. text-align
B. align-self
C. vertical-align
D. align-content
← Previous Next →
Login
Go Back Top