مقارنة بين تخطيطات Flexbox و Grid و Column
توضح هذه المقالة المقارنة بين تخطيطات Flexbox و Grid و Column۔
ستتعلم الفرق بين تخطيطات Flexbox و Grid و Column، ومتى تستخدم كل منها۔
YouTube Video
HTML للمعاينة
css-layout-comparision.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-layout-comparision.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15 <!-- Main content -->
16 <main>
17 <header>
18 <h2>Layout Comparision</h2>
19 </header>
20 <article>
21 <h3>flex</h3>
22 <section>
23 <section class="sample-view">
24 <div class="flex-container">
25 <div class="flex-item">Item 1</div>
26 <div class="flex-item">Item 2</div>
27 <div class="flex-item">Item 3</div>
28 <div class="flex-item">Item 4</div>
29 <div class="flex-item">Item 5</div>
30 <div class="flex-item">Item 6</div>
31 <div class="flex-item">Item 7</div>
32 <div class="flex-item">Item 8</div>
33 <div class="flex-item">Item 9</div>
34 </div>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>grid</h3>
40 <section>
41 <section class="sample-view">
42 <div class="grid-box">
43 <div class="grid-item item1">Item 1</div>
44 <div class="grid-item item2">Item 2</div>
45 <div class="grid-item item3">Item 3</div>
46 <div class="grid-item item4">Item 4</div>
47 <div class="grid-item item5">Item 5</div>
48 <div class="grid-item item6">Item 6</div>
49 <div class="grid-item item7">Item 7</div>
50 <div class="grid-item item8">Item 8</div>
51 <div class="grid-item item9">Item 9</div>
52 </div>
53 </section>
54 </section>
55 </article>
56 <article>
57 <h3>column</h3>
58 <section>
59 <section class="sample-view">
60 <section class="columns-container">
61 <p class="columns-item">Item 1</p>
62 <p class="columns-item">Item 2</p>
63 <p class="columns-item">Item 3</p>
64 <p class="columns-item">Item 4</p>
65 <p class="columns-item">Item 5</p>
66 <p class="columns-item">Item 6</p>
67 <p class="columns-item">Item 7</p>
68 <p class="columns-item">Item 8</p>
69 <p class="columns-item">Item 9</p>
70 </section>
71 </section>
72 </section>
73 </article>
74 </main>
75</body>
76</html>مقارنة بين تخطيطات Flexbox و Grid و Column
flex وgrid وcolumns في CSS هي جميعها تقنيات لتنسيق العناصر وترتيبها، لكن لكل منها نقاط قوة خاصة وحالات استخدام مثالية.۔ فيما يلي تفسير واضح لاختلافاتها من خلال المقارنة.۔
Flexbox（display: flex）
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 flex-wrap: wrap;
6 background-color: lightblue;
7 height: 200px;
8}
9
10.flex-item {
11 background-color: lightskyblue;
12 padding: 10px;
13 margin: 5px;
14 width: 70px;
15 height: auto;
16}الميزات
- مناسب لتخطيطات باتجاه واحد - سواء كانت أفقية أو عمودية.۔
- يسمح بالتحكم المرن في الترتيب ومرونة العناصر.
- الأفضل للتخطيطات الصغيرة الحجم مثل أشرطة التنقل ومجموعات الأزرار.۔
المزايا
- يضبط حجم العناصر الفرعية تلقائيًا.۔
- يمكنك تغيير ترتيب العناصر باستخدام خصائص مثل
flex-directionوflex-wrapوorder.۔
مثال على تغيير ترتيب العرض
كمثال على تغيير ترتيب العرض، دعونا نضبط خاصية flex-direction إلى column.۔
1.flex-container {
2 flex-direction: column;
3}عند ضبط flex-direction إلى column، تتحول العناصر من تخطيط أفقي إلى تخطيط عمودي.۔ يتغير التخطيط من اليسار إلى اليمين إلى الأعلى إلى الأسفل.۔
Grid（display: grid）
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 100px 100px;
4 grid-template-rows: 50px 50px 50px;
5 gap: 20px;
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}الميزات
- مثالي لتخطيطات ثنائية الأبعاد.۔
- يسمح بـ تعريف واضح لتخطيطات الشبكة.۔
- رائع للتصميمات الأكثر تعقيدًا وهيكل الصفحة بشكل عام.۔
المزايا
- يمكن تعريف الصفوف والأعمدة في وقت واحد.۔
- يمكن وضع الأقسام باستخدام المناطق المسماة (
grid-area).۔ - يمكن وضع العناصر الفرعية بشكل حر داخل الشبكة، مما يتيح تحكمًا مرنًا في الترتيب.۔
مثال على تغيير ترتيب العرض
كمثال على تغيير ترتيب العرض، دعونا نستخدم خاصية grid-template-areas لتحديد مواضع العرض.۔
1.grid-box {
2 grid-template-areas:
3 "item1 item4 item5"
4 "item2 item6 item7"
5 "item3 item8 item9";
6}
7
8.item1 { grid-area: item1; }
9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }كما ترى، يمكن استخدام grid ليس فقط لتغيير ترتيب العرض ولكن أيضًا لإنشاء تخطيطات فريدة.۔
Columns（column-count, column-width）
1.columns-container {
2 background-color: lightblue;
3 columns: 100px 3;
4 column-gap: 20px;
5 column-rule: 2px solid #333;
6 padding: 10px;
7}
8
9.columns-item {
10 background-color: lightskyblue;
11 text-align: center;
12 margin: 20px auto;
13 color: white;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 font-size: 1.2rem;
18 border: 1px solid #ccc;
19 height: 50px;
20}الميزات
- يمكنك بسهولة إنشاء أعمدة بأسلوب المجلات.۔
- مثالي لتنسيق المحتوى النصي المتدفق.۔
- يتبع ترتيب المصدر في HTML، مما يجعله أقل ملاءمة للتحكم في ترتيب العناصر.۔
المزايا
- يمكنه تقسيم النصوص الطويلة تلقائيًا.۔
- يمكنك بسهولة إنشاء تخطيطات بأسلوب الصحف.۔
جدول المقارنة
| الخاصية / الحالة الاستخدامية | Flexbox | Grid | أعمدة |
|---|---|---|---|
| أبعاد التخطيط | 1D (أفقي أو عمودي) | 2D (أفقي & عمودي) | 1D (عمودي) |
| الأفضل لـ | محاذاة المكونات | هيكل الصفحة بالكامل | نص متعدد الأعمدة |
| مرونة التخطيط | عالية (في الترتيب والحجم) | عالية جدًا (لتحديد المناطق) | منخفضة (فقط التقسيم التلقائي) |
| التحكم في المكونات الفرعية | مرن | معرف بوضوح | صعب التحكم |
| نية التخطيط | مدفوع بالمحتوى | مدفوع بالتخطيط | مدفوع بالنص |
الملخص
- Flexbox مثالي عندما تريد محاذاة العناصر في صف واحد، مثل الرؤوس أو قوائم البطاقات۔
- Grid مناسب عندما تريد تصميم التخطيط بأكمله، مثل هيكل صفحة الويب۔
- الأعمدة هي الأفضل عندما تريد تنسيق النص في أعمدة متعددة، مثل المقالات أو المدونات۔
يمكنك أيضًا دمجها حسب الحاجة۔ على سبيل المثال، يمكنك تصميم التخطيط العام باستخدام Grid ومحاذاة العناصر الداخلية باستخدام Flex.۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔