در مقاله قبل در به طور کامل به بررسی Flexbox و CSS Grid پرداختیم. اکنون مهم است که بدانیم استفاده از کدام مورد مناسب تر و کاربردی تر است. در ادامه به مقایسه آنها خواهیم پرداخت.
به دنبال یادگیری و استفاده از CSS Grid برویم یا Flexbox ؟
با داشتن درک کامل از Grid و Flexbox، می توان به سوال اصلی برگردیم. چه زمانی یکی بر دیگری ترجیح داده می شود؟
کریس کویر چند سال پیش اساساً همین سوال را نز در توتیتر پرسید:
برای همه شما که از شبکه CSS و flexbox مطلع هستید، روش مورد علاقه شما برای توضیح تفاوت چیست؟
همانطور که می توانید انتظار داشته باشید ، تعدادی از پاسخ های جالب به دست آمد که اکثر آنها را در زیر عنوان های زیر مرتب کرده ام.
Gird برای صفحه آرایی و Flexbox برای اجزا
“Grid برای طرح بندی صفحه و Flexbox برای اجزا” شاید شهودی ترین پاسخی باشد که می توان به این س giveال داد.
در حقیقت ، من هیچ تردیدی ندارم که هنگام کدگذاری کل صفحه بندی از کدام فناوری استفاده کنم.
شما می توانید طرح بندی صفحه را با Flexbox انجام دهید – و در واقع ، این همان چیزی است که اکثر ما قبل از ورود Grid به صحنه انجام دادیم.
اما ایجاد یک شبکه با flexbox هرگز واقعاً “انعطاف پذیر” نبوده و هرگز بدون چند سردرد به وجود نیامده است.
گرید ، از سوی دیگر ، به سادگی برای این امر متولد شده است. با این حال ، این س remainsال باقی می ماند: آیا فقط برای این به دنیا آمده است؟
به نظر می رسد که Grid هنگام ایجاد اجزایی برای قرار دادن در بخش های کلان و سطح صفحه نیز عالی است.
به عنوان مثال ، در نسخه نمایشی زیر ، فرم یک محفظه شبکه است و عناصر آن با استفاده از ویژگیهای CSS Grid چیده شده است.
HTML :
<form action=”#” class=”form”>
<label class=”form-label” for=”email”>Email: </label>
<input class=”form-input” type=”email” id=”email”>
<label class=”form-label” for=”password”>Password: </label>
<input type=”password” class=”form-input” id=”password”>
<button class=”form-btn”>Sign In</button>
</form>
CSS :
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
background-color: #e5f272;
background-image: url(‘data:image/svg+xml,%3Csvg width=”42″ height=”44″ viewBox=”0 0 42 44″ xmlns=”http://www.w3.org/2000/svg”%3E%3Cg id=”Page-1″ fill=”none” fill-rule=”evenodd”%3E%3Cg id=”brick-wall” fill=”%239C92AC” fill-opacity=”0.4″%3E%3Cpath d=”M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z”/%3E%3C/g%3E%3C/g%3E%3C/svg%3E’);
}
.form {
background-color: #eb4034;
padding: 2rem;
border-radius: 10px;
}
.form-label {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
display: block;
margin-bottom: 0.3rem;
}
.form-input {
padding: 0.3rem;
grid-row: auto;
margin-bottom: 1rem;
}
.form-btn {
padding: 0.5rem 1rem;
background-color: #d9e007;
border: none;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
transition: background-color 0.3s;
width: 100%;
margin-top: 1rem;
}
.form-btn:hover,
.form-btn:focus {
background-color: #a8ad05;
}
@media (min-width: 400px) {
.form {
/* grid */
display: grid;
grid-template-columns: auto 1fr;
gap: 2rem;
align-items: center;
}
.form-label {
margin-bottom: 0;
}
.form-input {
margin-bottom: 0;
}
.form-btn {
grid-column: span 2;
width: auto;
margin-top: 0;
}
}
خروجی :
علیرغم این واقعیت که برچسب های ایمیل و رمز عبور دارای طول های متفاوتی هستند ، فیلدهای فرم کاملاً به صورت افقی و عمودی قرار می گیرند.و این جادوی گرید است:
عنصر وب را به صورت افقی و عمودی ، به طور پیش فرض ، عناصر سطح صفحه یا عناصر سطح جزء ، قرار می دهد.
این ویژگی که Grid دارد یک عامل قدرتمند در تصمیم گیری در مورد زمان استفاده از Flexbox یا Grid است.
طرح بندی دو بعدی در مقابل یک بعدی
همانطور که راشل اندرو در موضوع توییتر اشاره شده در بالا توضیح می دهد:
Flexbox برای چیدمان یک بعدی است. یک ردیف یا یک ستون. Grid برای چیدمان دو بعدی است. سطر و ستون.
طرح بندی های سطح صفحه و همچنین اجزای داخلی ممکن است به ساختار شبکه ای نیاز داشته باشند.
این امر تا حدی مهم است که به یک قاعده کلی اصولی اشاره می کند که هنگام تصمیم گیری در مورد زمان استفاده از آن ، مورد استفاده قرار می گیرد.
اگر طرح شما نیاز به مواردی در شبکه دارد تا در ستون ها و سطرها قرار بگیرند ، Grid نه تنها برای این کار مناسب است ، بلکه تنها ابزاری است که به طور پیش فرض این کار را انجام می دهد.
از طرف دیگر ، اگر می خواهید اقلام فقط طوری جمع شوند که هر خط از نظر طول و تراز مستقل از خطوط دیگر باشد ، Flexbox بهترین دوست شما است ، فقط به این دلیل که به طور پیش فرض این کار را انجام می دهد.
همانطور که جن سیمونز در همان موضوع توییتر روشن می کند:
Grid ستون ها و سطرهای واقعی را ایجاد می کند. مطابق خواسته شما ، محتوا از یکی به دیگری تنظیم می شود. Flexbox ندارد. نه تنها در بعد دوم (که صحبت کردن درباره آن آسان است) ، بلکه در بعد اول نیز.
وقتی پنجره مرورگر خود را کوچک می کنید ، تفاوت طرح بندی های مبتنی بر Flexbox و Grid را در زیر بررسی کنید:
HTML :
<h1 class=”page-title”>Grid</h1>
<container class=”grid”>
<div class=”grid-item”>🍏</div>
<div class=”grid-item”>🍏</div>
<div class=”grid-item”>🍏</div>
<div class=”grid-item”>🍏</div>
<div class=”grid-item”>🍏</div>
<div class=”grid-item”>🍏</div>
<div class=”grid-item”>🍏🍏</div>
<div class=”grid-item”>🍏🍏</div>
</container>
<h1 class=”page-title”>Flexbox</h1>
<container class=”flexbox”>
<div class=”flex-item”>🍎</div>
<div class=”flex-item”>🍎</div>
<div class=”flex-item”>🍎</div>
<div class=”flex-item”>🍎</div>
<div class=”flex-item”>🍎</div>
<div class=”flex-item”>🍎</div>
<div class=”flex-item”>🍎🍎</div>
<div class=”flex-item”>🍎🍎</div>
</container>
CSS :
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
height: 100vh;
font-size: 2rem;
}
.page-title {
font-size: 2rem;
text-align: center;
}
.grid, .flexbox {
max-width: 960px;
margin: 2rem auto;
}
.grid-item, .flex-item {
padding: 1rem;
background-color: lightpink;
outline: 2px solid coral;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
margin-bottom: 60px;
text-align: center;
gap: 10px;
}
خروجی :
با کوچک شدن ظرف ، موارد شبکه کاملاً تراز می شوند ، در حالی که اقلام Flexbox بر اساس فضای موجود ابعاد و تراز خود را نسبت به یکدیگر انعطاف می دهند.
با این حال ، این بدان معنا نیست که نمی توانید با استفاده از Flexbox یک شبکه ایجاد کنید یا اینکه نمی توانید اقلام Grid خود را با طول های مختلف داشته باشید.
این بدان معناست که شما باید برخی از کد های اضافی را بنویسید تا Flexbox به عنوان یک شبکه رفتار کند و باید هر یک از موارد Grid را به صورت جداگانه قرار دهید تا به نوع طرح بندی انعطاف پذیر که در بالا می بینید برسید.
با این وجود ، انجام این کار فقط ظاهر یک نوع Flexbox را به شما می دهد ، اما مطمئناً رفتار ذاتی آن را نشان نمی دهد.
در پایان ، اگر نمی خواهید ردیف ها در یک خط قرار بگیرند ، حتماً با Flexbox بروید.
اما آیا این نتیجه می گیرد که Grid فقط در ساخت طرح های دو بعدی خوب است؟ لازم نیست. کریس کویر در مشارکت خود در موضوع توییتر خود به این نکته اشاره می کند:
من بزرگترین طرفدار تفاوت 1D در مقابل 2D شبکه و flexbox نیستم ، فقط به این دلیل که بیشتر استفاده روزانه من از شبکه 1D است و برای این عالی است.
شاید ، یک روش جایگزین برای بیان یک قاعده کلی که می تواند در انتخاب بین Flexbox و Grid مفید باشد این باشد که بگوییم Flexbox از محتوا به بیرون کار می کند ، در حالی که Grid از طرح داخلی استفاده می کند. بیایید این ایده را کمی دقیق تر نگاه کنیم.
