How To Use CSS Grid Column Start Property With HTML

Posted By Bajarangi soft , Posted On 07-11-2020

In CSS The grid-column-start property defines on which column-line the item will start.So today we discuss how to do it.

How To Use CSS Grid Column Start Property With HTML

Implement CSS code for using grid column start.

.item1 {
    grid-column-start: 2;
}

Complete Code For Using CSS Grid Column Start Property With HTML.

<!DOCTYPE html>
<html>
<head>
    <title>How To Use CSS Grid Column Start Property With HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>

<style>
    body {
        background-color: #ecc6d9;
    }
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #336600;
        padding: 10px;
    }

    .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
    }

    .item1 {
        grid-column-start: 2;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: black;">CSS Grid Column Start Property With HTML</h1>
    </div>
    <br>
    <div class="well">
        <div class="grid-container">
            <div class="item1">1</div>
            <div class="item2">2</div>
            <div class="item3">3</div>
            <div class="item4">4</div>
            <div class="item5">5</div>
            <div class="item6">6</div>
            <div class="item7">7</div>
            <div class="item8">8</div>
        </div>
    </div>
</div>
</body>
</html>