نحوه ایجاد یک Flexbox Grid واکنشگرا

با ایجاد Flexbox Grid واکنشگرا در CSS، می‌توانید از آن در هر پروژه‌ وبی استفاده کنید. با لیداوب همراه باشید تا چگونگی ایجاد آن را فرا بگیرید.


در این grid می‌خواهیم سه نقطه بریک پوینت s ، m و l داشته باشیم و هر چه بالاتر از l باشد از ستون‌های اولیه استفاده می‌کنند که هیچ پیشوندی ندارند مانند col-12 . اولین کاری که باید انجام دهیم این است که آن را در _var.less قرار دهیم تا هر کسی بتواند آن را مطابق با پروژه خود تغییر دهد:

// _vars.less

@s:~"only screen and (max-width: 480px)"; // Small Phones
@m:~"only screen and (max-width: 768px)"; // Normal Phones
@l:~"only screen and (max-width: 1024px)"; // Tablets

آنچه مشاهده می‌کنید تمام نقاط بریک پوینتی است که فکر می‌کنم برای موبایل نیاز خواهید داشت. اگر فکر می‌کنید موارد دیگری هم لازم است به آن اضافه کرده و نامی که می‌خواهید روی آن قرار دهید.

ایجاد Loop

ما قبلا یک loop برای نقاط بریک پوینت غیر واکنشگرای خود ایجاد کرده‌ایم که به این شکل است:

//_loops.less

// Loop for normal cols
.generateCols(@counter) when (@counter > 0) {
  @width: (@counter / @cols ) * 100;
  [email protected]{counter} {
    flex-basis: ~"@{width}%";
    max-width: ~"@{width}%";
  }

  [email protected]{counter} {
    margin-left: ~"@{width}%";
  }
  .generateCols(@counter - 1));
}

اگر به کدها نگاه کنید، می‌بینید که در این مورد، loop یک آرگومان پذیرفته و آن هم شماره ستون است. این برای grid‌هایی که واکنشگرا نیستند، فوق العاده است اما وقتی می‌خواهید نقاط بریک پوینت را ایجاد کنید به آن‌ها برای ایجاد کلاس‌های همنام با نقاط بریک پوینت نیاز خواهید داشت. بنابراین، ما باید یک loop جدید در _loop.less ایجاد کنیم که ستون‌های واکنشگرای ما را به وجود می‌آورند:

_loops.less

// Create the responsive loops that also takes the media as an argument
// this media is our breakpoints
.generateResponsiveCols(@counter, @media) when (@counter > 0) {
     // In here we define the width 
    // and this will be the number of the column we are in divided by the number of columns we have.
    // Imagine this is column 6 and this will give us 0.5 and if multiply it by 100 we will get 50%
    @width: (@counter / @cols ) * 100;

    // we used to only have [email protected]{counter} but now that we added the media param
    // we insert it here so that it creates classses like .col-s-10 and we can use this in our grid
    [email protected]{media}[email protected]{counter} {
        flex-basis: ~"@{width}%";
        max-width: ~"@{width}%";
    }

    // Create our resposnive offset classes
    [email protected]{media}[email protected]{counter} {
        margin-left: ~"@{width}%";
    }
    // Decrease the counter by one so we don't have an infinite loop
    // and also pass it the media so that it generates the next loop
    .generateResponsiveCols((@counter - 1), @media);
}

حالا ما loopها را ایجاد کردیم و آن‌ها تمام کلا‌سهای مورد نظر ما را ایجاد خواهند کرد اما ما هنوز نیاز به فراخوانی این loopها داریم تا کلاس‌هایی که لازم داریم را ایجاد کنند. بنابراین ، به _grid.less رفته و تمام مدیا کوئری‌های مورد نیاز خود را ایجاد کرده و درون هر یک از آن‌ها میکسین generateResponsiveCols را فراخوانی کرده و تعداد ستون‌ها و نقاط بریک پوینت فعلی خود را به آن اضافه می‌کنیم:

 _grid.less

  .row,
  .column {
    ...

    @media @l {
        // Call our large columns
        .generateResponsiveCols(@cols, l);
    }

    @media @m {
        // Call our medium columns
        .generateResponsiveCols(@cols, m);
    }

    @media @s {
        // Call our small columns
        .generateResponsiveCols(@cols, s);
     }
}

حالا اگر gulp less را در کنسول خود اجرا کرده و HTML خود را باز کنیم باید ستون‌های واکنشگرا را مشاهده کنیم. اگر صفحه را تغییر اندازه دهید، خواهید دید که ستون‌ها بر اساس نقاط برک پوینتی که روی مرورگر مشاهده می‌کنید، رفتار می‌کنند.

نمای گوشی:

ایجاد یک Flexbox Grid واکنشگرا

نمای پرتره آیپد:

ایجاد یک Flexbox Grid واکنشگرا

نمای گسترده آیپد:

ایجاد یک Flexbox Grid واکنشگرا

مشاهده کردید که کلاس‌های واکنشگرا به خوبی کار می‌کنند اما هنوز یک کار را انجام نداده‌ایم که یک بخش مهم در هر grid واکنشگرا می‌باشد و آن هم توانایی پنهان کردن ستون‌ها با توجه به اندازه صفحه می‌باشد و همانطور که در نمای گوشی مشاهده می‌کنید، این اتفاق هنوز رخ نداده است و باید آن را اضافه کرد. برای ساده‌تر کردن، ما کلاس‌های col-s-hidden ، col-m-hidden ، col-1-hidden و col-hidden را برای پوشش نام ستون‌ها و نقاط برک پوینت، فراخوانی می‌کنیم. افزودن این کلاس‌ها نسبتا ساده است چون تمام کاری که باید انجام دهیم مخفی کردن ستون‌های مورد نظر در نقطه برک پوینت صحیح است. کد زیر بهتر می‌تواند این موضوع را توضیح دهد:

    // grid.less

    @media @l {
        .generateResponsiveCols(@cols, l);

        // hide any element that has the class col-l-hidden
        .col-l-hidden {
            display: none;
        }

        // show all the other hidden elements that were meant for other breakpoints
        .col-s-hidden,
        .col-m-hidden,
        .col-hidden {
            display: block;
        }
    }

کاری که ما انجام می‌دهیم، مخفی کردن ستونی است که با نقطه برک پوینت همخوانی دارد و نمایش بقیه ستون‌ها زیرا آن‌ها با نقطه برک پوینت همخوانی ندارند. حالا که دیدیم چگونه این کلاسٰ‌ها افزوده میشوند، همین کار را برای سایر نقاط برک پوینت نیز انجام می‌دهیم:

// grid.less

  .row,
  .column {
     ....

    // Aply hidden classes to the "primary" columns
    .col-s-hidden,
    .col-m-hidden,
    .col-l-hidden {
        display: block;
    }

    .col-hidden {
        display: none;
    }

    // add hidden classes to our l breakpoint
    @media @l {
        .generateResponsiveCols(@cols, l);

        .col-s-hidden,
        .col-m-hidden,
        .col-hidden {
            display: block;
        }

        .col-l-hidden {
            display: none;
        }
    }

    // add hidden classes to our m breakpoint
    @media @m {
        .generateResponsiveCols(@cols, m);

        .col-s-hidden,
        .col-l-hidden,
        .col-hidden {
            display: block;
        }

        .col-m-hidden {
            display: none;
        }
    }

    // add hidden classes to our s breakpoint
    @media @s {
        .generateResponsiveCols(@cols, s);

        .col-m-hidden,
        .col-l-hidden,
        .col-hidden {
            display: block;
        }

        .col-s-hidden {
            display: none;
        }
    }
}

حالا اگر index.html در یک صفحه نمایش کوچک دوباره بارگذاری شود، چیزی مانند این را خواهید دید:

ایجاد یک Flexbox Grid واکنشگرا

افزودن کلاس های Helper

منظور از کلاس‌های Helper هر چیزی است که به انطباق عناصر بر طبق روشی که ما می‌خواهم آن‌ها را در کانتینر ببینم، کمک می‌کند. با flex می‌توانیم این کار را به آسانی با به کار بردن align-items و justify-content انجام دهیم. بنابراین، بیایید کمی همترازی افقی به grid خود اضافه کنیم:

// grid.less

.container {
....
    .justify-center {
        justify-content: center;
    }

    .justify-end {
        justify-content: flex-end;
    }

    .justify-start {
        justify-content: flex-start;
    }

    .justify-around {
        justify-content: space-around;
    }

    .justify-between {
        justify-content: space-between;
    }
}

اگر بخواهید یکی از این کلاس‌ها را به ستون‌ها اضافه کنید، خواهید دید که این روش کار می‌کند اما مشکل این است که اگر بخواهید آن را برای مثال به ul اضافه کنید، هیچ اتفاقی نمی‌افتد چون ul یک کانتینر فلکس نیست. ما باید همیشه عناصری را استفاده کنیم که دارای کلاسی هستند که شامل justify- برای display: flex بوده تا کاری مانند این کار انجام دهید:

// grid.less

[class*="justify-"] {
    display: flex;
}

حالا ما کلاس‌های justify شده و در حال کار را برای تمام موردهای همترازی افقی داریم. شاید از خودتان بپرسید پس کلاس‌های همترازی عمودی کجا هستند، برای ایجاد آن کلاس‌ها باید کد زیر را داشته باشیم:

// grid.less

.container {
....
    [class*="items-"] {
        display: flex;
    }

    .items-center {
        align-items: center;
    }

    .items-start {
        align-items: flex-start;
    }

    .items-end {
        align-items: flex-end;
    }

    .items-stretch {
        align-items: stretch;
    }
}

به همین راحتی، کلاس‌های helper ما هم آماده شد تا به grid اضافه شده و به ما در همخوانی عناصر کمک کند. اگر کلاس‌های دیگری برای بهبود grid خود لازم دارید مانند حاشیه یا لایی گذاری، می‌توانید آن‌ها را نیز در این فایل ایجاد کنید.

مطالعه مقالات بیشتر در لیداوب:

سایر مقالات ما در زمینه‌های برنامه‌نویسی، css و html شما را به سمت حرفه‌ای شدن در طراحی وب می‌برد. با ما در لیداوب همراه باشید.