CSS Grid/CSS-grid-named-lines-V2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Naming Lines</title>
    <link rel="stylesheet" href="basic-style.css">
    <style>
        .container{
            display: grid;
            grid-gap:20px;
            grid-template-columns: [left] 1fr [content-start] 500px [content-end] 1fr [right];
            grid-template-rows:[content-top] repeat(10,auto) [content-bottom];
        }
        .item3{
            background: rgb(211, 25, 5);
            /* grid-column: 2;
            grid-row: 1 / span 10; */
            grid-column: content-start;
            grid-row: content-top / content-bottom;

        }
        /* .container .item3 img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        } */
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3
            <!-- <img src="img/css.jpg" alt=""> -->
        </div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
        <div class="item item11">11</div>
        <div class="item item12">12</div>
        <div class="item item13">13</div>
        <div class="item item14">14</div>
        <div class="item item15">15</div>
        <div class="item item16">16</div>
        <div class="item item17">17</div>
        <div class="item item18">18</div>
        <div class="item item19">19</div>
        <div class="item item20">20</div>
        <div class="item item21">21</div>
        <div class="item item22">22</div>
        <div class="item item23">23</div>
        <div class="item item24">24</div>
        <div class="item item25">25</div>
        <div class="item item26">26</div>
        <div class="item item27">27</div>
        <div class="item item28">28</div>
        <div class="item item29">29</div>
        <div class="item item30">30</div>
    </div>
</body>
</html>