تنفيذ تخطيط باستخدام الوحدة النمطية متعددة الأعمدة CSS

تعد وحدة تخطيط CSS متعددة الأعمدة أداة قوية تتيح لك بسهولة إنشاء تخطيطات متعددة الأعمدة لصفحات الويب الخاصة بك. ظهور التصميم سريع الاستجابة يعني أنه من المهم فهم كيفية استخدام هذه الوحدة.

يمكنك استخدام خصائص العمود لإنشاء تخطيطات مرنة وديناميكية تتكيف مع أحجام الشاشات المختلفة.

تحديد رقم العمود والعرض والفجوة

لإنشاء تخطيط مناسب متعدد الأعمدة لمحتوى صفحتك ، يجب أن تبدأ بتحديد عدد الأعمدة التي تريدها أن تمتد. واحدة من أهم الخصائص في الوحدة النمطية متعددة الأعمدة هي عدد الأعمدة الخاصية ، التي تستخدمها لتعيين عدد الأعمدة لتقسيم المحتوى إليها.

على سبيل المثال:

.حاوية {
عدد الأعمدة: 3;
}

يمكنك أيضًا تحديد عرض وفجوة الأعمدة. يمكنك تعيين قيمة عرض العمود باستخدام أي من وحدات CSS المدعومة يحب مقصف, م، أو %.

لو عرض العمود تم تعيينه على آلي، سيقوم المتصفح بحساب عرض كل عمود بناءً على ملف عدد الأعمدة الممتلكات والمساحة المتوفرة داخل التصميم الخاص بك.

على سبيل المثال ، يعلن هذا CSS 3 أعمدة ، يبلغ عرض كل منها 200 بكسل:

.حاوية {
عدد الأعمدة: 3;
عرض العمود: 200مقصف;
} 

ال فجوة العمود تحدد الخاصية الفجوة ، أو المسافة ، بين الأعمدة في تخطيط متعدد الأعمدة. سيحدد حجم المساحات الفارغة بين الأعمدة المجاورة ويمكن أن يأخذ قيمة طول بالبكسل أو ems أو أي وحدات أخرى مدعومة.

على سبيل المثال:

.حاوية {
عدد الأعمدة: 3;
فجوة العمود: 20مقصف; / * يضبط الفجوة بين الأعمدة على 20 بكسل * /
}

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

التأكد من توازن الأعمدة

تحاول أعمدة CSS ملء كل المساحة المتاحة داخل التخطيط. يمكن أن ينتج عن هذا أحيانًا أعمدة ذات ارتفاعات مختلفة بشكل كبير ، مما يجعل التخطيط يبدو غير متساوٍ.

لتحقيق التوازن بين الأعمدة ، يجب أن تتأكد من أن كل عمود في التخطيط الخاص بك يحتوي على نفس مقدار المحتوى تقريبًا.

يمكنك تحقيق ذلك عن طريق ضبط CSS ملء العمود الملكية ل توازن. سيحاول المستعرض بعد ذلك توزيع المحتوى بالتساوي عبر جميع الأعمدة بحيث تكون بنفس الارتفاع تقريبًا.

ال ملء العمود تم تعيين الخاصية على توازن بشكل افتراضي ، ولكن قيمة آلي سيغير هذا السلوك. يؤدي استخدام المحتوى تلقائيًا إلى توزيع المحتوى عبر الأعمدة بناءً على المساحة المتاحة. يمكن أن يؤدي هذا إلى مسافات غير متساوية بين الأعمدة وارتفاعات غير متساوية للأعمدة. يمكنه حتى إنتاج تخطيط بأعمدة فارغة.

فيما يلي مثال على كيفية استخدام ملف ملء العمود خاصية لموازنة الأعمدة في تخطيط متعدد الأعمدة:

تنسيق متعدد الأعمدة {
عدد الأعمدة: 3;
فجوة العمود: 20مقصف;
ملء العمود: توازن;
}

في هذا المثال ، لدينا تخطيط متعدد الأعمدة بثلاثة أعمدة وفجوة 20 بكسل بين كل عمود. عن طريق تحديد ملء العمود الملكية ل توازن، نحن نضمن توزيع المحتوى بالتساوي عبر الأعمدة ، مما ينتج عنه ارتفاعات متوازنة للعمود.

من المهم ملاحظة أن ملف ملء العمود قد لا تعمل الخاصية بشكل جيد لجميع التخطيطات وقد تؤدي إلى تباعد غير متساو بين الأعمدة. في مثل هذه الحالات ، قد تحتاج إلى استخدام JavaScript لموازنة الأعمدة يدويًا. تذكر أن تتبع أفضل الممارسات و استخدام التحسين التدريجي حتى لا تعتمد على JavaScript.

ضع كل شيء معا

يمكنك الجمع بين كل ما تعلمته حول تنفيذ تخطيط باستخدام أعمدة CSS واستخدامه لإنشاء تخطيط على غرار المجلات.

أولاً ، قم بإنشاء بنية HTML الأساسية. استخدم عنصر الحاوية لالتفاف المحتوى الخاص بك ، ثم قم بإنشاء عدة عناصر فرعية يمكنك بعد ذلك تخطيطها في أعمدة.

لغة البرمجة>
<لغة البرمجة>
<رأس>
<وصلةrel="ورقة الأنماط"href="CSScolumns.css" />
رأس>
<جسم>
 عنصر الحاوية 
<شعبةفصل="تصميم المجلة">
 العناصر التابعة 
<شعبةفصل="شرط">
<h2>عنوان المقالh2>
<ص>Lorem ipsum dolor sit amet، consectetur adipiscing elit. سد في
 ماجنا فيل لوريم pharetra bibendum.ص>
شعبة>
<شعبةفصل="شرط">
<h2>عنوان المقالh2>
<ص>Lorem ipsum dolor sit amet، consectetur adipiscing elit. سد في
 ماجنا فيل لوريم pharetra bibendum.ص>
شعبة>
<شعبةفصل="شرط">
<h2>عنوان المقالh2>
<ص>Lorem ipsum dolor sit amet، consectetur adipiscing elit. سد في
 ماجنا فيل لوريم pharetra bibendum.ص>
شعبة>
شعبة>
جسم>
لغة البرمجة>

لإنشاء تخطيط على غرار المجلات باستخدام وحدة CSS متعددة الأعمدة ، ادمج ملف عدد الأعمدة, عرض العمود, فجوة العمود، و ملء العمود ملكيات:

.magazine-layout {
عدد الأعمدة: 3;
عرض العمود: 300مقصف;
فجوة العمود: 20مقصف;
ملء العمود: توازن;
}
.شرط {
لون الخلفية: # f8f8f8;
نصف قطر الحد: 4مقصف;
مربع الظل: 0 2مقصف 4مقصفrgba(0, 0, 0, 0.1);
حشوة: 10مقصف;
اقتحام الداخل: تجنب العمود;
}

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

استخدام الإجراءات الاحتياطية للمتصفحات غير المدعومة

من المهم ملاحظة أن ملف عدد الأعمدة الخاصية غير مدعومة في جميع المتصفحات. المتصفحات التي لا تدعم عدد الأعمدة، سيعرض المحتوى في عمود واحد بدلاً من ذلك.

لتوفير أنماط احتياطية للمتصفحات غير المدعومة ، يمكنك استخدام استعلامات الميزات مثل @ الدعم للكشف عن دعم عدد الأعمدة الخاصية وتقديم أنماط بديلة عندما لا تكون الخاصية مدعومة.

على سبيل المثال:

.حاوية {
/ * احتياطي للمتصفحات التي لا تدعم عدد الأعمدة * /
عرض: 100%;
}
/ * الكشف عن دعم عدد الأعمدة * /
@ الدعم (عدد الأعمدة:3) {
.حاوية {
عدد الأعمدة: 3;
 }
}

في هذا المثال ، نستخدم الامتداد @ الدعم الاستعلام عن ميزة لاكتشاف دعم عدد الأعمدة ملكية. إذا كان المستعرض يدعم عدد الأعمدة ، فإن ملف حاوية سيتم عرض العنصر في ثلاثة أعمدة. إذا كان المستعرض لا يدعم عدد الأعمدة ، فسيعرض المحتوى في عمود واحد باستخدام عرض ملكية.

تقسيم المحتوى إلى أعمدة

بشكل عام ، توفر أعمدة CSS طريقة عملية وقوية لإنشاء تخطيطات متعددة الأعمدة مرنة وسريعة الاستجابة تعزز قابلية الاستخدام وتجربة المستخدم لمحتوى الويب.

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