עם קומץ סגנונות, אתה יכול להשתמש בפריסה אטרקטיבית וגמישה זו עבור סוגים רבים של תוכן עמוד.

CSS מספק לך גמישות רבה לעיצוב פריסות מושכות ומגיבות. פריסה בסגנון מגזין מארגנת תוכן מעורב של טקסט ותמונה בפורמט מושך ומושך את העין, מה שהופך אותו לבחירה פופולרית.

CSS Grid נותן לך את הכלים והשליטה העדינה הדרושים לך כדי להשיג את הפריסה הזו, כך שזו טכניקה נהדרת ללמוד.

מהן פריסות בסגנון מגזין?

פריסות בסגנון מגזין משתמשות במבנה דמוי רשת כדי לסדר תוכן בעמודות ושורות.

הם מצוינים להצגת סוגים שונים של תוכן כמו מאמרים, תמונות ומודעות בצורה מאורגנת ומושכת.

הבנת CSS Grid

CSS Grid הוא כלי פריסה חזק המאפשר לך מיקום אלמנטים בחלל דו מימדי, מה שמקל על ליצור עמודות ושורות.

עם פריסה מסוג זה נכנסים לפעולה שני מרכיבים עיקריים: מיכל הרשת, האחראי על הגדרת מבנה הרשת, ופריטי הרשת, שהם הרכיבים הצאצאים של המיכל.

הנה דוגמה פשוטה לאופן שבו אתה יכול להשתמש ב-CSS Grid כדי ליצור רשת 3x3:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}

קוד זה מגדיר מיכל רשת עם שלוש עמודות ברוחב שווה ופער של 20 פיקסלים בין פריטים. הנה התוצאה:

instagram viewer

הגדרת מבנה HTML

לפריסה בסגנון מגזין, תזדקק למסמך HTML מובנה היטב. לשקול שימוש באלמנטים סמנטיים כדי לארגן את התוכן שלך כמו

ו
. הנה נקודת התחלה טובה:

<body>
<sectionclass="magazine-layout">
<article>
<imgsrc="https://source.unsplash.com/random/?city, night" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?city, day" />
<p>Some Article Titlep>
article>


<article>
<imgsrc="https://source.unsplash.com/random/?animal" />
<p>Some Article Titlep>
article>


<article>
<imgsrc="https://source.unsplash.com/random/?book" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?food" />
<p>Some Article Titlep>
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 זה מציין שרכיב ה-container, פריסת מגזין, הוא מיכל רשת המשתמש בהצהרה תצוגה: רשת.

המאפיינים grid-template-columns ו-grid-template-rows משתמשים בשילוב של חזור, התאמה אוטומטית, ו מינימום מקסימום. אלה מבטיחים שרוחב העמודות וגובה השורות יהיו לפחות 250 פיקסלים, וכמה שיותר פריטים מתאימים לכל אחד.

הצבת פריטי רשת

כעת סגננו כל מאמר ותכניו כדי ליצור אלמנטים אטרקטיביים בסגנון תמונות ממוזערות:

article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}
.articleimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.articlep {
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 הוא כלי גמיש שתוכל להשתמש בו כדי ליצור פריסות בסגנון מגזין המתאימות לגדלי מסך שונים. זה מאפשר לך להגדיר מבני רשת, למקם פריטים ולהתאים פריסות.

נסה עם תצורות רשת וסגנונות שונים כדי להשיג את הפריסה המושלמת בהשראת מגזין לאתר שלך.