آموزش چیدمان شبکه CSS با پرینت کامل • جاش دبلیو کومئو

در آن زمان، یک طرح‌بندی وب‌سایت استاندارد طلایی وجود داشت که همه آرزوی ایجاد آن را داشتند، اما درست کردن آن بسیار دشوار بود: طرح جام مقدس.

به نظر نمی رسد آنقدرها هم پیچیده باشد، اینطور نیست؟ اما این دوران قبل از وجود فلکس باکس بود. ابزار ما برای این کار میز و شناور بود و هیچکدام واقعاً به وظیفه خود عمل نمی کردند. از نظر فنی امکان پذیر بود، اما ترفندهایی لازم بود.

پس از اینکه flexbox به پشتیبانی از مرورگر اصلی دست یافت، این طرح از ” جام مقدس” به “نوشیدنی چشمه” تبدیل شد. در همه جا وجود داشت زیرا تجربه کاربری عالی را ارائه می کرد و برای همه توسعه دهندگان قابل دسترسی بود.

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

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

آیا تا به حال سعی کرده اید ویکی پدیا را روی یک صفحه بسیار بزرگ بخوانید؟ به نظر می رسد این است:

این پاراگراف ها بسیار گسترده هستند! ویکی پدیا اصلاً عرض ظرف را محدود نمی کند. این منجر به خطوطی با صدها کاراکتر می شود.

وقتی به انتهای خط می رسیم برای چشمانمان سخت است که دور خود بپیچند. اگر شما هم مثل من هستید، از ماوس خود برای کمک استفاده خواهید کرد:

علاوه بر نگرانی در مورد بسته بندی خط، معمولاً خواندن خطوط متنی با این وسعت دشوار است. خسته کردن چشم

تحقیقات دارد نشان داده شده است(در برگه جدید باز می شود) که طول خط ایده آل حدود 65 کاراکتر است. هر جایی بین 45 تا 85 به طور کلی در متن لاتین قابل قبول در نظر گرفته می شود. خواندن پیچیده است فرآیند(در برگه جدید باز می شود)و ما باید سعی کنیم آن را تا حد امکان آسان کنیم.

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

با این حال، یک عامل پیچیده وجود دارد –همه محتوا نباید محدود شود. ما باید به تصاویر، ویدئوها و ابزارک های سفارشی اجازه دهیم تا پهنای موجود را آزاد کرده و پر کنند:

این میرکت به عنوان نمونه ای برای رهایی کودک از محدودیت ها استفاده می شود. عکس از شان پل کینیر.

اصطلاح کلی برای این نوع چیزها “خونریزی کامل” است. این اصطلاحی است که از دنیای نشر وام گرفته شده است. هنگامی که چیزی بدون خونریزی چاپ می شود، تا لبه کاغذ گسترش می یابد.

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

بیایید از انتها با راه حل خود شروع کنیم:

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(42rem, 100%)
    1fr;
}

.wrapper > * {
  grid-column: 2;
}

.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

این سبک ها در این فرم به نشانه گذاری اختصاص داده می شوند:

main class="wrapper">
  h1>Some Headingh1>
  p>Some content and stuffp>
  img class="full-bleed" alt="cute meerkat" src="/meerkat.jpg" />
main>

در اینجا چیزهای زیادی برای باز کردن وجود دارد، بنابراین بیایید آن را گام به گام پیش ببریم.

پیوند به این عنوانشبکه

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(42rem, 100%)
    1fr;
}

اگر با CSS Grid آشنایی ندارید، ممکن است کاراکترها و کلمات کلیدی تصادفی زیادی به نظر برسد. هرگز نترس! همه چیز توضیح داده خواهد شد.

grid-template-columns خاصیتی است که به ما امکان می دهد شکل مش خود را تعریف کنیم. با ارائه 3 مقدار مجزا، نشان می دهیم که 3 ستون می خواهیم.

مقادیر عرض هر ستون را تعیین می کنند. ستون اول است 1fr، مانند ستون آخر. را fr واحد یک واحد انعطاف پذیر است که فضای موجود را پر می کند. اساساً مشابه است flex-grow; این نسبتی است که ستون باید چه مقدار از فضای خالی را اشغال کند.

ستون مرکزی ما یک عرض ثابت است. در این مثال فرضی، من می خواهم این ستون حداکثر عرض داشته باشد 42rem، زیرا این مقداری است که به خطوط 65 کاراکتری اجازه می دهد. برای یافتن عرض مناسب باید آزمایش کنید، که این به شما بستگی دارد font-family و font-size.

در صفحه های کوچکتر که فضای افقی کافی برای 65 کاراکتر وجود ندارد، 100 درصد فضای موجود مورد نیاز است. استفاده می کنم min() تابع برای انتخاب بین دو مقدار.

(اگر از Sass استفاده می کنید، min کلمه کلیدی به درستی کار نخواهد کرد زیرا در حال حاضر یک کمک کننده در پیش پردازنده است. بررسی الف راه حل(در برگه جدید باز می شود).)

در عمل به این صورت است:

پیوند به این عنوانستون با فرزندان اختصاص داده شده

ما یک شبکه 3 ستونی تعریف کرده ایم و اکنون وقت آن است که کودکان را به آن اختصاص دهیم.

به طور پیش فرض، فرزندان در اولین سلول شبکه موجود قرار می گیرند. با این حال، ما می خواهیم این رفتار پیش فرض را نادیده بگیریم. همه بچه ها باید در ستون مرکزی بنشینند و ستون اول و سوم را خالی بگذارند.

.wrapper > * {
  grid-column: 2;
}

در CSS Grid، ستون ها با 1 ایندکس می شوند، بنابراین 2 اشاره ای به ستون وسط است.

ستاره (*) یک علامت عام است. عناصر از همه نوع مطابقت خواهد داشت. ما می گوییم که هر کودک باید به این ستون وسط دوم اختصاص یابد. هر فرزند جدید یک ردیف جدید ایجاد می کند، مانند:

پیوند به این عنوانبچه ها خون کامل

ما دیده‌ایم که چگونه شبکه ما می‌تواند عناصر را از هر نوع محدود کند، اما وقتی می‌خواهیم یک کودک آزاد شود و عرض موجود را پر کند، چطور؟

اینجاست که این مرد وارد می شود:

.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

این خاصه .full-bleed به یک فرزند خاص اجازه می دهد تا از آن ستون خارج شود و هر 3 ستون را بپوشاند. 1 / 4 نحو شروع/پایان است. ما می گوییم که عنصر باید از ستون 1 (شامل) شروع شود و تا ستون 4 (انحصاری) گسترش یابد.

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

در اندازه‌های کوچک‌تر صفحه، می‌خواهیم مقداری پد اضافه کنیم تا متن ما درست در لبه نمایشگر نباشد.

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

.wrapper {
  --viewport-padding: 16px;
  display: grid;
  grid-template-columns:
    1fr
    min(42rem, calc(100% - var(--viewport-padding) * 2))
    1fr;
  gap: 0 var(--viewport-padding);
}

این کار می کند، اما صادقانه بگویم، این grid-template-columns اعلامیه داره خیلی ناجور میشه😅. من سعی می‌کنم کدم را تا حد امکان ساده نگه دارم تا وقتی در آینده به آن بازگردم، بتوانم در سریع‌ترین زمان ممکن آن را درک کنم.

از طرف دیگر، می‌توانیم مقداری بالشتک درون خطی داخل محفظه شبکه اضافه کنیم و آن را با حاشیه منفی روی عناصر فرزند پرینت کامل لغو کنیم:

.wrapper {
  --viewport-padding: 16px;
  display: grid;
  grid-template-columns: 1fr min(42rem, 100%) 1fr;
  padding-inline: var(--viewport-padding);
}

.full-bleed {
  grid-column: 1 / -1;
  margin-inline: calc(var(--viewport-padding) * -1);
}

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

بگذارید یک سوال از شما بپرسم: چقدر با CSS راحت هستید؟

من بسیاری از توسعه دهندگان JS را می شناسم که CSS را خسته کننده و اضطراب آور می دانند. آن‌ها اصول اولیه را می‌دانند، اما به نظر نمی‌رسد که نمی‌توانند تسلط داشته باشند تا بتوانند با اطمینان CSS بنویسند.

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

من این دانش را در یک دوره آنلاین به نام CSS برای جاوا اسکریپت تقطیر کردم توسعه دهندگان(در برگه جدید باز می شود). همین است دوره تعاملی، با استفاده از همان تکنیک هایی که در این وبلاگ برای نوشتن محتوای پویا استفاده می کنم که بتوان آن را به حرکت درآورد و برانگیخت. من به این ایده بسیار مطمئن هستم که شغل خود را به عنوان یک مهندس نرم افزار تمام وقت در Gatsby Inc. رها کردم تا تمام وقت روی آن کار کنم.

CSS Grid هم اکنون بسیار قدرتمند است که مرورگر گسترده ای دارد پشتیبانی کنید(در برگه جدید باز می شود)، می تواند بسیاری از مشکلات ما را حل کند!

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

راه حل تاریخی این مشکل از مرزهای منفی استفاده می کرد. کاملاً کار می کند اما به نظر من کمی هک است. می توانید اطلاعات بیشتری در مورد این راه حل در CSS بخوانید ترفندها(در برگه جدید باز می شود).

یک چیز دیگر: از تغییر این سبک ها نترسید! این دستور غذا به عنوان نقطه شروع استفاده می شود. برای مثال، ممکن است بخواهید حداکثر عرض را روی ظرف اعمال کنید تا کودکان با خونریزی کامل را در نمایشگرهای فوق عریض محدود کنید. همه انواع کارهای سرگرم کننده وجود دارد که می توانید خارج از آنچه در این آموزش توضیح داده شده است انجام دهید. می توانید در CSS من درباره آنها اطلاعات بیشتری کسب کنید دوره(در برگه جدید باز می شود)!