چگونه ایجاد می‌شود: قالب‌بندی ستون‌های مخلوط

چگونه یک قالب‌بندی ستون‌های مخلوط ایجاد می‌کنیم

مرحله اول - اضافه کردن HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

مرحله دوم - اضافه کردن CSS:

در این مثال، ما یک قالب‌بندی چهار ستونی ایجاد خواهیم کرد که در صفحه‌هایی با عرض کمتر از 900 پیکسل به دو ستون تبدیل می‌شود. اما در صفحه‌هایی با عرض کمتر از 600 پیکسل، ستون‌ها به جای قرار گرفتن به صورت هم‌زمان، به صورت پشته‌ای قرار می‌گیرند.

/* ایجاد چهار ستون یکسان، تا با هم شناور شوند */
.column {
  float: left;
  width: 25%;
}
/* پاک کردن شناور */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* قالب‌بندی پاسخگو - از چهار ستون به دو ستون تغییر می‌کند */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* قالب‌بندی پاسخگو - دو ستون را به جای هم‌زمان قرار می‌دهد */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

تست شخصی بکنید

صفحات مرتبط

آموزش:طرح وب‌سایت CSS

آموزش:طراحی وب‌سایت پاسخ‌گو CSS