بررسی شبکه ضمنی شبکه CSS و قدرت‌های قرار دادن خودکار

هنگام کار با CSS Grid، اولین کاری که باید انجام دهید این است که تنظیم کنید display: grid روی عنصری که می خواهیم تبدیل به یک ظرف شبکه شود. سپس به صراحت شبکه را با استفاده از ترکیبی از تعریف می کنیم grid-template-columns, grid-template-rowsو grid-template-areas. و از آنجا مرحله بعدی قرار دادن آیتم ها در داخل شبکه است.

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

«صریح، ضمنی؟ هک در جریان است که اینجا هستید؟"

اصطلاحات عجیب و غریب، درست است؟ مانوئل ماتوزوویچ قبلا است یک توضیح خوب از آنچه ممکن است در CSS Grid "ضمنی" و "صریح" بگوییم، اما بیایید مستقیماً به آنچه la sاصلاح می گوید:

La grid-template-rows, grid-template-columnsو grid-template-areas ویژگی ها تعداد ثابتی از آهنگ ها را که تشکیل می دهند را تعریف می کنند شبکه صریح. هنگامی که آیتم های شبکه خارج از این محدوده ها قرار می گیرند، ظرف شبکه با افزودن خطوط شبکه ضمنی به شبکه، مسیرهای شبکه ضمنی ایجاد می کند. این خطوط همراه با شبکه صریح شکل می گیرند شبکه ضمنی.

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

در مورد قرارگیری خودکار چطور؟

مشابه مفهوم شبکه ضمنی، قرار دادن خودکار توانایی مرورگر برای قرار دادن خودکار موارد در داخل شبکه است. ما همیشه نیازی به دادن موقعیت هر مورد نداریم.

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

نوار کناری پویا

در اینجا، ما سه طرح بندی مختلف داریم اما فقط یک پیکربندی شبکه داریم که برای همه آنها کار می کند.

main {
  display: grid;
  grid-template-columns: 1fr;
}

فقط یک ستون تمام فضای خالی را اشغال می کند. این شبکه "صریح" ما است. تنظیم شده است تا یک مورد شبکه را در آن قرار دهد main ظرف توری همین. یک ستون و یک سطر:

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

ما می توانیم حرکت دهیم <aside> به ستونی در کنار <section>:

aside {
  grid-column-start: 2;
}

و این چیزی است که DevTools اکنون به ما می گوید:

ما عنصر خود را در ستون دوم قرار می دهیم اما ... ستون دوم نداریم. عجیب است، درست است؟ ما هرگز ستون دومی را در آن اعلام نکردیم <main> ظرف شبکه، اما مرورگر یکی را برای ما ایجاد کرد! این بخش کلیدی از مشخصاتی است که ما به آن نگاه کردیم:

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

این ویژگی قدرتمند به ما اجازه می دهد تا طرح بندی های پویا داشته باشیم. اگر فقط آن را داشته باشیم <section> عنصر، تنها چیزی که به دست می آوریم یک ستون است. اما اگر یک را اضافه کنیم <aside> عنصر به ترکیب، یک ستون اضافی ایجاد می شود تا آن را در بر بگیرد.

ما می توانیم قرار دهیم <aside> قبل از <section> در عوض به این صورت:

aside {
  grid-column-end: -2;
} 

برخلاف کد قبلی که ستون ضمنی را در انتهای شبکه قرار می دهد، ستون ضمنی را در ابتدای شبکه ایجاد می کند.

ما می توانیم همین کار را راحت تر با استفاده از grid-auto-flow ویژگی برای تنظیم هر و همه مسیرهای ضمنی برای جریان در a column جهت:

حالا نیازی به مشخص کردن نیست grid-column-start قرار دادن <aside> عنصر سمت راست <section>! در واقع، هر آیتم شبکه دیگری که ما تصمیم بگیریم در هر زمان در آنجا پرتاب کنیم، اکنون در جهت ستونی جریان می یابد که هر کدام در مسیرهای شبکه ضمنی خود قرار می گیرند. ایده آل برای موقعیت هایی که تعداد موارد در شبکه از قبل مشخص نیست!

گفته شد، ما هنوز نیاز داریم grid-column-end اگر بخواهیم آن را در ستونی در سمت چپ آن قرار دهیم زیرا در غیر این صورت، <aside> ستون صریح را اشغال می کند که به نوبه خود، را فشار می دهد <section> خارج از شبکه صریح و آن را مجبور به گرفتن ستون ضمنی می کند.

میدونم میدونم. این کمی پیچیده است. در اینجا مثال دیگری است که می توانیم برای درک بهتر این ابهام کوچک استفاده کنیم:

در مثال اول، ما هیچ جایگذاری را مشخص نکردیم. در این حالت، مرورگر ابتدا آن را قرار می دهد <aside> عنصر در ستون صریح از آنجایی که اولین بار در DOM است. را <section>در همین حال، به طور خودکار در ستون شبکه ای قرار می گیرد که مرورگر به طور خودکار (یا به طور ضمنی) برای ما ایجاد می کند.

در مثال دوم، مقدار را تنظیم کردیم <aside> عنصر خارج از شبکه صریح:

aside {
  grid-column-end: -2;
}

حالا این مهم نیست <aside> در HTML اول است. با واگذاری مجدد <aside> در جای دیگری، ما آن را ساخته ایم <section> عنصر موجود برای گرفتن ستون صریح.

شبکه تصویر

بیایید چیزی متفاوت را با شبکه ای از تصاویر امتحان کنیم که در آن یک تصویر بزرگ و چند تصویر کوچک در کنار آن (یا زیر آن) داریم.

ما دو پیکربندی شبکه داریم. اما حدس بزنید چیست؟ من اصلاً هیچ شبکه ای تعریف نمی کنم! تمام کاری که من انجام می دهم این است:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

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

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

صبر کن! نیست grid-area خاصیتی که برای تعریف از آن استفاده می کنیم مناطق نامگذاری شده به جای اینکه عناصر در شبکه از کجا شروع و به پایان می رسند؟

بله، اما بیشتر هم انجام می دهد. ما می‌توانیم خیلی بیشتر درباره آن بنویسیم grid-area، اما در این مورد خاص:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

ما می‌توانیم در هنگام کرک کردن DevTools برای گسترش نسخه کوتاه‌نویسی، همین موضوع را ببینیم:

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

ما اساساً اولین تصویر را در HTML قرار داده‌ایم تا یک شبکه 3⨉3 را اشغال کند. این بدان معنی است که هر تصویر دیگری به طور خودکار در همان سه ستون بدون نیاز به مشخص کردن چیز جدیدی قرار می گیرد.

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

همه اینها از یک خط CSS! این قدرت شبکه "ضمنی" و قرار دادن خودکار است.

برای پیکربندی شبکه دوم در آن نسخه ی نمایشی، تمام کاری که من انجام داده ام این است که جهت جریان خودکار را با استفاده از grid-auto-flow: column همان روشی که قبلاً هنگام قرار دادن یک انجام دادیم <aside> عنصر در کنار a <section>. این کار مرورگر را مجبور به ایجاد یک چهارم ستون می تواند برای قرار دادن تصاویر باقی مانده استفاده شود. و از آنجایی که ما سه ردیف داریم، تصاویر باقی مانده در همان ستون عمودی قرار می گیرند.

ما باید چند ویژگی به تصاویر اضافه کنیم تا مطمئن شویم که آنها به خوبی در داخل شبکه قرار می گیرند و هیچ سرریزی ندارند:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

و البته، ما به راحتی می توانیم با تنظیم یک مقدار، شبکه را برای در نظر گرفتن تصاویر بیشتر به روز کنیم. این خواهد بود 3 در سبک های تصویر بزرگ. ما این را داریم:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

اما ما می‌توانیم یک ستون چهارم را به سادگی با تغییر آن به آن اضافه کنیم 4 بجای:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

حتی بهتر: اجازه دهید آن را به‌عنوان یک ویژگی سفارشی تنظیم کنیم تا به‌روزرسانی آسان‌تر شود.

طرح بندی های پویا

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

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

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

هنگامی که عنصر دوم را اضافه می کنیم، یک ستون دیگر (ضمنی) ایجاد می کنیم grid-column-start: 2.

وقتی عنصر سومی را اضافه می کنیم، باید عرض دو ستون را به خود اختصاص دهد - به همین دلیل استفاده کردیم grid-column-start: span 2، اما فقط اگر این باشد :last-child زیرا اگر (و کی) عنصر چهارم را اضافه کنیم، آن عنصر فقط باید یک ستون را اشغال کند.

با اضافه کردن آن، داریم چهار پیکربندی شبکه با تنها دو اعلامیه و جادوی شبکه ضمنی:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

بیایید یکی دیگر را امتحان کنیم:

ما برای موارد اول و دوم که فقط یک یا دو عنصر داریم هیچ کاری انجام نمی دهیم. با این حال، وقتی عنصر سومی را اضافه می کنیم، به مرورگر می گوییم که - تا زمانی که این عنصر باشد :last-child - باید دو ستون باشد. وقتی عنصر چهارم را اضافه می کنیم، به مرورگر می گوییم که عنصر باید در ستون دوم قرار گیرد.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

آیا شما شروع به دریافت ترفند می کنید؟ ما بر اساس تعداد عناصر (با استفاده از :nth-child) و گاهی اوقات، یک دستورالعمل می تواند طرح را به طور کامل تغییر دهد.

لازم به ذکر است که وقتی با محتوای متفاوت کار می کنیم، سایزبندی یکسان نخواهد بود:

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

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

هی ما هنوز با اون خواص بازی نکردیم! grid-auto-rows و grid-auto-columns اندازه سطرها و ستون های ضمنی را به ترتیب در یک ظرف شبکه تنظیم کنید. یا، به عنوان مشخصات آن را توضیح می دهد:

La grid-auto-columns و grid-auto-rows ویژگی‌ها اندازه آهنگ‌هایی را مشخص می‌کنند که اندازه آن‌ها تعیین نشده است grid-template-rows or grid-template-columns.

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

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

چه خبر است grid-auto-rows و چرا سه مقدار می گیرد؟ آیا ما سه ردیف تعریف می کنیم؟

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

• اگر یک ردیف داشته باشیم، با مقدار اول اندازه می شود.
• اگر دو ردیف داشته باشیم، اولی مقدار اول و دومی مقدار دوم را می گیرد.
• اگر سه ردیف داشته باشیم، از سه مقدار استفاده می شود.
• اگر چهار ردیف داشته باشیم (و قسمت جالب اینجاست) از سه مقدار برای سه ردیف اول استفاده می کنیم و دوباره از مقدار اول برای ردیف چهارم استفاده می کنیم. به همین دلیل یک نوع الگو است که برای اندازه گیری تمام ردیف های ضمنی آن را تکرار می کنیم.
• اگر 100 ردیف داشته باشیم، اندازه آنها سه در سه می شود تا داشته باشیم 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr، و غیره

برخلاف grid-template-rows که تعداد ردیف ها و اندازه آنها را مشخص می کند، grid-auto-rows فقط ردیف اندازه هایی که ممکن است در طول مسیر ایجاد شوند.

اگر به مثال خود برگردیم، منطق این است که وقتی دو ردیف ایجاد می شوند، اندازه یکسانی داشته باشیم (از 2fr 2fr) اما اگر ردیف سوم ایجاد شود آن را کمی کوچکتر می کنیم.

الگوهای شبکه ای

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

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

نگاهی به کد بیاندازید. ممکن است پیچیده به نظر برسد، اما بیایید آن را تجزیه کنیم زیرا بسیار ساده است.

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

حال، بیایید شبکه را تعریف کنیم و الگوی کلی را با استفاده از آن تنظیم کنیم :nth-child انتخابگر متناوب بین عناصر:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

گفتیم که الگوی ما هر چهار عنصر تکرار می شود، بنابراین منطقاً استفاده خواهیم کرد 4n + x جایی که x از 1 تا 4 متغیر است. توضیح این الگو کمی ساده تر است:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

کامل، درست است؟ ما چهار عنصر داریم و الگو را روی عنصر پنجم، عنصر نهم و غیره تکرار کنید.

کسانی که :nth-child انتخابگرها می توانند مشکل ساز باشند! کریس فوق العاده مفید است توضیح در مورد نحوه کار همه اینها، از جمله دستور العمل برای ایجاد الگوهای مختلف.

اکنون هر عنصر را طوری پیکربندی می کنیم که:

1. عنصر اول باید دو ستون بگیرد و از ستون یک شروع شود (grid-column: 1/span 2).
2. عنصر دوم در ستون سوم (grid-column-start: 3).
3. عنصر سوم در ستون اول قرار می گیرد: (grid-column-start: 1).
4. عنصر چهارم دو ستون می گیرد و از ستون دوم شروع می شود:grid-column: 2/span 2).

این در CSS است:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

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

اولین کاری که می توانیم انجام دهیم به روز رسانی است grid-column: 1 /span 2 و فقط استفاده کنید grid-column: span 2 از آنجایی که، به طور پیش فرض، مرورگر اولین مورد را در ستون اول قرار می دهد. ما همچنین می توانیم این را حذف کنیم:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

با قرار دادن آیتم های اول، دوم و چهارم، شبکه به طور خودکار مورد سوم را در جای درست قرار می دهد. یعنی ما با این جا مانده ایم:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

اما بیایید قدم بزنیم بهتر است! ما همچنین می توانیم این را حذف کنیم:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

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

فکر می کنم شما پایان داستان را می دانید. مرورگر به طور خودکار موارد دوم و سوم را در آن نقاط خالی قرار می دهد. بنابراین کد ما حتی ساده تر می شود:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

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

چرا استفاده نکنید grid-template-columns برای تعریف ستون های صریح از آنجایی که تعداد ستون ها را می دانیم؟

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

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

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

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

بیایید الگوی دیگری را امتحان کنیم، این بار کمی سریعتر:

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

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

هوم، خوب نیست. باید عنصر دوم را در ستون اول قرار دهیم. در غیر این صورت، شبکه به طور خودکار آن را در ستون دوم قرار می دهد.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

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

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

اما این کار نمی کند زیرا همه را مجبور می کند 6n + 3 عناصر برای قرار گرفتن در همان منطقه که یک طرح درهم ریخته ایجاد می کند. راه حل واقعی این است که تعریف اولیه عنصر سوم را حفظ کنید و اضافه کنید grid-auto-flow: dense برای پر کردن شکاف ها از MDN:

[] الگوریتم بسته بندی "متراکم" تلاش می کند پر شود در سوراخ های قبلی در شبکه، اگر موارد کوچکتر بعداً ظاهر شوند. این ممکن است باعث شود اقلام نامرتب به نظر برسند، در صورتی که انجام این کار باعث پر شدن حفره های باقی مانده از اقلام بزرگتر می شود. اگر حذف شود، از یک الگوریتم "پراکنده" استفاده می شود، که در آن الگوریتم قرار دادن فقط در هنگام قرار دادن آیتم ها "به جلو" در شبکه حرکت می کند و هرگز برای پر کردن حفره ها به عقب بر نمی گردد. این تضمین می‌کند که همه مواردی که به‌طور خودکار قرار می‌گیرند «به ترتیب» ظاهر می‌شوند، حتی اگر سوراخ‌هایی باقی بماند که می‌توانستند توسط آیتم‌های بعدی پر شوند.

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

چرا همیشه این ویژگی را به صورت پیش فرض اضافه نمی کنید؟

من آن را توصیه نمی کنم زیرا، در برخی موارد، ما چنین رفتاری را نمی خواهیم. توجه داشته باشید که چگونه توضیح MDN در آنجا اشاره می کند که باعث می شود اقلام "خارج از نظم" جریان پیدا کنند تا حفره های باقی مانده توسط اقلام بزرگتر را پر کنند. ترتیب بصری معمولاً به اندازه ترتیب منبع مهم است، به ویژه هنگامی که صحبت از رابط های قابل دسترسی باشد grid-auto-flow: dense گاهی اوقات می تواند باعث عدم تطابق بین ترتیب دیداری و منبع شود.

کد نهایی ما این است:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

یکی دیگه؟ بیا بریم!

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

موارد مشکی به طور ضمنی در شبکه قرار می گیرند. لازم به ذکر است که ما می‌توانیم طرح‌بندی یکسانی را به روش‌های بیشتری نسبت به نحوه رسیدن من به آنجا دریافت کنیم. آیا می توانید آنها را هم بفهمید؟ در مورد استفاده چطور grid-template-columns? آثار خود را در قسمت نظرات به اشتراک بگذارید.

من یک الگوی آخر را برای شما باقی می گذارم:

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

می خواهید بیشتر

قبل از پایان، من می‌خواهم چند سؤال Stack Overflow مربوط به CSS Grid را به اشتراک بگذارم که در آنها با پاسخ‌هایی که از بسیاری از تکنیک‌هایی که در اینجا با هم توضیح دادیم استفاده کردم. این فهرست خوبی است که نشان می‌دهد چند مورد استفاده واقعی و موقعیت‌های واقعی در جایی که این موارد به کار می‌آیند ظاهر می‌شوند:

پسگفتار

CSS Grid سالهاست که وجود دارد، اما هنوز ترفندهای کمتر شناخته شده و مورد استفاده زیادی وجود دارد که به طور گسترده در مورد آنها بحث نشده است. ویژگی های شبکه ضمنی و قرارگیری خودکار دو مورد از آنها هستند!

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

به طور مشابه، ممکن است بخواهید در مورد آن بخوانید grid-auto-columns در CSS-Tricks Almanac زیرا مجتبی سیدی به جزئیات زیاد می پردازد و شامل تصاویری فوق العاده مفید برای کمک به توضیح رفتار می شود.

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