فلکس باکس یا گرید! مسئله این است. اگر تخصص شما در حوزه طراحی وب و برنامه نویسی سمت کاربر است، مطمئنا انتخاب بین Flexbox و Grid یکی از سوال‌های اصلی شما خواهد بود. در جواب سوال Flexbox یا Grid بهتر است بدانید که هر کدام از آن‌ها در محل خود کاربرد اختصاصی دارند و به همین دلیل است که نمی‌توان فلکس باکس و ماژول گرید را به کلی کنار گذاشت یا یکی از آن‌ها را برتر از دیگری به حساب آورد.
معرفی گرید
گرید چیست؟ برای معرفی گرید بهتر است معنی این لغت را بدانید. Grid در ساختار CSS به معنی شبکه یا شبکه بندی است که در یک صفحه HTML برای ارائه محتوا یا متمایز کردن مطالب به کار می‌رود و شما با استفاده از ماژول Grid می‌توانید یک بخش از صفحه را به صورت شبکه‌ای به قسمت‌های مختلف تقسیم بندی کنید.
دقت داشته باشید که شبکه بندی و بخش بندی در گرید هم به صورت ردیفی و هم به صورت ستونی قابل اعمال و تنظیم است. بنابراین، در مقایسه Flexbox و Grid شما در استفاده از گرید شرایط بهتری را در اختیار دارید تا به صورت‌های مختلف یک بخش از صفحه را شبکه بندی کنید. امکان دادن استایل‌های مختلف و اعمال تنظیمات در ساختار گرید به راحتی امکان پذیر است و این قابلیتی عالی از سی‌اس‌اس است که امکان تخصیص ردیف‌ها و ستون‌های مختلف را در یک بخش از صفحه فراهم خواهد کرد.
آموزش پیشنهادی
استفاده از Flexbox و Grid به بهتر کردن تجربه کاربری در یک وب سایت کمک خواهد کرد و شما در وب بروزرهای مختلف می‌توانید کارکرد مناسب و بهینه‌ای را از این مزیت CSS مشاهده کنید. در صورتی که نیاز باشد تا رنگ بکگراند، فاصله بین سلول‌ها و اندازه آن‌ها را تنظیم کنید، این کار به راحتی با تنظیمات CSS امکان پذیر خواهد بود و این قابلیت تمامی تنظیمات را برای رسیدن به نتیجه دلخواه در اختیار شما قرار می‌دهد.
معرفی فلکس باکس
برای معرفی flexbox بهتر است با کاربرد آن آشنا شوید. Flexbox و Grid هر دو ماژول‌های Layout هستند که از فلکس باکس برای ایجاد شبکه‌های خطی ریسپانسیو استفاده می‌شود. این ماژول توسط اکثر وب بروزرها مانند کروم و فایرفاکس پشتیبانی می‌شود و با استفاده از آن بدون هیچ اتلاف زمان می‌توان یک مدل ریسپانسیو را از سلول‌های کنار هم طراحی و مستقر کرد.
با استفاده از فلکس باکس هم شما کنترل عالی روی سلول‌ها و نحوه قرارگیری آن‌ها دارید و پس از ایجاد بخش مورد نظر در HTML می‌توانید تنظیمات آن را در ساختار CSS مورد نظر اعمال کنید. امکان اعمال کدهای رنگی مختلف، تنظیم فاصله‌ها و اندازه سلول‌ها وجود دارد و در بخش CSS تنظیمات قرارگیری اختصاصی برای فلکس باکس در نظر گرفته شده است. برای نمونه، شما می‌توانید سلول‌ها را به صورتی تنظیم کنید که به صورت Center قرار گیرند یا پس از قرارگیری آن‌ها فاصله مشخصی بین هر کدام وجود داشته باشد.
آموزش پیشنهادی
مزایا و معایب فلکس باکس و گرید
پس از معرفی این دو قابلیت، بهتر است در مورد مزایا و معایب فلکس باکس و گرید هم اطلاعاتی را به دست آورید.
همانطور که در وبسایت tutsplus ذکر شده است، مزیت مهم فلکس باکس مناسب بودن آن برای چیدمان عناصر در یک ردیف یا در یک ستون است. زمانی که شما مطمئن هستید عناصر در یک ستون یا در یک ردیف قرار خواهند گرفت، بهترین گزینه فلکس باکس است که در این مورد قدرت بیشتری را ارائه می‌دهد.
با این حال، گرید در مواردی به کار می‌رود که عناصر به صورت چند ردیفه یا چند ستونه قرار است در کنار هم قرار گیرند و در این کاربرد بهترین قابلیت‌ها را ارائه خواهد داد. سرعت گرید در مقایسه با فلکس باکس بهتر است و این قابلیت به طراحان و برنامه نویسان امکان سریع طی کردن مراحل طراحی را خواهد داد.
در صورتی که سریع بودن، آسان بودن و کارایی بهتر برایتان اهمیت دارد و می‌توانید از گرید در کاربرد مورد نظر استفاده کنید، اصلا نباید در مورد استفاده از آن تردید کنید.
مقایسه یک کد در گرید و فلکس باکس
برای مقایسه یک کد در گرید و فلکس باکس بهتر است ابتدا از گرید شروع کنیم که در آن به صورت پشت سر هم می‌توان عناصری را کنار هم مرتب کرد.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #E491E3;
padding: 20px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 30px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
با ذخیره این کد در یک فایل html و اجرای آن توسط مرورگر به خروجی زیر در صفحه مورد نظر خواهید رسید.
در کنار گرید، فلکس باکس نیز شرایطی را برای شما فراهم خواهد کرد تا بتوانید عناصر مورد نظر را در یک ردیف مرتب کنید و این مرتب کردن به صورت واکنش گرا در مرورگر قابل مشاهده است.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: rgba(200, 200, 200, 200);
border: 1px solid rgba(0, 0, 0, 0.8);
}
.flex-container > div {
background-color: #E491E3;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>در صورت اجرای این کد در مرورگر می‌توانید خروجی زیر را در آن مشاهده کنید.
هر کدام برای چه کاری بهتر است؟
در حالت کلی بهتر است بدانید که عملکرد گرید دو بعدی است و به همین دلیل امکان چیدن عناصر با دست باز با استفاده از گرید امکان پذیر است. در مورد فلکس باکس، این چیدمان تک بعدی است و عناصر در آن در یک راستا طبقه بندی می‌شوند.
البته، دقت داشته باشید که در یک پروژه طراحی وب مطمئنا به هر دو این قابلیت‌ها نیاز است و نمی‌توان یکی از آن‌ها را به کلی کنار گذاشت.
نتیجه گیری
انتخاب بین فلکس باکس یا گرید بسته به شرایط و نیازها است و شما با توجه به محتوای وب و صفحه طراحی شده باید یکی از آن‌ها یا هر دو را انتخاب کرده و استفاده کنید. قابلیت انجام همپوشانی عناصر در گرید آسان‌تر است و گرید مزایای بسیار عالی را در اختیار طراح قرار می‌دهد تا شبکه‌هایی اختصاصی از عناصر در یک صفحه HTML به وجود آورد. در صورتی که در به کار بردن و گرفتن خروجی از گرید و فلکس باکس سوالی داشته باشید، می‌توانید در ادامه مطلب آن را مطرح کنید.
سوالات و پیشنهادات خود را به صورت دیدگاه مطرح کنید
ارسال دیدگاه