گرید CSS در برابر Flexbox - از کدام استفاده کنم؟

چهارشنبه ۲۷ تیر ۹۷ توسط محمدسینا مرادی

چند روز پیش مقاله ای در مورد سیستم گرید CSS خواندم. به نظر می رسید آن مقاله بیشتر ما را برای ساختن گرید ها با Flexbox راهنمایی می کرد و فقط خوبی هایش را برای من مفهوم کرد. اما به عنوان یک توسعه دهنده واقعا شما هیچ وقت نمی دانید که کدام کاربردی تر هستند تا شما از آن استفاده کنید. اما من می خواهم کاری مهم را انجام دهم! من قصد دارم تا دو طراحی پایه را بسازم که یکی از آنها از FLexbox و دیگری از سیستم گرید استفاده می کند.

تصویر زیر چیزی است که ما می خواهیم بسازیم.

 

استفاده از Flexbox برای ساخت لایه ها در واقع برای فهمیدن مفهوم آن سر راست است. در واقع Flexbox فقط کمک می کند تا دو آیتم را کنار یک دیگر قرار دهید این بدان معنا است که همه المنت های کودک را در “pseudo-inline-elements” وارد می کند (فقط کمی مدت آن بالا است) و همچنین به این معنی نیز است که شما باید درباره قرار دادن المنت های HTML بیشتر فکر کنید. هر div-Element ای به یک ردیف تبدیل می شود که در container ای که از Flexbox استفاده می کند وارد می شود. من با لایه پایه ام و کد آن کارم را به پایان می رسانم.

کد زیر مربوط به HTML می باشد:

// HTML Structure 
<body>
    <header class="box">Header Content</header>
    <div class="flex Container">
        <div class="contentContainer">
            <div class="mainContainer flex">
                <main class="box">Main Content</main>
                <section class="box">Main Content</section>
            </div>
            <footer class="box">Footer Content</footer>
        </div>
        <sidebar class="box">Sidebar Content</sidebar>
    </div>
</body>

کد زیر مربوط به CSS می باشد:

// CSS

html {
    background: darkred;
    font-family: 'Avenir'
}

footer, header {
    height: 26vh;
}

.box {
    color: darkred;
    background: rgb(233, 233, 233);
    text-align: center;
    padding: 2em 1em;
    margin: 5px;
}

.mainContainer {
    height: 26vh;
}

.flex {
    display: flex;
}

.contentContainer {
    flex: 2;
}

sidebar {
    flex: 1;
    height: 52vh;
}

.flex > main, section {
    flex: 1;
}

حالا بیایید نگاهی به Grid-approach داشته باشیم.

CSS Grid Layout قدرتمند ترین سیستم موجود در CSS می باشد. این سیستم 2 بعدی است، به این معنی که می تواند هر دو ستون و ردیف را بر خلاف Flexbox که یک سیستم 1 بعدی است، اداره نماید. | خانه  Chris 

خانه Chris مهم ترین تفاوت را به خوبی نشان می دهد.(مقاله کامل: https://css-tricks.com/snippets/css/complete-guide-grid/) ما می توانیم لایه های دو-بعدی را با استفاده از Grid بسازیم!

با دانستن اینکه، می توان در ساختار HTML کمتر تمرکز داشت، من مستقیما می توانم به CSS گام بردارم و تصمیم بگیرم که چگونه باید باشد. به طور کلی شما قالب ردیف ها و قالب ستون ها را تنظیم می کنید و به آنها عرض و ارتفاع می دهید. به علاوه می توانید تصمیم بگیرید چه ستونی در ردیف المنت ها باید شروع و پایان یابد. با این حال من با تجربه هایم یک سوپر متد را در CSS-Grid مشاهده کردم که آن از Grid-Areas استفاده می کند. یکی از نام های اساسی کلاس CSS و ساخت مستقیم قالب با آن نام ها است. کد زیر را مشاهده کنید:

کد زیر مربوط به HTML می باشد:

// HTML Structure 
<body>
    <div class="gridContainer">
        <header class="box">Header Content</header>
        <main class="box">Main Content</main>
        <section class="box">Main Content</section>
        <sidebar class="box">Sidebar Content</sidebar>
        <footer class="box">Footer Content</footer>
    </div>
</body>

 کد زیر مربوط به CSS می باشد:

// CSS

html {
    background: darkred;
    font-family: 'Avenir'
}

.gridContainer {
    display: grid;
    grid-gap: 5px;

/* we set up a string for each row in the Layout. Every row has to have as many values as the row with the most elements has - in this case row 2 */

    grid-template-areas: 
        'header header header' 
        'main section sidebar' 
        'footer footer sidebar';
    grid-template-rows: 32vh 32vh 32vh;
}

header { grid-area: header; }
main { grid-area: main; color: white;}
footer { grid-area: footer; color: white;}
sidebar { grid-area: sidebar; color: white}
section { grid-area: section; color: white}

.box {
    color: darkred;
    background: rgb(233, 233, 233);
    text-align: center;
    padding: 2em 1em;
}

ما باید هر placeholder را برای هر ردیف تعریف و تنظیم کنیم که این المنت ها چه مقدار فضایی باید در کنار دیگر المنت ها به صورت نسبی بگیرند. حالا بیایید آنها را در دموی من، گرید زیبای Et voilà ذخیره کنیم.

نتیجه

حالا از کدام یک استفاده می کنید؟!

خب پاسخ این سوال کاملا به چیزی بستگی دارد که شما در حال ساخت آن هستید. من در این مقاله نگفتم سیستم های گرید بالای لایه های Flexbox قرار دارند، ولی آنها شاید (اگر با ایده آشنا هستید) سریع تر برای استفاده باشند و به شما کمک کنند لایه را با المنت والد force کنید و همچنین آن به ساختار HTML وابسته نیست. این وقتی به بازی می آید که شما با داده های داینامیک یا پویا سر و کار داشته باشید. با این وجود، هر دوی آنها به شما اجازه می دهند که از ویژگی های CSS مانند align-items و justify-content  که فقط برای المنت های تکی مفید و کاربردی هستند استفاده نمایید، احتمالا Flexbox گزینه بهتری برای این ایده ها باشد.

از اینکه این مقاله را مطالعه نمودید متشکرم، اگر از آن خوشتان آمده است برایم یک قلب به جای بگذارید!

در ضمن، دمو و سورس پروژه هر دوی این کار هایی که با هم انجام دادیم در گیت هاب در این لینک موجود هستند و می توانید از آنها استفاده کنید.


کلیدواژه: مقایسه CSS Grid Flexbox

منابع: codeburst.io

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.
مولف:
محمدسینا مرادی
عضو تیم تولید محتوای آرکادمی
مشاهده‌ی پروفایل
آمار و مشخصات:
event
دوشنبه ۲۶ شهریور ۹۷
public
arcademy.ir/+a302
favorite
۰ پسند
comment
۰ دیدگاه
group
۲۱۸ بازدیدکننده
visibility
۳۴۴ بازدید
مقالات پشینهادی:
رده های این مقاله: