أساسيات Grid

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 31 من 43.

CSS Grid هو نظام تخطيط يتيح لك إنشاء صفحات ويب بصفوف وأعمدة بسهولة. إنه رائع لبناء تخطيطات معقدة ومتجاوبة دون الحاجة إلى استخدام floats أو تقنيات تحديد المواقع (positioning) المعقدة. بالإضافة إلى ذلك، فهو يعمل في جميع المتصفحات الحديثة.

لإنشاء حاوية شبكة، استخدم خاصية display:

.container {
  display: grid;
}

حدد الأعمدة في شبكتك باستخدام grid-template-columns مع وحدات px أو fr (أجزاء):

/* هذا ينشئ ثلاثة أعمدة حيث يأخذ العمود الأوسط ضعف المساحة التي يأخذها العمودان الآخران. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

قم بتعريف الصفوف باستخدام grid-template-rows. استخدم خاصية gap لإضافة مساحة بين عناصر الشبكة.

/* ينشئ شبكة بصفين: الأول بارتفاع 100 بكسل، والثاني بارتفاع 200 بكسل */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

التحدي

سهل

أنشئ قاعدة CSS لفئة تسمى grid-container تقوم بما يلي:

تعيين خاصية display لإنشاء شبكة (grid)
إنشاء ثلاثة أعمدة متساوية العرض باستخدام وحدة fr
إنشاء صفين: الأول بارتفاع 150px والثاني بارتفاع 250px
إضافة فجوة بمقدار 20px بين جميع عناصر الشبكة

اكتب فقط كود CSS الخاص بالفئة grid-container.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>