Home-theater-designers
تعد وحدة تخطيط CSS متعددة الأعمدة أداة قوية تتيح لك بسهولة إنشاء تخطيطات متعددة الأعمدة لصفحات الويب الخاصة بك. ظهور التصميم سريع الاستجابة يعني أنه من المهم فهم كيفية استخدام هذه الوحدة.
يمكنك استخدام خصائص العمود لإنشاء تخطيطات مرنة وديناميكية تتكيف مع أحجام الشاشات المختلفة.
اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى
تحديد رقم العمود والعرض والفجوة
لإنشاء تخطيط مناسب متعدد الأعمدة لمحتوى صفحتك ، يجب أن تبدأ بتحديد عدد الأعمدة التي تريدها أن تمتد. واحدة من أهم الخصائص في الوحدة النمطية متعددة الأعمدة هي عدد الأعمدة الخاصية ، التي تستخدمها لتعيين عدد الأعمدة لتقسيم المحتوى إليها.
كيفية قلب صورة على android
على سبيل المثال:
.container {
column-count: 3;
}
يمكنك أيضًا تحديد عرض وفجوة الأعمدة. يمكنك تعيين قيمة عرض العمود باستخدام أي من وحدات CSS المدعومة يحب مقصف و في ، أو ٪ .
لو عرض العمود تم تعيينه على آلي ، سيقوم المتصفح بحساب عرض كل عمود بناءً على ملف عدد الأعمدة الممتلكات والمساحة المتوفرة داخل التصميم الخاص بك.
على سبيل المثال ، يعلن هذا CSS 3 أعمدة ، يبلغ عرض كل منها 200 بكسل:
.container {
column-count: 3;
column-width: 200px;
}
ال فجوة العمود تحدد الخاصية الفجوة ، أو المسافة ، بين الأعمدة في تخطيط متعدد الأعمدة. سيحدد حجم المساحات الفارغة بين الأعمدة المجاورة ويمكن أن يأخذ قيمة طول بالبكسل أو ems أو أي وحدات أخرى مدعومة.
على سبيل المثال:
.container {
column-count: 3;
column-gap: 20px; /* sets the gap between columns to 20 pixels */
}
بشكل افتراضي ، قيمة فجوة العمود تم تعيينه على طبيعي. يختار المستعرض الخاص بك هذه القيمة لتحقيق تباعد ثابت بين الأعمدة في التخطيط الخاص بك مع الحفاظ على إرضاء بصريًا. يمكن أن تختلف هذه القيمة أيضًا بين المتصفحات وقد تعتمد أيضًا على حجم الخط وارتفاع الخط خاصية الموقع ، وخصائص تخطيط أخرى لمحتوى الأعمدة.
التأكد من توازن الأعمدة
تحاول أعمدة CSS ملء كل المساحة المتاحة داخل التخطيط. يمكن أن ينتج عن هذا أحيانًا أعمدة ذات ارتفاعات مختلفة بشكل كبير ، مما يجعل التخطيط يبدو غير متساوٍ.
لتحقيق التوازن بين الأعمدة ، يجب أن تتأكد من أن كل عمود في التخطيط الخاص بك يحتوي على نفس مقدار المحتوى تقريبًا.
يمكنك تحقيق ذلك عن طريق ضبط CSS ملء العمود الملكية ل توازن . سيحاول المستعرض بعد ذلك توزيع المحتوى بالتساوي عبر جميع الأعمدة بحيث تكون بنفس الارتفاع تقريبًا.
ال ملء العمود تم تعيين الخاصية على توازن بشكل افتراضي ، ولكن قيمة آلي سيغير هذا السلوك. يؤدي استخدام المحتوى تلقائيًا إلى توزيع المحتوى عبر الأعمدة بناءً على المساحة المتاحة. يمكن أن يؤدي هذا إلى مسافات غير متساوية بين الأعمدة وارتفاعات غير متساوية للأعمدة. يمكنه حتى إنتاج تخطيط بأعمدة فارغة.
فيما يلي مثال على كيفية استخدام ملف ملء العمود خاصية لموازنة الأعمدة في تخطيط متعدد الأعمدة:
.multi-column-layout {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}
في هذا المثال ، لدينا تخطيط متعدد الأعمدة بثلاثة أعمدة وفجوة 20 بكسل بين كل عمود. عن طريق تحديد ملء العمود الملكية ل توازن ، نحن نضمن توزيع المحتوى بالتساوي عبر الأعمدة ، مما ينتج عنه ارتفاعات متوازنة للعمود.
من المهم ملاحظة أن ملف ملء العمود قد لا تعمل الخاصية بشكل جيد لجميع التخطيطات وقد تؤدي إلى تباعد غير متساو بين الأعمدة. في مثل هذه الحالات ، قد تحتاج إلى استخدام JavaScript لموازنة الأعمدة يدويًا. تذكر أن تتبع أفضل الممارسات و استخدام التحسين التدريجي حتى لا تعتمد على JavaScript.
كيفية تقليل حجم ملف pdf على نظام التشغيل mac
ضع كل شيء معا
يمكنك الجمع بين كل ما تعلمته حول تنفيذ تخطيط باستخدام أعمدة CSS واستخدامه لإنشاء تخطيط على غرار المجلات.
أولاً ، قم بإنشاء بنية HTML الأساسية. استخدم عنصر الحاوية لالتفاف المحتوى الخاص بك ، ثم قم بإنشاء عدة عناصر فرعية يمكنك بعد ذلك تخطيطها في أعمدة.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSScolumns.css" />
</head>
<body>
<!-- Container Element -->
<div class="magazine-layout">
<!-- Child Elements -->
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
</div>
</body>
</html>
لإنشاء تخطيط على غرار المجلات باستخدام وحدة CSS متعددة الأعمدة ، ادمج ملف عدد الأعمدة و عرض العمود و فجوة العمود ، و ملء العمود ملكيات:
.magazine-layout {
column-count: 3;
column-width: 300px;
column-gap: 20px;
column-fill: balance;
}
.article {
background-color: #f8f8f8;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
break-inside: avoid-column;
}
يعرّف هذا المثال أيضًا ملف اقتحام الداخل الملكية على .شرط فئة بقيمة تجنب العمود . تضمن الخاصية بقاء كل مقالة في عمود واحد ، بدلاً من الانقسام عبر عدة أعمدة. إليك الشكل الذي يجب أن يبدو عليه التنسيق:
استخدام الإجراءات الاحتياطية للمتصفحات غير المدعومة
من المهم ملاحظة أن ملف عدد الأعمدة الخاصية غير مدعومة في جميع المتصفحات. المتصفحات التي لا تدعم عدد الأعمدة ، سيعرض المحتوى في عمود واحد بدلاً من ذلك.
كيف يمكنني رؤية الرسائل المحذوفة في الفيسبوك
لتوفير أنماط احتياطية للمتصفحات غير المدعومة ، يمكنك استخدام استعلامات الميزات مثل @ الدعم للكشف عن دعم عدد الأعمدة الخاصية وتقديم أنماط بديلة عندما لا تكون الخاصية مدعومة.
على سبيل المثال:
.container {
/* Fallback for browsers that do not support column-count */
width: 100%;
}
/* Detect support for column-count */
@supports (column-count: 3) {
.container {
column-count: 3;
}
}
في هذا المثال ، نستخدم الامتداد @ الدعم الاستعلام عن ميزة لاكتشاف دعم عدد الأعمدة ملكية. إذا كان المستعرض يدعم عدد الأعمدة ، فإن ملف حاوية سيتم عرض العنصر في ثلاثة أعمدة. إذا كان المستعرض لا يدعم عدد الأعمدة ، فسيعرض المحتوى في عمود واحد باستخدام عرض ملكية.
تقسيم المحتوى إلى أعمدة
بشكل عام ، توفر أعمدة CSS طريقة عملية وقوية لإنشاء تخطيطات متعددة الأعمدة مرنة وسريعة الاستجابة تعزز قابلية الاستخدام وتجربة المستخدم لمحتوى الويب.
باستخدام أعمدة CSS وجافا سكريبت معًا ، يمكنك إنشاء تخطيطات أكثر تعقيدًا وديناميكية تتكيف مع تفضيلات المستخدم المختلفة وأحجام الأجهزة ، مما يجعل محتوى الويب الخاص بك أكثر سهولة وجاذبية للمستخدمين.