نحوه اشکال زدایی CSS Grid با Chrome DevTools

1. مقدمه

DevTools اکنون پشتیبانی بهتری از اشکال زدایی شبکه CSS دارد!

شبکه CSS

هنگامی که یک عنصر HTML در صفحه شما دارای display: grid یا display: inline-grid روی آن اعمال می شود، پنل Elements تعدادی گزینه برای کمک به شما در بازرسی بهتر شبکه ارائه می دهد.

چیزی که یاد خواهید گرفت

این کد لبه به شما می آموزد که چگونه CSS Grid را با ابزارهای توسعه دهنده کروم اشکال زدایی کنید.

  • نحوه تغییر ویژگی Grid debugging از پنل Elements
  • نحوه سفارشی کردن تنظیمات پوشش شبکه در صفحه Layout
  • نحوه ویرایش استایل ها با کمک همپوشانی شبکه

آنچه شما نیاز دارید

  • یک کامپیوتر در حال کار و وای فای واقعی
  • کروم 87 و بالاتر.
  • [اختیاری] درک اولیه از شبکه CSS .

کاری که خواهی کرد

این معما را با کمک ابزارهای اشکال زدایی CSS Grid حل خواهید کرد.

پازل کروم

2. شروع کنید

برای باز کردن صفحه پازل روی لینک زیر کلیک کنید:

سپس، در صفحه پازل، Chrome DevTools را باز کنید .

3. پوشش شبکه را فعال کنید

پازل را در پنل Elements بررسی کنید. روی گره ظرف پازل کلیک کرده و تمرکز کنید:

<div class="chrome-puzzle">

در پانل عناصر ، توجه کنید که یک نشان grid ای در کنار ظرف پازل وجود دارد. برای تغییر همپوشانی شبکه، روی آن کلیک کنید.

این ویدیو نحوه تکمیل مراحل بالا را نمایش می دهد.

4. صفحه نمایش همپوشانی شبکه را سفارشی کنید

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

روی صفحه Layout کلیک کنید، در منوی کشویی گزینه Hide line labels را انتخاب کنید تا شماره خطوط روی همپوشانی شبکه پنهان شود.

حالا به قسمت Styles بروید و CSS ظرف پازل را بررسی کنید. این شامل یک ویژگی grid-template-areas است:

.chrome-puzzle {
  grid-template-areas:
    "top-left top-right"
    "bottom-left bottom-right";
}

نام مناطق برای ما برای حل معما مفید است! بیایید تنظیمات را به روز کنیم تا آنها را روی صفحه نمایش دهیم.

به صفحه Layout برگردید، کادر Show area names را فعال کنید.

تا-دا! اکنون پوشش شبکه نام ناحیه هر قطعه پازل را نشان می دهد.

این ویدیو نحوه تکمیل مراحل بالا را نمایش می دهد.

5. پازل را حل کنید

با نمایش نام مناطق روی صفحه، می توانیم کار روی پازل را شروع کنیم.

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

می توانیم با بررسی اولین قطعه پازل شروع کنیم.

<img src="...-grid-4.png" class="piece-4">

در قسمت Styles ، کلاس CSS قطعه را پیدا کنید:

.piece-4 {
    grid-area: auto;
}

منطقه grid-area در حال حاضر روی auto شده است. می توانید آن را با نام منطقه صحیح به روز کنید.

این قطعه باید متعلق به کدام منطقه باشد؟ بیایید بگوییم که ناحیه صحیح این قطعه top-right است، سپس می‌توانید مقدار auto را با top-right جایگزین کنید. تغییرات را فوراً تجسم کنید. اکنون قطعه در قسمت top-right قرار گرفته است.

این ویدیو نحوه تکمیل مراحل بالا را نمایش می دهد.

تا زمانی که معما را حل کنید grid-area هر قطعه را به روز کنید!

پازل کامل

6. تبریک می گویم!

تبریک می گویم! شما این نرم افزار کد را با موفقیت تکمیل کردید!

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

چگونه این کد لبه را پیدا می کنید؟

نه، خسته کننده است. خوبه من دوستش دارم!