CSS Grid Item Properties Cheatsheet

What is CSS Grid Item?

  • A grid container contains grid items.

  • Grid items are the child element of the grid container.

  • A grid item is an item which is a direct child of the grid container.

  • By default, a grid container has one grid item for each column, in each row.


This will be our basic boilerplate code for CSS Grid Item Properties

index.html

<!DOCTYPE html>
<html>
<head>
    <title> CSS Grid Item Properties</title>
    <style>
       
    </style>
</head>
<body>
        <div class="grid-container">
            <div class="gridItem"> One </div>
        </div>
</body>
</html>


CSS Grid Item Properties

i) grid-column-start & grid-row-start

These properties determine the location of grid items that where to start the item.

.gridItem {
            grid-column-start: 2;
            grid-row-start: 2;
}


ii) grid-column-end & grid-row-end

These properties determine the location of grid items that where to end the grid item.

.gridItem {
            grid-column-end: 4;
            grid-row-end: 3;
}


iii) grid-column

This is the shorthand property for grid-column-start & grid-column-end.

.gridItem {
            grid-column: 2 / 4;
}


iv) grid-row

It is a shorthand property that is used to achieve the functionalities of grid-row-start and grid-row-end.

.gridItem {
            grid-row: 2 / 3;
}


v) justify-self

This property is used to align a grid item within a cell along the row/inline axis.

.gridItem {
            justify-self: end;
}


vi) align-self

This property is used to align a grid item within a cell along the column/block axis.

.gridItem {
            align-self: start;
}


viii) place-self

This is the shorthand property for two properties for align-self and justify-self.

.gridItem {
            place-self: start end;
}

CSS Grid Item Property Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS Grid Item Property </title>
    <style>
        .grid-container {
            display: grid;
            background-color: blue;
            padding: 5px;
        }

        .grid-container div {
            background-color: black;
            border: 2px solid white;
            color: #fff;
            padding: 30px;
            font-size: 30px;
            text-align: center;
        }

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

        .grid-item6 {
            grid-column: 3 / span 2;
            grid-row: 2;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item1"> 1 </div>
        <div class="grid-item2"> 2 </div>
        <div class="grid-item3"> 3 </div>
        <div class="grid-item4"> 4 </div>
        <div class="grid-item5"> 5 </div>
        <div class="grid-item6"> 6 </div>
    </div>
</body>

</html>

Output: 

CSS Grid Item Properties Cheat Sheet PDF 

Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming-related Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad