چگونه ایجاد می‌شود: لایاوت ستون ترکیبی

چگونه یک لایاوت ستون ترکیبی ایجاد کنیم

مرحله اول - اضافه کردن 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