نحوه متحرک سازی طرح بندی شبکه های CSS (پروژه شبکه تصویر)

درست است - به نظر می رسد که ما می توانیم برخی از ویژگی های CSS Grid را متحرک سازیم! امروز، با ساختن یک شبکه تصویر پاسخگو با افکت های شناور، این رفتار را در عمل خواهیم دید. با استفاده از این فرصت، از انتخابگر قدرتمند CSS :has() نیز استفاده خواهیم کرد.

بیایید شروع کنیم!

شبکه تصویر ما

این چیزی است که ما می خواهیم ایجاد کنیم - حتماً نسخه نمایشی تمام صفحه را در یک صفحه بزرگ (≥900 پیکسل) مشاهده کنید و ماوس را روی کارت ها نگه دارید:

1. نشانه گذاری

با قرار دادن شش کارت در داخل یک ظرف شروع می کنیم. همانطور که از نشانه گذاری زیر می بینید، سه مورد اول و دو مورد آخر را در ظروف تو در تو قرار می دهیم:

1

 class="grid">

2

  
 class="sub-grid sub-grid-1">

3

    
 class="card">...

4

    
 class="card">...

5

    
 class="card">...

6

7

  
 class="card">...

8

  
 class="sub-grid sub-grid-2">

9

    
 class="card">...

10

    
 class="card">...

11

12

اکنون، هر کارت ساختار زیر را خواهد داشت:

2. سبک ها

در صفحه نمایش های کوچک (<900 پیکسل)، همه کارت ها روی هم چیده می شوند و اطلاعات آنها قابل مشاهده خواهد بود.

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

در اینجا، دو سناریو وجود خواهد داشت که با کمک آن بررسی می شود hover پرسش رسانه ای:

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

• اگر صفحه را از یک مرورگر دسکتاپ یا دستگاهی با شناور ببینیم، طرح گالری به این تغییر می کند:

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

طرح بندی سه ستونی

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

• ما آن را با استفاده از CSS Grid تنظیم می کنیم.
• اندازه ستون اول دو برابر دو ستون دیگر خواهد بود.
• در داخل ستون اول، یک شبکه تودرتو خواهیم داشت که اندازه ستون سوم دو برابر دو ستون دیگر خواهد بود و زیر آنها قرار می گیرد. ارتفاع ردیف ها 40 ولت ساعت خواهد بود و از طریق آن قابل تنظیم است --half-height متغیر CSS
• ارتفاع ستون اول دو برابر ارتفاع دو ستون دیگر (80vh) خواهد بود. باز هم، ما می توانیم آن را از طریق سفارشی سازی کنیم --height متغیر CSS
• در داخل ستون سوم، ما یک شبکه تودرتو خواهیم داشت که در آن ستون ها روی هم چیده می شوند و ارتفاع ردیف ها نیز 40vh خواهد بود.

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

1

:root {

2

  --height: 80vh;

3

  --half-height: calc(var(--height) / 2);

4

}

5

6

@media (min-width: 900px) {

7

  .grid,

8

  .sub-grid {

9

    display: grid;

10

  }

11

12

  .grid {

13

    grid-template-columns: 2fr 1fr 1fr;

14

  }

15

16

  .sub-grid {

17

    grid-template-rows: var(--half-height) var(--half-height);

18

  }

19

20

  .sub-grid-1 {

21

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

22

  }

23

24

  .sub-grid-1 .card:last-child {

25

    grid-column: 1/-1;

26

  }

27

28

  /*.sub-grid-2 {

29

    grid-template-columns: 1fr;

30

  }*/

31

}

اثر شناور

هر بار که ماوس یک کارت/ستون را نگه می داریم، عرض یا ارتفاع آن را افزایش می دهیم تا جلوه زوم ایجاد شود. همانطور که از CSS Grid برای ساختار طرح بندی استفاده کرده ایم، باید مقادیر the را به روز کنیم grid-template-rows و grid-template-columns خواص در شناور

اما، نکته اینجاست: این ویژگی ها بر روی تنظیم شده اند عنصر اجداد و نه روی خود کارت به طور معمول، ما از جاوا اسکریپت برای به روز رسانی آنها استفاده می کنیم، اما خوشبختانه، این :has() انتخابگر رابطه ای این امکان را فراهم می کند.

انیمیشن شماره 1

بیایید ببینیم این انتخابگر در عمل چگونه کار می کند.

ستون دوم شبکه ما را در نظر بگیرید.

در ابتدا این قانون را داریم:

1

.grid {

2

  grid-template-columns: 2fr 1fr 1fr;

3

  transition: all 1s;

4

}

به محض اینکه ماوس را روی آن کارت قرار می دهیم، آن را گسترش می دهد تا کل عرض شبکه را پوشش دهد.

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

1

.grid:has(> .card:hover) {

2

  grid-template-columns: 0fr 1fr 0fr;

3

}

قانون بالا بررسی می کند که آیا یک ستون شبکه فوری شناور شده است یا خیر. اگر این شرط برآورده شود، مقدار آن را به روز می کند grid-template-columns ویژگی به طوری که ستون اول و سوم پنهان می شوند در حالی که ستون اول گسترش می یابد تا فضای آنها را اشغال کند.

انیمیشن شماره 2

بیایید نمونه دیگری را ببینیم.

اولین ستون تو در تو ستون اول را در نظر بگیرید.

در ابتدا این قانون را داریم:

1

.sub-grid-1 {

2

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

3

  transition: all 1s;

4

}

به محض اینکه ماوس را روی آن کارت قرار می دهیم، اندازه آن دو برابر می شود و کارت دوم را به این صورت مخفی می کند:

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

1

.grid:has(.sub-grid-1 .card:first-of-type:hover) .sub-grid-1 {

2

  grid-template-columns: 1fr 0fr auto;

3

}

قانون بالا بررسی می کند که آیا اولین ستون تودرتوی اولین ستون شبکه (که به عنوان ظرف شبکه عمل می کند) شناور است یا خیر. اگر این شرط برآورده شود، مقدار the را به روز می کند grid-template-columns ویژگی به طوری که دومین ستون تو در تو پنهان می شود در حالی که ستون اول گسترش می یابد تا فضای آن را اشغال کند.

از 0fr به جای 0 استفاده کنید تا انیمیشن کار کند!

انیمیشن شماره 3

اجازه دهید با یک مثال دیگر به پایان برسانیم.

اولین ستون تو در تو ستون سوم را در نظر بگیرید.

در ابتدا این قانون را داریم:

1

.sub-grid-2 {

2

  grid-template-rows: 40vh 40vh;

3

  transition: all 1s;

4

}

به محض اینکه ماوس را روی آن کارت قرار می دهیم، ارتفاع آن دو برابر می شود و کارت دوم را به این صورت مخفی می کند:

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

1

.grid:has(.sub-grid-2 .card:first-of-type:hover) .sub-grid-2 {

2

  grid-template-rows: 80vh 0;

3

}

قانون بالا بررسی می کند که آیا اولین ستون تو در تو ستون سوم شبکه (که به عنوان ظرف شبکه عمل می کند) شناور است یا خیر. اگر این شرط برآورده شود، مقدار the را به روز می کند grid-template-rows ویژگی به طوری که دومین ستون تو در تو پنهان می شود در حالی که ستون اول به صورت عمودی گسترش می یابد تا فضای آن را اشغال کند.

با کلیک بر روی آن می توانید بقیه سبک ها را مشاهده کنید CSS برگه نسخه ی نمایشی - من از تودرتوی CSS برای سبک های کارت استفاده کرده ام.

نتیجه گیری

انجام شد! در طی این آموزش، نحوه متحرک سازی طرح بندی شبکه های CSS را با کمک افراد قدرتمند یاد گرفتیم :has() CSS شبه کلاس. امیدوارم از پروژه ما لذت برده باشید و دانش جدیدی کسب کرده باشید.

باز هم، این چیزی است که امروز ساختیم:

مثل همیشه، خیلی ممنون که خواندید!