ده طرح بندی مدرن در یک خط CSS

این پست چند خط قدرتمند از CSS را برجسته می‌کند که کارهای سنگین را انجام می‌دهند و به شما کمک می‌کنند طرح‌بندی‌های مدرن قوی بسازید.

Una Kravets

طرح‌بندی‌های مدرن CSS به توسعه‌دهندگان این امکان را می‌دهد که قوانین سبک واقعاً معنی‌دار و قوی را تنها با چند ضربه کلید بنویسند. گفتگوی بالا و این پست بعدی 10 خط قدرتمند CSS را بررسی می کند که کارهای سنگین را انجام می دهند.

برای دنبال کردن یا بازی با این دموها به تنهایی، جاسازی Glitch در بالا را بررسی کنید یا از 1linelayouts.glitch.me دیدن کنید.

01. Super Centered: place-items: center

برای اولین طرح "تک خطی"، بیایید بزرگترین رمز و راز در تمام سرزمین CSS را حل کنیم: متمرکز کردن چیزها. می‌خواهم بدانید که با place-items: center .

ابتدا grid به عنوان روش display مشخص کنید و سپس place-items: center همان عنصر بنویسید. place-items کوتاه نویسی برای تنظیم هم align-items و justify-items به طور همزمان است. با تنظیم آن در center ، هم align-items و هم justify-items در center قرار می گیرند.

.parent {
  display: grid;
  place-items: center;
}

این امکان را فراهم می کند تا محتوا بدون توجه به اندازه ذاتی، کاملاً در مرکز اصلی قرار گیرد.

02. Pancake Deconstructed: flex: <grow> <shrink> <baseWidth>

بعد ما پنکیک تخریب شده داریم! به عنوان مثال، این یک طرح بندی رایج برای سایت های بازاریابی است که ممکن است دارای یک ردیف از 3 مورد باشد که معمولاً دارای یک تصویر، عنوان و سپس مقداری متن است که برخی از ویژگی های یک محصول را توصیف می کند. در تلفن همراه، می‌خواهیم آن‌ها به خوبی روی هم چیده شوند و با افزایش اندازه صفحه نمایش، گسترش پیدا کنند.

با استفاده از Flexbox برای این افکت، برای تنظیم محل قرارگیری این عناصر در هنگام تغییر اندازه صفحه، نیازی به درخواست رسانه ندارید.

مخفف flex مخفف: flex: <flex-grow> <flex-shrink> <flex-basis> .

به همین دلیل، اگر می‌خواهید جعبه‌های شما به اندازه <flex-basis> خود پر شوند، در اندازه‌های کوچک‌تر کوچک شوند، اما برای پر کردن فضای اضافی کشیده نشوند، بنویسید: flex: 0 1 <flex-basis> . در این مورد، <flex-basis> شما 150px است، بنابراین به نظر می رسد:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

اگر می‌خواهید که جعبه‌ها در خط بعدی کشیده شوند و فضا را پر کنند، <flex-grow> را روی 1 تنظیم کنید، به این صورت که:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

اکنون، با افزایش یا کاهش اندازه صفحه، این موارد انعطاف پذیر هم کوچک می شوند و هم رشد می کنند.

03. نوار کناری می گوید: grid-template-columns: minmax(<min>, <max>) …)

این نسخه ی نمایشی از تابع minmax برای طرح بندی شبکه بهره می برد. کاری که ما در اینجا انجام می‌دهیم این است که حداقل اندازه نوار کناری را 150px تعیین می‌کنیم، اما در صفحه‌های بزرگ‌تر، اجازه می‌دهیم تا 25% افزایش یابد. نوار کناری همیشه 25% از فضای افقی والد خود را اشغال می کند تا زمانی که این 25% کوچکتر از 150px شود.

این را به عنوان مقدار grid-template-columns با مقدار زیر اضافه کنید: minmax(150px, 25%) 1fr . آیتم در ستون اول (نوار کناری در این مورد) minmax 150px در 25% دریافت می کند، و مورد دوم (بخش main در اینجا) بقیه فضا را به عنوان یک تراک 1fr اشغال می کند.

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. پشته پنکیک: grid-template-rows: auto 1fr auto

بر خلاف Deconstructed Pancake، این مثال وقتی اندازه صفحه نمایش تغییر می کند، فرزندان خود را نمی پوشاند. این طرح‌بندی که معمولاً به عنوان پاورقی چسبنده نامیده می‌شود، اغلب برای وب‌سایت‌ها و برنامه‌ها، در میان برنامه‌های تلفن همراه (پانویس معمولاً یک نوار ابزار است) و وب‌سایت‌ها (برنامه‌های یک صفحه اغلب از این طرح‌بندی کلی استفاده می‌کنند) استفاده می‌شود.

افزودن display: grid به کامپوننت به شما یک شبکه تک ستونی می‌دهد، با این حال ناحیه اصلی فقط به اندازه محتوا با پاورقی در زیر آن خواهد بود.

برای چسباندن پاورقی به پایین، اضافه کنید:

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

این امر محتوای سرصفحه و پاورقی را طوری تنظیم می‌کند که به‌طور خودکار اندازه فرزندان خود را بگیرد، و فضای باقی‌مانده ( 1fr ) را در ناحیه اصلی اعمال می‌کند، در حالی که ردیف با اندازه auto اندازه حداقل محتوای فرزندان خود را می‌گیرد. اندازه افزایش می یابد، خود ردیف رشد می کند تا تنظیم شود.

05. چیدمان جام مقدس کلاسیک: grid-template: auto 1fr auto / auto 1fr auto

برای این طرح جام مقدس کلاسیک، سرصفحه، پاورقی، نوار کناری سمت چپ، نوار کناری سمت راست و محتوای اصلی وجود دارد. این شبیه به طرح قبلی است، اما اکنون با نوارهای کناری!

برای نوشتن کل این شبکه با استفاده از یک خط کد، از ویژگی grid-template استفاده کنید. این به شما امکان می دهد تا ردیف ها و ستون ها را همزمان تنظیم کنید.

جفت ویژگی و مقدار عبارتند از: grid-template: auto 1fr auto / auto 1fr auto . اسلش بین لیست های اول و دوم جدا شده با فاصله، فاصله بین سطرها و ستون ها است.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

همانطور که در آخرین مثال، جایی که سرصفحه و پاورقی محتوایی با اندازه خودکار داشتند، در اینجا نوار کناری چپ و راست به طور خودکار بر اساس اندازه ذاتی فرزندانشان اندازه می‌شوند. با این حال، این بار به جای عمودی (ارتفاع) اندازه افقی (عرض) است.

06. 12-Span Grid: grid-template-columns: repeat(12, 1fr)

بعد کلاسیک دیگری داریم: شبکه 12 دهانه. شما می توانید به سرعت گریدها را در CSS با تابع repeat() بنویسید. استفاده از: repeat(12, 1fr); برای ستون های الگوی شبکه ای 12 ستون هر یک از 1fr را به شما می دهد.

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

اکنون شما یک شبکه مسیر 12 ستونی دارید، ما می توانیم فرزندان خود را روی شبکه قرار دهیم. یکی از راه های انجام این کار قرار دادن آنها با استفاده از خطوط شبکه است. به عنوان مثال، grid-column: 1 / 13 از اولین خط تا آخرین (سیزدهم) و 12 ستون را در بر می گیرد. grid-column: 1 / 5; چهار مورد اول را در بر می گیرد.

روش دیگر برای نوشتن این، استفاده از کلمه کلیدی span است. با span ، خط شروع و سپس تعداد ستون هایی را که از آن نقطه شروع باید باز شوند را تعیین می کنید. در این حالت، grid-column: 1 / span 12 معادل grid-column: 1 / 13 و grid-column: 2 / span 6 معادل grid-column: 2 / 8 خواهد بود.

.child-span-12 {
  grid-column: 1 / span 12;
}

07. RAM (تکرار، خودکار، MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))

برای این مثال هفتم، برخی از مفاهیمی را که قبلاً در مورد آنها آموخته‌اید ترکیب کنید تا یک طرح‌بندی پاسخگو با کودکانی که به طور خودکار قرار می‌گیرند و انعطاف‌پذیر ایجاد کنید. خیلی مرتب عبارات کلیدی که در اینجا باید به خاطر بسپارید عبارتند از repeat , auto-(fit|fill) , و minmax()' که با مخفف RAM به خاطر می آورید.

با هم، به نظر می رسد:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

شما دوباره از تکرار استفاده می کنید، اما این بار، به جای یک مقدار عددی صریح، از کلمه کلیدی auto-fit استفاده می کنید. این امکان قرار دادن خودکار این عناصر کودک را فراهم می کند. این کودکان همچنین دارای حداقل مقدار پایه 150px با حداکثر مقدار 1fr هستند، به این معنی که در صفحه‌های کوچک‌تر، عرض کامل 1fr را می‌گیرند، و با رسیدن به عرض هر کدام به 150px ، شروع به جریان شدن روی همان خط می‌کنند.

با auto-fit ، جعبه ها به دلیل اینکه اندازه افقی آنها از 150 پیکسل فراتر می رود کشیده می شوند تا کل فضای باقی مانده را پر کنند. با این حال، اگر این مورد را به auto-fill تغییر دهید، زمانی که اندازه پایه آنها در تابع minmax بیشتر شود، کشیده نمی‌شوند:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

08. Line Up: justify-content: space-between

برای چیدمان بعدی، نکته اصلی که باید در اینجا نشان داده شود justify-content: space-between است که اولین و آخرین عنصر فرزند را در لبه‌های جعبه مرزی خود قرار می‌دهد و فضای باقی‌مانده به طور مساوی بین عناصر توزیع می‌شود. برای این کارت‌ها، آن‌ها در حالت نمایش Flexbox قرار می‌گیرند و جهت آن با استفاده از flex-direction: column روی ستون تنظیم می‌شود.

این عنوان، توضیحات و بلوک تصویر را در یک ستون عمودی در داخل کارت والد قرار می دهد. سپس، اعمال justify-content: space-between اولین (عنوان) و آخرین (بلوک تصویر) عناصر را به لبه‌های فلکس باکس متصل می‌کند و متن توصیفی بین آن‌ها با فاصله‌های مساوی در هر نقطه پایانی قرار می‌گیرد.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

09. بستن سبک من: clamp(<min>, <actual>, <max>)

اینجا جایی است که ما به تکنیک‌هایی با پشتیبانی کمتر از مرورگر می‌پردازیم، اما پیامدهای واقعاً هیجان‌انگیزی برای طرح‌بندی‌ها و طراحی UI پاسخگو داریم. در این نسخه نمایشی، عرض را با استفاده از گیره تنظیم می کنید: width: clamp(<min>, <actual>, <max>) .

این یک حداقل و حداکثر اندازه مطلق و یک اندازه واقعی را تعیین می کند. با مقادیر، می تواند شبیه به این باشد:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

حداقل اندازه در اینجا 23ch یا 23 واحد کاراکتر و حداکثر اندازه 46ch ، 46 کاراکتر است. واحدهای عرض کاراکتر بر اساس اندازه قلم عنصر (به ویژه عرض علامت 0 ) است. اندازه "واقعی" 50٪ است که 50٪ از عرض اصلی این عنصر را نشان می دهد.

کاری که تابع clamp() در اینجا انجام می دهد این است که این عنصر را قادر می سازد تا عرض 50% را حفظ کند تا زمانی که 50% یا بزرگتر از 46ch (در ویوپورت های عریض تر)، یا کوچکتر از 23ch (در نمای کوچکتر) شود. می بینید که با کشش و کوچک شدن اندازه والد، عرض این کارت به حداکثر نقطه گیره شده افزایش می یابد و به حداقل گیره آن کاهش می یابد. سپس در وسط والد باقی می‌ماند زیرا ویژگی‌های اضافی را برای وسط آن اعمال کرده‌ایم. این طرح‌بندی‌های خواناتر را امکان‌پذیر می‌کند، زیرا متن خیلی عریض (بالاتر از 46ch ) یا خیلی فشرده و باریک (کمتر از 23ch ) نخواهد بود.

این نیز یک راه عالی برای پیاده سازی تایپوگرافی واکنش گرا است. به عنوان مثال، می توانید بنویسید: font-size: clamp(1.5rem, 20vw, 3rem) . در این حالت، اندازه قلم یک عنوان همیشه بین 1.5rem و 3rem ثابت می ماند، اما بر اساس مقدار واقعی 20vw رشد و کوچک می شود تا با عرض درگاه دید مطابقت داشته باشد.

این یک تکنیک عالی برای اطمینان از خوانایی با مقدار حداقل و حداکثر اندازه است، اما به یاد داشته باشید که در همه مرورگرهای مدرن پشتیبانی نمی‌شود، بنابراین مطمئن شوید که نسخه‌های بازگشتی دارید و آزمایش خود را انجام دهید.

10. Respect for Aspect: aspect-ratio: <width> / <height>

و در نهایت، این آخرین ابزار چیدمان، آزمایشی ترین ابزار از این دسته است. اخیراً در Chromium 84 به Chrome Canary معرفی شد و تلاش فعالی از طرف فایرفاکس برای پیاده سازی آن انجام شده است، اما در حال حاضر در هیچ نسخه مرورگر پایداری وجود ندارد.

با این حال، من می خواهم به این موضوع اشاره کنم، زیرا مشکلی است که اغلب دیده می شود. و این فقط حفظ نسبت تصویر یک تصویر است.

با ویژگی aspect-ratio ، همانطور که اندازه کارت را تغییر می‌دهم، بلوک بصری سبز این نسبت تصویر 16 در 9 را حفظ می‌کند. ما به نسبت تصویر با aspect-ratio: 16 / 9 احترام می گذاریم.

.video {
  aspect-ratio: 16 / 9;
}

برای حفظ نسبت تصویر 16 x 9 بدون این ویژگی، باید از یک padding-top hack استفاده کنید و به آن padding 56.25% بدهید تا نسبت بالا به عرض را تنظیم کنید. برای جلوگیری از هک شدن و نیاز به محاسبه درصد، به زودی یک خاصیت برای این کار خواهیم داشت. شما می توانید مربعی با نسبت 1 / 1 ، نسبت 2 به 1 با 2 / 1 و در واقع هر چیزی که برای مقیاس بندی این تصویر با نسبت اندازه تنظیم شده نیاز دارید بسازید.

.square {
  aspect-ratio: 1 / 1;
}

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

نتیجه گیری

از شما برای پیگیری این سفر از طریق 10 خط قدرتمند CSS سپاسگزاریم. برای کسب اطلاعات بیشتر، ویدیوی کامل را تماشا کنید و خودتان دموها را امتحان کنید.