تمرین grid با css

    • 1402/07/19 09:31
    سحر افخمی
    سحر افخمی
    کاربر
    1

    سلام روز بخیر من این تمرین رو انجام دادم ولی هرکاری می کنم نمی تونم مثل نمونه تصویر درش بیارم

      .grid-container {
          display: grid;
          grid-template-columns: auto auto auto auto auto ;
          gap: 25px;
          background-color: crimson;
          padding: 10px;
        }
       
        .grid-container > div {
          background-color: #eee;
          text-align: center;
          padding: 20px 0;
          font-size: 30px;
        }
       
     
        .h1{
            height: 150px;
        }
        .h2{
            min-height: 500px;
        }
     
     
     
     <div class="grid-container">
            <div class="item1 h1">1</div>
            <div class="item2 h2">2</div>
            <div class="item3 h2">3</div>  
            <div class="item4 h2">4</div>
            <div class="item5 h1">5</div>
           
          </div>

    • 1402/07/19 10:13
    ایران باینری
    ایران باینری
    استاد
    2

    سلام روز شما هم بخیر خانم افخمی

    شما مقدار ستون رو برای هر قسمت تعیین نکردید کد رو به اینصورت ادیت کنید

    و بهتره که اسم کلاس هایی که انتخاب می کنید مفهوم باشه مثلا برای کلاس ارتفاع مفهوم تر نام گذاری کنید

     body{
            margin: 0;
            padding: 0;
        }
        .grid-container {
          display: grid;
          grid-template-columns: auto auto auto auto auto ;
          gap: 25px;
          background-color: crimson;
          padding: 10px;
        }
       
        .grid-container > div {
          background-color: #eee;
          text-align: center;
          padding: 20px 0;
          font-size: 30px;
        }
       
        .item1 {
          grid-column: 1 / span 5;
        }
        .item3 {
          grid-column: 2 / span 3;
        }
        .item5 {
          grid-column: 1 / span 5;
        }
        .h-150{
            height: 150px;
        }
        .h-min-500{
            min-height: 500px;
        }
     

        <div class="grid-container">
            <div class="item1 h-150">1</div>
            <div class="item2 h-min-500">2</div>
            <div class="item3 h-min-500">3</div>  
            <div class="item4 h-min-500">4</div>
            <div class="item5 h-150">5</div>
           
          </div>