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

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

Una Kravets

منتشر شده: ۷ ژوئیه ۲۰۲۰، آخرین به‌روزرسانی: ۱۵ دسامبر ۲۰۲۵

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

برای دنبال کردن یا کار کردن با این دموها به تنهایی، به سایتی که در بالا قرار داده شده است مراجعه کنید یا از 1linelayouts.com دیدن کنید.

۰۱. فوق العاده متمرکز: 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;
}

این امر باعث می‌شود محتوا، صرف نظر از اندازه ذاتی، کاملاً در مرکز والد قرار گیرد.

۰۲. پنکیکِ از هم پاشیده: flex: <grow> <shrink> <baseWidth>

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

با استفاده از 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;
}

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

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

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

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

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

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

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

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

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

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

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

۰۵. طرح‌بندی کلاسیک جام مقدس: 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 دهانه‌ای: grid-template-columns: repeat(12, 1fr)

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

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

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

حالا شما یک شبکه‌ی ۱۲ ستونی دارید، می‌توانیم فرزندانمان را روی شبکه قرار دهیم. یک راه برای انجام این کار، قرار دادن آنها با استفاده از خطوط شبکه است. برای مثال، grid-column: 1 / 13 از خط اول تا آخرین (سیزدهمین) را پوشش می‌دهد و ۱۲ ستون را پوشش می‌دهد. 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 (تکرار، خودکار، حداقل حداکثر): 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));
}

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

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

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

۸. مرتب کردن: justify-content: space-between

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

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

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

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

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

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

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

حداقل اندازه در اینجا 23ch یا ۲۳ واحد کاراکتری و حداکثر اندازه 46ch یا ۴۶ کاراکتر است. واحدهای عرض کاراکتر بر اساس اندازه فونت عنصر (به طور خاص عرض گلیف 0 ) تعیین می‌شوند. اندازه «واقعی» ۵۰٪ است که ۵۰٪ از عرض والد این عنصر را نشان می‌دهد.

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

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

این یک تکنیک عالی برای اطمینان از خوانایی با حداقل و حداکثر مقدار اندازه است.

۱۰. رعایت ابعاد: aspect-ratio: <width> / <height>

و در نهایت، این طرح آخر، مشکل رایج حفظ نسبت ابعاد تصویر را حل می‌کند.

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

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

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

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

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

نتیجه‌گیری

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