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 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