أساسيات 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.

ورقة مرجعية

CSS Grid هو نظام تخطيط لإنشاء صفحات ويب تحتوي على صفوف وأعمدة. لإنشاء حاوية شبكة (grid container)، استخدم display: grid:

.container {
  display: grid;
}

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

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* ثلاثة أعمدة، العمود الأوسط عرضه الضعف */
}

قم بتعريف الصفوف باستخدام grid-template-rows وأضف مسافات باستخدام gap:

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

جرّب بنفسك

<!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>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.