Articles
مقدمة إلى CSS
خصائص CSS المتعلقة بتخطيط الأعمدة

خصائص CSS المتعلقة بتخطيط الأعمدة

تشرح هذه المقالة خصائص CSS المتعلقة بتخطيط الأعمدة۔

يمكنك تعلم كيفية وصف تخطيطات الأعمدة۔

YouTube Video

HTML للمعاينة

css-columns.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-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section style="width: 100%; height: 350px;">
24                <h4>Columns Example</h4>
25                <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26                <section class="sample-view">
27                    <section class="columns-container">
28                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31                        <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32                        <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33                        <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34                    </section>
35                </section>
36            </section>
37        </article>
38        <article>
39            <h3>order</h3>
40            <section style="height: 300px;">
41                <header><h4>column-width: 250px</h4></header>
42                <section class="sample-view">
43                    <div class="container">
44                        <div class="item item-1">Item 1</div>
45                        <div class="item item-2">Item 2</div>
46                        <div class="item item-3">Item 3</div>
47                    </div>
48                </section>
49            </section>
50        </article>
51    </main>
52</body>
53</html>

تخطيط الأعمدة

الأعمدة 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

توفر خاصية columns في CSS طريقة ملائمة لعرض المحتوى مقسّمًا إلى عدة أعمدة۔ من خلال تصريح واحد، يمكنك بسهولة تحديد عرض العمود وعدد الأعمدة، مما يجعله مناسبًا للتصميم المتجاوب۔ يكون ذلك فعالًا بشكل خاص عندما يكون التنسيق مطلوبًا بحيث يتم عرض النص بشكل طويل عموديًا ويتم ترتيبه في أعمدة متعددة، كما هو الحال في الصحف أو المجلات۔

  • في هذا المثال، يتم تقسيم المحتوى إلى 3 أعمدة مع فجوة 20px وقاعدة 2px بين الأعمدة۔ بالإضافة إلى ذلك، يمتد العنصر h5 عبر عدة أعمدة۔

columns هو اختصار لخصائص column-width و column-count۔

بنية خاصية columns 

1columns: <column-width> <column-count>;

columns تتبع هذا التنسيق۔

  • <column-width>: يحدد عرض كل عمود۔ يمكنك استخدام auto أو أي وحدة طول (مثل، px، em، %، وما إلى ذلك) كقيمة۔
  • <column-count>: يحدد عدد الأعمدة۔ يتم التعبير عنه كقيمة رقمية۔
خاصية column-width 
1.container {
2  column-width: 250px;
3}

column-width هي خاصية تحدد الحد الأدنى لعرض كل عمود۔ عند استخدامها مع column-count، يصبح من الممكن التوزيع والتعديل التلقائي للأعمدة۔ المتصفح يأخذ في الاعتبار عرض الحاوية ويحسب تلقائيًا عدد الأعمدة المطلوبة۔

  • في هذا المثال، عرض كل عمود هو 250px، ويتم حساب العدد الأمثل للأعمدة بناءً على عرض الحاوية۔
خاصية column-count 
1.container {
2  column-count: 3;
3}

خاصية column-count هي خاصية تحدد صراحةً عدد الأعمدة التي يتم تقسيم العنصر المحدد إليها۔ على عكس column-width، تحدد هذه الخاصية عدد الأعمدة بشكل ثابت۔

  • في هذا المثال، يتم تقسيم المحتوى داخل الحاوية إلى ثلاثة أعمدة۔
خاصية column-gap 
1.container {
2  column-gap: 20px;
3}

خاصية column-gap هي خاصية تحدد المسافة (الفجوة) بين كل عمود۔ هناك خاصية شائعة مع شبكة CSS تسمى gap، ولكن column-gap مفيدة عندما تريد تخصيص الهوامش بين الأعمدة فقط۔

  • في هذا المثال، توجد مسافة هوامش قدرها 20px بين كل عمود۔ القيمة الافتراضية هي 16px۔
خاصية column-rule 
1.container {
2  column-rule: 2px solid #333;
3}

خاصية column-rule هي خاصية لرسم خطوط بين الأعمدة۔ لديها بناء مشابه لخاصية border وتتيح لك تحديد عرض ونمط ولون الخط۔

  • في هذا المثال، يظهر خط أسود متصل بعرض 2px بين الأعمدة۔ يمكن تقسيم خاصية column-rule إلى الخصائص الثلاثة التالية۔
    • column-rule-width: تحدد عرض الخط۔
    • column-rule-style: تحدد نمط الخط۔ على سبيل المثال، هناك solid، dashed، dotted، إلخ۔
    • column-rule-color: تحدد لون الخط۔
خاصية column-span 
1h5 {
2  column-span: all;
3}

خاصية column-span هي خاصية تحدد عنصرًا معينًا ليمتد عبر أعمدة متعددة۔ تُستخدم أساسًا مع العناصر مثل العناوين أو الرؤوس۔ هناك قيمتان ممكنتان:۔ - none: لا يمتد العنصر على الأعمدة ويتناسب مع عمود واحد۔ هذه هي القيمة الافتراضية۔ - all: يتم عرض العنصر ممتدًا على جميع الأعمدة۔

  • في هذا المثال، يتم عرض عنصر h5 ممتدًا عبر أعمدة متعددة۔
خاصية column-fill 
1.container {
2  column-fill: balance;
3}

خاصية column-fill تتحكم في كيفية توزيع المحتوى عبر الأعمدة۔ عادةً ما يتم ملء الأعمدة بأكبر قدر ممكن من التساوي، ولكن تتيح لك هذه الخاصية تحديد ترتيب مختلف۔ القيم التالية متاحة:۔ - balance: يتم ترتيب المحتوى لملء الأعمدة بالتساوي۔ هذه هي القيمة الافتراضية۔ - auto: سيتم ملء الأعمدة تلقائيًا۔ قد يصبح العمود الأخير أطول۔

  • يُعدل هذا الإعداد بحيث يتم توزيع المحتوى بالتساوي۔
الاستخدام مع استفسارات الوسائط (Media Queries) 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

يمكن دمج خاصية columns مع استفسارات الوسائط لدعم التصميم التكيفي۔ يمكنك تغيير عدد الأعمدة وعرض الأعمدة بشكل مرن اعتمادًا على أحجام الشاشات المختلفة۔

  • في هذا المثال، إذا كان عرض الشاشة 600 بكسل أو أقل، سيكون هناك عمود واحد۔ بالنسبة للشاشات الأوسع، سيتم تقسيمها إلى 3 أعمدة بعرض 200 بكسل لكل منها۔

الملخص

خاصية CSS columns هي أداة قوية لتنفيذ تخطيطات باستخدام أعمدة متعددة بسهولة۔ تكون هذه الخاصية مفيدة بشكل خاص للتصميم التكيفي وتنسيقات النصوص التي تركز على قابلية القراءة۔ من خلال الجمع بين الخصائص المرتبطة، يمكنك تخصيص عدد الأعمدة وعرضها والفجوات والتزيينات وغيرها بشكل مرن۔

يسمح هذا بالتنفيذ السهل للتصميمات الأكثر تعقيدًا، لذا يرجى الاستفادة منه۔

الترتيب 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

تُستخدم خاصية CSS order للتحكم في ترتيب عرض العناصر عند استخدام تخطيطات Flexbox أو Grid۔ عادةً ما يتم عرض العناصر وفقًا لترميز HTML، ولكن يمكنك تغيير ترتيبها المرئي باستخدام خاصية order۔ تساعد هذه الخاصية في تصميم واجهات مستخدم مرنة وبناء تصميمات تكيفية۔

  • في هذا المثال، تم ترميز العناصر في HTML كـ Item 1, Item 2, Item 3، لكن ترتيب العرض يتغير إلى Item 2, Item 3, Item 1 بفضل خاصية CSS order۔

أساسيات خاصية order

تُطبق خاصية order على العناصر داخل حاويات Flexbox أو Grid۔ تحدد ترتيب العناصر من خلال تعيين قيم عددية صحيحة لكل عنصر۔ افتراضيًا، يتم تعيين order لجميع العناصر إلى 0۔ بتغيير هذه القيمة، يمكنك تحديد الترتيب الذي يتم عرض العناصر به۔

الصياغة الأساسية 
1.item {
2  order: <integer>;
3}
  • يمكنك تعيين أي عدد صحيح لقيمة order۔ يمكن استخدام قيم موجبة أو سالبة أو صفرية۔ كلما كانت القيمة أصغر، يتم عرض العنصر مبكرًا، وكلما كانت القيمة أكبر، يتم عرضه لاحقًا۔

استخدام القيم الإيجابية والسلبية

يمكنك أيضًا تعيين قيم سالبة لخاصية order۔ يتم عرض العناصر ذات القيم السالبة قبل الترتيب الافتراضي۔

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

في هذا المثال، تم تعيين Item 1 إلى order: -1، لذا يتم عرضه أولاً۔ بالمقابل، تم تعيين Item 3 إلى order: 1، وItem 2 إلى order: 2، لذا يتم عرضها بهذا الترتيب۔

order في التصميم التفاعلي

في التصميم التفاعلي، يمكن تغيير ترتيب العناصر حسب حجم الشاشة۔ على سبيل المثال، في عرض الهواتف المحمولة، يمكنك تغيير ترتيب العناصر لعرض المعلومات الهامة أولاً۔

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

في هذا المثال، في العرض العادي، يتم عرض العناصر بترتيب Item 1، Item 2، Item 3، ولكن عندما تكون عرض الشاشة أقل من 600px، يظهر Item 2 أولاً، ثم Item 3، وأخيرًا Item 1۔

اعتبارات بشأن order

قد يؤدي استخدام خاصية order إلى ترتيب بصري مختلف عن الترتيب الموجود في شجرة DOM۔ قد يؤثر ذلك على أدوات الوصول، مثل قارئات الشاشة۔ عندما يتغير الترتيب، قد لا تعمل تقنية التنقل باستخدام لوحة المفاتيح وغيرها من تقنيات المساعدة كما هو متوقع۔ لذلك، من الضروري النظر بعناية إلى تأثير ذلك على تجربة المستخدم عند استخدام order۔

الخاتمة

خاصية order في CSS هي أداة قوية تتيح لك التحكم بسهولة في ترتيب عرض العناصر في تنسيقات Flexbox أو Grid۔ باستخدام القيم الموجبة أو السالبة، يمكنك تغيير ترتيب العناصر بمرونة، وهو أمر مفيد بشكل خاص في التصميم التفاعلي۔ مع ذلك، يجب الانتباه إلى الوصول والاختلاف بين الترتيب البصري وهيكل HTML۔ إذا تم النظر في هذه الأمور بشكل صحيح، يمكن أن تكون خاصية order مفيدة لإنشاء تصاميم أكثر ديناميكية ومرونة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بتخطيط الشبكة