grid_concepts_in_css.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GRID CONCEPTS IN CSS</title>
</head>
<style>
    .container{
        display: grid;
        /* grid-template-columns: 1fr 2fr 3fr; */

        /* grid-template-columns: 1fr auto; */
        
        /* grid-template-columns: repeat(10,auto); */
                
        /* grid-column-gap: 2rem; */

        /* grid-template-rows: 1fr 4fr auto; */

        /* grid-auto-rows: 20fr; */
        
        /* grid-template-rows: 1fr 12fr 3fr; */

        /* grid-row-gap: 3rem; */

        /* grid-template-columns: 1fr 4fr 2fr ; */
        
        /* grid-auto-rows:5fr ; */
        

        /* grid-template-rows: repeat(4, 50px); */

        /* grid-template-columns: repeat(6,200px); */

        /* grid-template-columns: 120px 120px 120px; */

        /* justify-content: center; */

        /* grid-template-columns: repeat(auto-fit,minmax(300px ,400px)); */
    
    
    }


.items{
        border: 2px solid black;
        margin: 10px;
        padding: 20px;
        background-color: #f58b8bf1;
    }


/* 
.items:first-child{
    grid-column-start: 1;
    
    grid-column-end: 3;
    
    grid-row-start:1 ;
    
    grid-row-end: 4; 
    
    grid-column: 1 / span 2 ;
    
    grid-row: 1 / span 2;
} */


</style>


<body>
    <div class="container">
        <div class="items">box-1</div>
        <div class="items">box-2</div>
        <div class="items">box-3</div>
        <div class="items">box-4</div>
        <div class="items">box-5</div>
        <div class="items">box-6</div>
        <div class="items">box-7</div>
        <div class="items">box-8</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-9</div>
        <div class="items">box-10</div>
    </div>
</body>
</html>