چگونه با استفاده از HTML و CSS یک طرح بندی سنگ تراشی ایجاد کنیم
طرح بنایی طرحی مبتنی بر شبکه است که در آن اقلام به گونه ای چیده شده اند که شکاف های عمودی بین آنها به حداقل برسد.
بر خلاف شبکه های سنتی با ارتفاع ردیف ثابت، چیدمان های سنگ تراشی موقعیت اقلام را به صورت پویا بر اساس ارتفاع محتوای آنها تنظیم می کنند و آرایش بصری جذاب و فضای کارآمد ایجاد می کنند.
ویژگی های کلیدی چیدمان بنایی
اقلام می توانند ارتفاع های متفاوتی داشته باشند، که باعث می شود در مقایسه با شبکه های استاندارد، چیدمان ارگانیک تر و یکنواخت تر به نظر برسد.
اقلام برای پر کردن شکاف‌های عمودی قرار می‌گیرند و یک چیدمان فشرده بدون فضاهای بزرگ بین اقلام ایجاد می‌کنند.
چیدمان های سنگ تراشی می توانند با اندازه های مختلف صفحه سازگار شوند و تعداد ستون ها و موقعیت اقلام را بر این اساس تنظیم کنند.
این طرح اغلب برای گالری ها، نمونه کارها و سایر محتوای بصری استفاده می شود که در آن ارائه زیباشناختی دلپذیر مهم است.
کاربردهای رایج
گالری تصاویر: نمایش تصاویر در اندازه های مختلف بدون برش.
طرح بندی وبلاگ: ترتیب پست هایی با طول های مختلف.
سایت های تجارت الکترونیک: نمایش محصولات با ابعاد مختلف.
چگونه کار می کند
طرح‌بندی‌های Masonry اغلب با استفاده از کتابخانه‌های CSS Grid یا JavaScript مانند Masonry.js پیاده‌سازی می‌شوند. در اینجا، ما بر روی رویکرد CSS Grid تمرکز خواهیم کرد.
نحوه ایجاد یک طرح بنایی
مرحله 1: پروژه خود را تنظیم کنید
ایجاد پوشه پروژه: یک پوشه برای پروژه خود در رایانه خود ایجاد کنید.
ایجاد فایل های HTML و CSS: در داخل پوشه پروژه، دو فایل ایجاد کنید: index.html و styles.css .
Masonry/ ├── index.html └── styles.cssمرحله 2: HTML را بنویسید
از یک ویرایشگر متن مانند Visual Studio Code، Sublime Text یا هر ویرایشگر دیگری که ترجیح می دهید استفاده کنید.
ساختار اصلی یک سند HTML را با فشار دادن Shift+!
عنوان را از Document به "CSS Masonry Layout" تغییر دهید
در زیر عنوان، فایل styles.css خود را مانند شکل زیر پیوند دهید:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Masonry Layout</title> /** Link styles.css **/ <link rel="stylesheet" href="styles.css"> </head> <body> </body> </html>
پس از تنظیم ساختار HTML خود، بخش‌های مختلف طرح‌بندی خود را در ناحیه بدنه ایجاد کنید.
<div class="masonry"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> <div class="item item4">Item 4</div> <div class="item item5">Item 5</div> <div class="item item6">Item 6</div> <div class="item item7">Item 7</div> <div class="item item8">Item 8</div> <div class="item item9">Item 9</div> <div class="item item10">Item 10</div> </div> <div class="masonry"> ظرفی برای چیدمان سنگ تراشی ما است. ما از CSS Grid برای ایجاد افکت سنگ تراشی در داخل این ظرف استفاده می کنیم.
<div class="item item1">Item 1</div> تا <div class="item item10">Item 10</div> موارد منفرد (یا جعبه‌های) داخل طرح‌بندی سنگ‌تراشی ما هستند. هر آیتم دارای یک کلاس از item برای استایل یکنواخت و یک کلاس خاص (به عنوان مثال: item1 ، item2 ، و غیره) برای اعمال سبک های منحصر به فرد - مانند ارتفاع ها و رنگ های مختلف - برای هر آیتم است.
تفکیک کلاس های CSS:
item : از این کلاس برای استایل دادن به همه آیتم ها به صورت یکنواخت استفاده می شود. رنگ پس زمینه، بالشتک، اندازه جعبه، سایه جعبه، شعاع حاشیه، و انتقال آیتم ها را تنظیم می کند.
item1 to item10 : از این کلاس ها برای تنظیم سبک های خاص برای هر آیتم استفاده می شود. برای مثال، item1 ممکن است ارتفاع و رنگ پس زمینه متفاوتی نسبت به item2 داشته باشد و غیره. این کلاس ها در CSS برای اعمال سبک های خاص استفاده خواهند شد.
مرحله 3: با CSS استایل کنید
styles.css باز کنید در یک ویرایشگر متن: از همان ویرایشگر متن برای باز کردن فایل CSS خود استفاده کنید.
چند سبک اولیه برای body و ظرف masonry اضافه کنید.
body { font-family: Arial, sans-serif; background-color: #f0f0f0; padding: 20px; margin: 0; } .masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 10px; gap: 20px; }این یعنی چی:
body فونت، رنگ پس‌زمینه، padding را تنظیم می‌کند و حاشیه پیش‌فرض را حذف می‌کند.
.masonry از CSS Grid برای ایجاد یک طرح پاسخگو با ستون هایی که حداقل 200px عرض دارند استفاده می کند و به طور خودکار فضای موجود را پر می کند. ردیف‌ها دارای ارتفاع پایه 10px هستند و بین موارد فاصله 20px وجود دارد.
برای موارد داخل طرح سنگ تراشی سبک اضافه کنید.
.item { background-color: #ffffff; padding: 20px; box-sizing: border-box; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 8px; transition: transform 0.3s; display: flex; align-items: center; justify-content: center; font-size: 1.2em; color: #fff; } .item:hover { transform: translateY(-10px); }معنی بالا چیست:
.item یک پس‌زمینه سفید، بالشتک، سایه جعبه برای ارتفاع، گوشه‌های گرد و افکت شناور را برای کمی بلند کردن مورد تنظیم می‌کند. display: flex محتوا را در مرکز قرار می دهد.
.item:hover وقتی آیتم روی ماوس قرار می گیرد، جلوه تبدیل اضافه می کند.
ابعاد و رنگ های خاصی را با تعریف سبک های خاص برای هر آیتم تنظیم کنید تا ارتفاع و رنگ پس زمینه متفاوتی به آنها بدهید.
.item1 { grid-row: span 15; background-color: #ff6f61; } .item2 { grid-row: span 20; background-color: #6b5b95; } .item3 { grid-row: span 10; background-color: #88b04b; } .item4 { grid-row: span 25; background-color: #d65076; } .item5 { grid-row: span 30; background-color: #ffb347; } .item6 { grid-row: span 15; background-color: #45b8ac; } .item7 { grid-row: span 20; background-color: #e94b3c; } .item8 { grid-row: span 10; background-color: #6c5b7b; } .item9 { grid-row: span 25; background-color: #00a86b; } .item10 { grid-row: span 30; background-color: #b565a7;}هر کلاس آیتم (item1.، .item2، و غیره) تعداد ردیف هایی را که در آن قرار می گیرد (سطری شبکه: span X;) تعیین می کند و یک رنگ پس زمینه منحصر به فرد را اختصاص می دهد.
مرحله 4: طرح بندی خود را مشاهده کنید
index.html را در یک مرورگر وب باز کنید تا طرح بنایی را ببینید.
می توانید موارد بیشتری را اضافه کنید، رنگ ها را تغییر دهید یا اندازه ها را متناسب با نیازهای طراحی خود تنظیم کنید. در زیر طرحی که ما ایجاد کردیم آمده است.
همه اش را بگذار کنار هم
فایل index.html باید به شکل زیر باشد:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Masonry Layout</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="masonry"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> <div class="item item4">Item 4</div> <div class="item item5">Item 5</div> <div class="item item6">Item 6</div> <div class="item item7">Item 7</div> <div class="item item8">Item 8</div> <div class="item item9">Item 9</div> <div class="item item10">Item 10</div> </div> </body> </html> فایل styles.css به شکل زیر خواهد بود:
body { font-family: Arial, sans-serif; background-color: #f0f0f0; padding: 20px; margin: 0; } .masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 10px; gap: 20px; } .item { background-color: #ffffff; padding: 20px; box-sizing: border-box; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 8px; transition: transform 0.3s; display: flex; align-items: center; justify-content: center; font-size: 1.2em; color: #fff; } .item:hover { transform: translateY(-10px); } /* Specific dimensions and colors for each item */ .item1 { grid-row: span 15; background-color: #ff6f61; } .item2 { grid-row: span 20; background-color: #6b5b95; } .item3 { grid-row: span 10; background-color: #88b04b; } .item4 { grid-row: span 25; background-color: #d65076; } .item5 { grid-row: span 30; background-color: #ffb347; } .item6 { grid-row: span 15; background-color: #45b8ac; } .item7 { grid-row: span 20; background-color: #e94b3c; } .item8 { grid-row: span 10; background-color: #6c5b7b; } .item9 { grid-row: span 25; background-color: #00a86b; } .item10 { grid-row: span 30; background-color: #b565a7; }خلاصه
چیدمان سنگ تراشی روشی موثر برای نمایش محتوا با ارتفاع های مختلف در ساختاری شبکه مانند بدون شکاف های عمودی بزرگ است که آن را برای گالری های تصاویر، وبلاگ ها و نمونه کارها ایده آل می کند.
با استفاده از CSS Grid، می‌توانید یک چیدمان بنایی واکنش‌گرا و جذاب با حداقل کد ایجاد کنید.
برچسب‌ها
|
ارسال نظر