با تعداد انگشت شماری از سبک ها، می توانید از این طرح بندی جذاب و انعطاف پذیر برای بسیاری از انواع محتوای صفحه استفاده کنید.
CSS برای طراحی طرح‌بندی‌های جذاب و پاسخگو، انعطاف‌پذیری زیادی را برای شما فراهم می‌کند. یک طرح بندی به سبک مجله، محتوای متن و تصویر ترکیبی را در قالبی جذاب و چشم نواز سازماندهی می کند و آن را به یک انتخاب محبوب تبدیل می کند.
CSS Grid ابزارها و کنترل دقیقی را که برای دستیابی به این طرح‌بندی نیاز دارید در اختیار شما قرار می‌دهد، بنابراین یک تکنیک عالی برای یادگیری است.
چیدمان به سبک مجله چیست؟
طرح‌بندی‌های سبک مجله از ساختار شبکه‌ای برای چیدمان محتوا در ستون‌ها و ردیف‌ها استفاده می‌کنند.
آنها برای نمایش انواع مختلف محتوا مانند مقالات، تصاویر و تبلیغات به روشی سازمان یافته و جذاب عالی هستند.
درک CSS Grid
CSS Grid یک ابزار چیدمان قوی است که به شما امکان می دهد عناصر را در فضای دو بعدی قرار دهید و ایجاد ستون ها و ردیف ها را آسان می کند.
با این نوع چیدمان، دو جزء اصلی وارد بازی می شوند: ظرف شبکه، که مسئول تعریف ساختار شبکه است، و موارد شبکه، که عناصر فرزند ظرف هستند.
در اینجا یک مثال ساده از نحوه استفاده از CSS Grid برای ایجاد یک شبکه 3×3 آورده شده است:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
این کد یک ظرف شبکه با سه ستون با عرض مساوی و یک شکاف 20 پیکسلی بین آیتم ها تعریف می کند. نتیجه این است:
تنظیم ساختار HTML
برای یک طرح بندی به سبک مجله، به یک سند HTML با ساختار مناسب نیاز دارید. استفاده از عناصر معنایی را برای سازماندهی محتوای خود مانند
<body>
<section class="magazine-layout">
<article>
<img src="https://source.unsplash.com/random/?city,night" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?city,day" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?animal" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?book" />
<p>Some Article Title</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?food" />
<p>Some Article Title</p>
</article>
</section>
</body>
تعریف کانتینر شبکه
برای ایجاد یک شبکه برای طرح بندی به سبک مجله خود، کد CSS زیر را اضافه کنید:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
/* Defines the grid container */
display: grid;
/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
این CSS مشخص می کند که عنصر کانتینر، .magazine-layout، یک ظرف شبکه ای است که از نمایش اعلامیه استفاده می کند: grid.
ویژگی های grid-template-columns و grid-template-rows از ترکیب تکرار، تنظیم خودکار و minmax استفاده می کنند. اینها تضمین می کنند که عرض ستون و ارتفاع ردیف حداقل 250 پیکسل باشد و تا آنجا که ممکن است آیتم ها در هر کدام جای می گیرند.
قرار دادن اقلام شبکه
اکنون هر مقاله و محتویات آن را برای ایجاد عناصر جذاب به سبک بند انگشتی سبک دهید:
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}
.article img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.article p {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
در این مرحله، صفحه وب شما باید چیزی شبیه به زیر باشد:
ایجاد طرح‌بندی به سبک مجله
برای دستیابی به ظاهری واقعی به سبک مجله، سبک‌های CSS را اضافه کنید تا عناصر مقاله را به هر ترتیبی که می‌خواهید گسترش دهید:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
اکنون صفحه شما باید به شکل زیر باشد:
طراحی ریسپانسیو با شبکه CSS
یکی از مزایای CSS Grid پاسخگویی ذاتی آن است. می‌توانید از پرسش‌های رسانه برای تنظیم طرح‌بندی برای اندازه‌های مختلف صفحه استفاده کنید. مثلا:
/* Media query for screens up to 1100px */
@media screen and (max-width: 1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
}
.article:nth-child(5) {
grid-row: 3 / span 1;
}
}
/* Media query for screens up to 600px */
@media screen and (max-width: 600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
}
}
این پرسش‌های رسانه‌ای بین تعاریف طرح‌بندی چندگانه جابه‌جا می‌شوند تا با اندازه صفحه‌نمایش دستگاه مطابقت داشته باشند. طرح نهایی شما با اندازه های مختلف سازگار می شود:
تبدیل طرح‌بندی‌های خود با شبکه CSS
CSS Grid ابزاری انعطاف‌پذیر است که می‌توانید از آن برای ایجاد طرح‌بندی‌هایی به سبک مجله استفاده کنید که با اندازه‌های مختلف صفحه نمایش تنظیم می‌شوند. این به شما امکان می دهد ساختارهای شبکه را تعریف کنید، آیتم ها را قرار دهید و چیدمان ها را تنظیم کنید.
برای دستیابی به چیدمان کامل الهام گرفته از مجله برای وب سایت خود، پیکربندی های شبکه و سبک های مختلف را آزمایش کنید.