كيف - تخطيط العمود المختلط
تعرف على كيفية إنشاء شبكة تخطيط عمود مختلط باستخدام CSS.
تعرف على كيفية إنشاء تنسيق عمود متجاوب يتنوع بين 4 أعمدة وعمودين وأعمدة كاملة العرض حسب عرض الشاشة.
قم بتغيير حجم نافذة المتصفح لرؤية التأثير سريع الاستجابة:
كيفية إنشاء تخطيط عمود مختلط
الخطوة 1) أضف HTML:
مثال
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
الخطوة 2) أضف CSS:
في هذا المثال ، سننشئ تخطيطًا من أربعة أعمدة يتحول إلى عمودين على شاشات يقل عرضها عن 900 بكسل. ومع ذلك ، على الشاشات التي يقل عرضها عن 600 بكسل ، ستتكدس الأعمدة فوق بعضها البعض بدلاً من أن تطفو بجانب بعضها البعض.
مثال
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout
instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns
stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
نصيحة: انتقل إلى البرنامج التعليمي الخاص بتخطيط موقع ويب CSS لمعرفة المزيد حول تخطيطات مواقع الويب.
نصيحة: انتقل إلى البرنامج التعليمي لتصميم الويب سريع الاستجابة الخاص بـ CSS لمعرفة المزيد حول تصميم الويب سريع الاستجابة والشبكات.