Prev Next

CSS Grid Item

Grid items are the direct children of a grid container. CSS Grid provides several properties to control the placement, alignment, and size of grid items, making it easier to create flexible and responsive layouts.

Key Topics

Grid Item Placement

Grid items can be placed in specific rows and columns using grid-row and grid-column properties. You can also define start and end positions for precise placement.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Item Placement</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: 100px 100px 100px;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
            background-color: #F0F0F0;
            padding: 10px;
        }
        .grid-item {
            background-color: #007BFF;
            color: white;
            text-align: center;
            padding: 20px;
        }
        .special-item {
            grid-row: 2 / 3;
            grid-column: 2 / 4;
            background-color: #DC3545;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="special-item">Spanned Item</div>
        <div class="grid-item">Item 6</div>
    </div>
</body>
</html>

Explanation: The red grid item spans the second row and occupies columns two and three, as defined by grid-row and grid-column.

Spanning Rows and Columns

Use grid-row and grid-column shorthand properties to span multiple rows or columns.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Item Span</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background-color: #F0F0F0;
            padding: 10px;
        }
        .grid-item {
            background-color: #007BFF;
            color: white;
            text-align: center;
            padding: 20px;
        }
        .spanning-item {
            grid-row: span 2;
            grid-column: span 2;
            background-color: #28A745;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="spanning-item">Spanning Item</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
    </div>
</body>
</html>

Explanation: The green grid item spans two rows and two columns using shorthand syntax.

Alignment of Grid Items

Align items along the grid container’s row or column axes using properties like align-self and justify-self.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Item Alignment</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: 100px 100px;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            background-color: #F0F0F0;
            padding: 10px;
        }
        .grid-item {
            background-color: #FFC107;
            color: black;
            text-align: center;
            padding: 20px;
        }
        .aligned-item {
            align-self: center;
            justify-self: center;
            background-color: #6C757D;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="aligned-item">Aligned Item</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
    </div>
</body>
</html>

Explanation: The gray grid item is centered horizontally and vertically using align-self and justify-self.

Key Takeaways

  • Placement: Use grid-row and grid-column to position items within the grid.
  • Span: Items can span multiple rows or columns for flexible layouts.
  • Alignment: Align items individually using align-self and justify-self.
  • Responsiveness: Grid items adapt to different screen sizes with media queries.
Prev Next