Menu
CoddyTech
flag Ar iconالعربيةdown icon

تحدي المراجعة

جزء من قسم إتقان CSS في رحلة HTML على Coddy. الدرس 34 من 43.

challenge icon

التحدي

سهل

استخدم CSS Grid لبناء تخطيط بسيط يحتوي على رأس ومعرض مكون من 3 صور في صف واحد كما هو موضح في الصورة أدناه: 

  1. قم بتعيين .container إلى display: grid وأضف gap بين العناصر.
  2. أنشئ شبكة بـ صفين و 3 أعمدة.
  3. حدد مناطق الشبكة باستخدام:

    grid-template-areas:  "header header header"  "img1 img2 img3";

  4. قم بتخصيص كل عنصر في الشبكة لمنطقته باستخدام خاصية grid-area.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <style>
    body{
        margin: 0;
        padding: 0;
    }
    img{
        width: 100%;
    }
    .header{
        text-align: center;
        padding: 10px;
        background-color: #afe1e3; 
    }
    /* Add you CSS code here */

  </style>
</head>
<body>
  <div class="container">
    <div class="header">My Gallery</div>
    <div class="img1"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Burchell%27s_zebra_%28Equus_quagga_burchellii%29_2.jpg"></div>
    <div class="img2"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Zebra_zebras_-_tarangire_tanzania_africa.jpg"></div>
    <div class="img3"><img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Zebra-Lake_Nakuru.jpg"></div>
</div>
</body>
</html>

جميع دروس إتقان CSS

تدرّب بنفسك: Playground لـ Web