خصائص CSS المتعلقة بتخطيط الشبكة
تشرح هذه المقالة خصائص CSS المتعلقة بتخطيط الشبكة۔
يمكنك تعلم كيفية وصف الشبكة وشبكة الخط المدمجة۔
YouTube Video
HTML للمعاينة
css-grid.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-grid.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>grid</h3>
23 <section style="width: 100%; height: 350px;">
24 <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
25 <section class="sample-view">
26 <div class="grid-box">
27 <div class="grid-item">Item 1</div>
28 <div class="grid-item">Item 2</div>
29 <div class="grid-item">Item 3</div>
30 <div class="grid-item">Item 4</div>
31 <div class="grid-item">Item 5</div>
32 <div class="grid-item">Item 6</div>
33 </div>
34 </section>
35 </section>
36 <section style="width: 100%; height: 550px;">
37 <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
38 <section class="sample-view">
39 <div class="grid-container" style="color: #666;">
40 <header class="grid-header">Header</header>
41 <aside class="grid-sidebar">Sidebar</aside>
42 <article class="grid-content">
43 <p>Content</p>
44 </article>
45 <aside class="grid-ads">Ads</aside>
46 <footer class="grid-footer">Footer</footer>
47 </div>
48 </section>
49 </section>
50 </article>
51 <article>
52 <h3>gap</h3>
53 <section style="height: 300px;">
54 <header><h4>display: grid; gap: 30px 10px;</h4></header>
55 <section class="sample-view">
56 <div class="gap-grid-container">
57 <div>Item 1</div>
58 <div>Item 2</div>
59 <div>Item 3</div>
60 <div>Item 4</div>
61 <div>Item 5</div>
62 <div>Item 6</div>
63 </div>
64 </section>
65 </section>
66 <section>
67 <header><h4>display: flex; gap: 50px;</h4></header>
68 <section class="sample-view">
69 <div class="gap-flex-container">
70 <div>Item 1</div>
71 <div>Item 2</div>
72 <div>Item 3</div>
73 </div>
74 </section>
75 </section>
76 </article>
77 <article>
78 <h3>grid-template-areas</h3>
79 <section style="height: 350px;">
80 <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
81 <section class="sample-view">
82 <div class="grid-template-areas-container">
83 <div class="grid-template-areas-header">Header</div>
84 <div class="grid-template-areas-sidebar">Sidebar</div>
85 <div class="grid-template-areas-content">Content</div>
86 <div class="grid-template-areas-footer">Footer</div>
87 </div>
88 </section>
89 </section>
90 </article>
91 <article>
92 <h3>inline-grid</h3>
93 <section>
94 <header><h4>display: inline-grid</h4></header>
95 <section class="sample-view">
96 Here is an inline grid:
97 <span class="inline-grid-container">
98 <div class="inline-grid-item">1</div>
99 <div class="inline-grid-item">2</div>
100 <div class="inline-grid-item">3</div>
101 <div class="inline-grid-item">4</div>
102 </span>
103 This is contained within a paragraph.
104 </section>
105 </section>
106 </article>
107 </main>
108</body>
109</html>تخطيط الشبكة
شبكة
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 200px auto;
4 grid-template-rows: 100px auto 50px;
5 gap: 10px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16 border: 2px solid black;
17}الشبكة هي نظام تخطيط لمحاذاة العناصر في صفوف وأعمدة ثنائية الأبعاد۔ باستخدام الشبكة، يمكنك إنشاء تخطيطات معقدة بسهولة ومرونة كانت صعبة باستخدام طرق float أو position التقليدية۔ في حين يبرع flexbox في التخطيطات أحادية الأبعاد، فإن الشبكة مناسبة للتخطيطات ثنائية الأبعاد۔
- تقوم فئة
grid-boxبتطبيق تخطيط الشبكة عن طريق تحديدشبكةفي خاصيةالعرض۔ يُطلق على هذا العنصر اسم حاوية الشبكة۔ - تحدد خاصية
grid-template-columnsعرض أعمدة الشبكة۔ في هذا المثال، يكون عرض العمود الأول 100 بكسل، والثاني 200 بكسل، والثالث يشغل المساحة المتبقية (تلقائي)۔ - تحدد خاصية
grid-template-rowsارتفاع صفوف الشبكة۔ يكون ارتفاع الصف الأول 100 بكسل، والثاني تلقائي (تلقائي)، والثالث 50 بكسل۔ - تحدد خاصية
gapالتباعد بين عناصر الشبكة۔ إضافة 10 بكسل من الفراغ بين الأعمدة والصفوف۔
المصطلحات الأساسية
- حاوية الشبكة هي عنصر يتم تعيين خاصية
العرضله إلىشبكة، وتصبح العناصر الأطفال عناصر الشبكة۔ - عناصر الشبكة هي العناصر الفرعية الموضوعة مباشرة تحت حاوية الشبكة۔
خصائص الشبكة الرئيسية
grid-template-columns & grid-template-rows
1.container {
2 grid-template-columns: 1fr 2fr 1fr;
3}- تحدد خصائص
grid-template-columnsوgrid-template-rowsحجم كل عمود وصف۔ - يمكن استخدام وحدات مثل
pxو%بالإضافة إلىfr(جزء) لتحديد نسبة من المساحة المتبقية۔- في هذا المثال، هناك ثلاث أعمدة، والعمود الثاني يعادل ضعف عرض الأعمدة الأخرى۔
grid-column & grid-row
1.container {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr); /* 4 columns */
4 grid-template-rows: repeat(3, 100px); /* 3 rows */
5}
6.item {
7 grid-column: 2 / 4;
8 grid-row: 1 / 3;
9}
10/* Grid line number (3 rows & 4 columns)
11 1 2 3 4 5
121 +---+---+---+---+
13 | | o | o | |
142 +---+---+---+---+
15 | | o | o | |
163 +---+---+---+---+
17 | | | | |
184 +---+---+---+---+
19*/-
خاصيتا
grid-columnوgrid-rowتُستخدمان لتحديد موقع العناصر في الشبكة۔ بدلاً من أرقام الخلايا، يتم الترقيم بناءً على خطوط الشبكة۔- في هذا المثال، يتم وضع العنصر من خط الشبكة العمودي الثاني إلى الرابع ومن خط الشبكة الأفقي الأول إلى الثالث۔ بمعنى آخر، يشغل الخلايا في الأعمدة 2 و 3، والصفوف 1 و 2۔
-
خطوط الشبكة تشير إلى الخطوط التي تقسم الصفوف والأعمدة داخل حاوية الشبكة۔ يتم ترقيم خطوط الشبكة تلقائيًا بدءًا من الرقم 1 وتُستخدم كـحدود للصفوف والأعمدة۔
- على سبيل المثال، تحتوي الشبكة التي بها 4 أعمدة على 5 خطوط شبكية عمودية مرقمة من 1 إلى 5، ويتم وضع كل خلية في المنطقة بين هذه الخطوط۔
grid-auto-rows & grid-auto-columns
1.container {
2 display: grid;
3 grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
4 grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
5 grid-auto-rows: 150px; /* Automatically added rows will be 150px */
6 grid-auto-columns: 100px; /* Automatically added columns will be 100px */
7}
8
9.item {
10 grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11 grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}grid-auto-rowsوgrid-auto-columnsهما خصائص تتحكم في حجم الصفوف والأعمدة التي يتم إنشاؤها تلقائيًا عند عدم تحديد خطوط أو أعمدة تخطيط الشبكة بشكل صريح۔- في هذا المثال، تم تحديد صفين وعمودين بشكل صريح، ولكن إذا تمت إضافة عناصر إضافية، فسيتم إنشاء صفوف أو أعمدة جديدة تلقائيًا وفقًا لـ
grid-auto-rowsوgrid-auto-columns۔
- في هذا المثال، تم تحديد صفين وعمودين بشكل صريح، ولكن إذا تمت إضافة عناصر إضافية، فسيتم إنشاء صفوف أو أعمدة جديدة تلقائيًا وفقًا لـ
justify-items & align-items
1.container {
2 justify-items: center; /* Center items horizontally */
3 align-items: center; /* Center items vertically */
4}- محاذاة عناصر الشبكة أفقيًا (
justify-items) وعموديًا (align-items)۔
grid-area
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5 grid-area: 1 / 2 / 3 / 4;
6}grid-areaهي خاصية تتيح لك تحديد نطاقات الصفوف والأعمدة مرة واحدة لوضع عنصر الشبكة۔ تحدد الموضع باستخدام أرقام خطوط الشبكة، وليس أرقام الخلايا۔- في هذا المثال، يتم وضع العنصر من خط الشبكة الأفقي الأول إلى الثالث، ومن خط الشبكة العمودي الثاني إلى الرابع۔ بمعنى آخر، يشغل مجموعة الخلايا في الصفوف 1 و 2، والأعمدة 2 و 3۔
gap
1.container {
2 gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}gapتضيف مساحة بين الأعمدة والصفوف۔ يمكنك أيضًا تحديد المسافة بين الأعمدة والصفوف بشكل منفصل باستخدامcolumn-gapوrow-gap۔
grid-auto-flow
1.container {
2 grid-auto-flow: column; /* Add items in the column direction */
3}grid-auto-flowهي خاصية تحدد الاتجاه الذي يتم وضع العناصر فيه، إما حسب الصفوف أو حسب الأعمدة۔
مثال على التخطيطات المعقدة
1.grid-container {
2 display: grid;
3 grid-template-columns: 120px 1fr 80px;
4 grid-template-rows: 50px 1fr 50px;
5 gap: 10px;
6 background-color: transparent;
7 border: none;
8 height: 400px;
9}
10.grid-header {
11 grid-column: 1 / 4;
12 background-color: lightblue;
13}
14.grid-sidebar {
15 grid-column: 1 / 2;
16 grid-row: 2 / 3;
17 height: 100%;
18 background-color: lightslategray;
19 color: white;
20}
21.grid-content {
22 grid-column: 2 / 3;
23 grid-row: 2 / 3;
24 background-color: lightskyblue;
25}
26.grid-content p {
27 margin: 0;
28 padding: 0;
29 height: 260px;
30}
31.grid-ads {
32 grid-column: 3 / 4;
33 grid-row: 2 / 3;
34 height: 100%;
35 background-color: lightsteelblue;
36}
37.grid-footer {
38 grid-column: 1 / 4;
39 background-color: lightgray;
40}بهذه الطريقة، يسمح لك الشبكة بإنشاء تخطيط كامل لصفحة الويب باستخدام كود بسيط۔
- في هذا المثال، توجد ثلاث أعمدة (الشريط الجانبي، المحتوى الرئيسي، والإعلان) وثلاثة صفوف (الرأس، المحتوى، والتذييل)۔
- يشغل الرأس والتذييل العرض الكامل للصفحة، مع وجود المحتوى في الوسط، والشريط الجانبي والإعلان على كلا الجانبين۔
مزايا الشبكات
تشمل مزايا الشبكة النقاط التالية:۔
- تخطيط ثنائي الأبعاد بسهولة: إدارة التخطيط في كل من الصفوف والأعمدة يسمح بتحقيق تخطيطات معقدة باستخدام كود أقل۔
- متوافق مع التصميم التفاعلي: يجعل نظام الشبكة من السهل إنشاء تصاميم تتكيف مع أحجام الشاشات المختلفة۔
خاصية gap
1.gap-grid-container {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 30px 10px;
5 background-color: transparent;
6 border: none;
7 height: 200px;
8}
9
10.gap-grid-container div {
11 width: 100px;
12 background-color: lightskyblue;
13}
14
15.gap-flex-container {
16 display: flex;
17 gap: 50px;
18}
19
20.gap-flex-container div {
21 width: 80px;
22 background-color: lightgreen;
23}تُستخدم خاصية gap في تخطيطات الشبكة والـ flexbox لتعيين المسافات (الفجوات) بين العناصر۔ باستخدام هذه الخاصية، يمكنك بسهولة وضع مسافات بين العناصر الفرعية۔
- في صنف
gap-grid-container، يتم تعيين فجوة عمودية بمقدار30pxوأفقية بمقدار10pxبين كل عنصر۔ نظرًا لإنشاء شبكة مكونة من 3 أعمدة باستخدامgrid-template-columns، يتم تطبيق الفجوات عموديًا وأفقيًا بين كل عنصر۔ في صنفgap-flex-container، يتم تطبيق فجوة بمقدار50pxبين العناصر الثلاثة في الفلكس بوكس۔
الصياغة الأساسية
1.container {
2 display: grid; /* or flex */
3 gap: <row-gap> <column-gap>;
4}- الخاصية
row-gapتحدد الفجوة بين الصفوف۔ هذه هي المسافات العمودية في تخطيطات الشبكة أو الفلكس۔ - الخاصية
column-gapتحدد الفجوة بين الأعمدة۔ هذه هي المسافات الأفقية۔
إذا لم يتم تحديد قيمتين، يتم تطبيق قيمة واحدة على كل من row-gap و column-gap۔
مزايا خاصية gap
تشمل فوائد خاصية gap ما يلي:۔
- إعداد الفجوات بسهولة: يصبح الكود الخاص بتحديد الفجوات بين العناصر التابعة أبسط، مما يلغي الحاجة إلى تحديد هوامش أو حشوات إضافية بين العناصر۔
- التكيف المرن: يدعم بسهولة التصميمات التفاعلية، مما يسمح بإجراء تعديلات مرنة في التصميم۔
خاصية grid-template-areas
1.grid-template-areas-container {
2 display: grid;
3 grid-template-columns: 1fr 2fr; /* 2 columns */
4 grid-template-rows: auto auto; /* 2 rows */
5 grid-template-areas:
6 "header header"
7 "sidebar content"
8 "footer footer"; /* In the 3rd row, the footer spans across */
9 gap: 10px;
10 height: 250px;
11}
12.grid-template-areas-container div {
13 width: 100%;
14 height: 100%;
15}
16.grid-template-areas-header {
17 grid-area: header; /* Placed in the "header" area */
18 background-color: lightblue;
19}
20.grid-template-areas-sidebar {
21 grid-area: sidebar; /* Placed in the "sidebar" area */
22 background-color: lightslategray;
23}
24.grid-template-areas-content {
25 grid-area: content; /* Placed in the "content" area */
26 background-color: lightskyblue;
27}
28.grid-template-areas-footer {
29 grid-area: footer; /* Placed in the "footer" area */
30 background-color: lightsteelblue;
31}خاصية grid-template-areas توفر طريقة لتسمية المناطق داخل الحاوية الشبكية واستخدام تلك الأسماء لتحديد مواضع العناصر الشبكية بسهولة۔ استخدام هذه الخاصية يسمح بتعريفات تخطيط مرئية وبديهية۔
يجب أن تكون العناصر الموضوعة في المناطق المسماة التي تم تحديدها بواسطة خاصية grid-template-areas تحمل نفس الاسم المعيّن باستخدام خاصية grid-area۔ حتى إذا امتدت العناصر عبر عدة خلايا، يتم وضعها تلقائيًا بشكل صحيح۔
في هذا المثال، يتم إنشاء الشبكة على النحو التالي:۔
- في الصف الأول، يتم وضع "header" على امتداد عمودين۔
- يتم وضع "Sidebar" على اليسار و"content" على اليمين في الصف الثاني۔
- يتم وضع "Footer" على امتداد عمودين في الصف الثالث۔
الاستخدام الأساسي
1grid-template-areas:
2 "area1 area2 area3"
3 "area1 area4 area5";في خاصية grid-template-areas، يتم تحديد اسم المنطقة لكل صف۔ من خلال وضع العناصر في مناطق بأسماء مخصصة، يمكنك إنشاء تخطيطات بسهولة۔
- في هذا المثال، يتم إنشاء شبكة مكونة من صفين و3 أعمدة، وكل خلية يتم تسميتها area1، area2، وهكذا۔
تحديد الخلايا الفارغة باستخدام .
1grid-template-areas:
2 "header header header"
3 "sidebar . content"
4 "footer footer footer";إذا كنت ترغب في وجود خلايا فارغة في تخطيطك، يمكنك تمثيل الخلايا الفارغة باستخدام . (نقطة).۔
- كما هو موضح في هذا المثال، عن طريق تحديد . بين sidebar و content، تصبح العمود الثاني فارغاً.۔
مزايا خاصية grid-template-areas
تشمل مزايا خاصية grid-template-areas النقاط التالية:۔
- التخطيط البصري: يتيح لك التعبير بصريًا عن التخطيط، مما يسهل فهم التصميم.۔
- سهولة تحريك العناصر: يمكنك بسهولة تعديل تخطيط العناصر عن طريق تغيير تعريفات المناطق في CSS دون تعديل HTML.۔
ملاحظات
عند استخدام خاصية grid-template-areas، من المهم مراعاة النقاط التالية:۔
- يجب أن يتطابق عدد الأسماء في كل صف مع عدد الأعمدة المحددة.۔
- إذا قمت بتعيين نفس الاسم لعدة خلايا، فسيتم دمج تلك الخلايا۔
- إذا قمت بتعيين نفس الاسم عبر صفوف وأعمدة مختلفة، فيجب أن تشكل المساحة مستطيلاً۔
inline-grid
1.inline-grid-container {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6}
7.inline-grid-item {
8 background-color: lightskyblue;
9 width: 50px;
10 padding: 0;
11 margin: 0;
12}inline-grid هي إحدى القيم لمتغير display في CSS.۔ تطبيق هذه الخاصية يجعل العنصر يتصرف كحاوية على مستوى السطر، مما ينتج سياق تخطيط شبكة داخلي.۔ على عكس display: grid، فإنه يتصرف كعنصر سطري في تدفق الوثيقة.۔
حالات استخدام inline-grid
inline-grid ليست شائعة مثل grid، لكنها يمكن أن تُستخدم بفعالية في سيناريوهات معينة.۔
-
شبكة داخل سياق سطري: مفيد عندما تريد وضع شبكة بجانب محتوى نصي أو عناصر سطرية أخرى.۔ على سبيل المثال، يكون مفيدًا عند الحاجة إلى هيكل شبكي للأزرار أو الشارات أو التصنيفات، ولكنك تريد العرض كعنصر سطري دون تعطيل تدفق النص.۔
-
التحكم في التخطيط داخل العناصر السطرية: حتى عند الحاجة إلى تخطيطات معقدة داخل عناصر سطرية مثل الروابط أو الأزرار أو العنصر span، يمكن لـ
inline-gridإدارة الهيكل الداخلي باستخدام تخطيط الشبكة مع تجنب عرض الكتل.۔
1<button class="inline-grid">
2 <span>Icon</span>
3 <span>Text</span>
4</button>في هذه الحالة، يعرض الزر الأيقونات والنص في شبكة، بينما يظل كعنصر سطري في تدفق الوثيقة.۔
- عناصر سطرية متجاوبة: يمكن استخدام
inline-gridللعناصر الصغيرة التي تكون جزءاً من المحتوى السطري وتحتاج إلى تخطيط شبكي.۔ على سبيل المثال، يناسب النماذج السطرية أو الشارات أو تصنيفات المنتجات، حيث ترغب في تعديل التخطيط باستخدام شبكة مع إبقائها سطرية.۔
محاذاة وحجم inline-grid
1.inline-grid {
2 display: inline-grid;
3 vertical-align: middle;
4}- مثل بقية العناصر السطرية، يلتزم
inline-gridبمحاذاة رأسية بالنسبة للمحتوى المحيط.۔ يمكنك التحكم في محاذاة الشبكة باستخدام خاصيةvertical-align.۔
1.inline-grid {
2 display: inline-grid;
3 width: 200px;
4 height: 100px;
5}- فيما يتعلق بالحجم، فإن عنصر
inline-gridيشغل فقط العرض المطلوب بواسطة محتوى الشبكة الخاصة به۔ إذا لزم الأمر، يمكنك تعيين العرض والارتفاع والأبعاد الدنيا/العظمى بشكل صريح۔
1.inline-grid {
2 display: inline-grid;
3 grid-template-columns: auto 1fr;
4}من الممكن أيضًا لتخطيط الشبكة نفسها تحديد حجم وعاء inline-grid، وتكون هذه الظاهرة أقوى عند استخدام الوحدات المرنة مثل fr وauto والنسب المئوية۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔