فقرة فرعية #2 من درس: Grid View مع الصفحات المتجاوبة في لغة CSS

CSS responsive grid view system نظام grid والصفحات المتجاوبة في لغة CSS

سوف تتعلم في هذا الدرس نظام grid view مع وعلاقتة بصفحات الويب المتجاوبة ولماذا هو يعد من أفضل الأنظمة لعمل صفحات متجاوبة في لغة CSS.

1 صفوف تعليمية

لغة CSS

3,649 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

نبدأ في تجهيز صفحة ويب مبنية بنظام grid تتكون من حاوية كبيرة هذة الحاوية تتكون من صفوف كل صف يتكون من 12 عمود في لغة CSS.

CSS responsive grid view system

إضافة view port للصفحة عن طريق عنصر meta tag في منطقة head داخل صفحة HTML.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CloseTag</title>
</head>
<body>
    
</body>
</html>

جرّب بنفسك

CSS Add box-sizing

إضافة خاصية box-sizing مع القيمة border-box لجميع العناصر في الصفحة لكي تشمل جميع أحجام العناصر padding + border.