קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
לפריסה הקלאסית הזו של אפרפר קדוש אפשר להוסיף כותרת עליונה, כותרת תחתונה, סרגל צד שמאלי, סרגל צד שמאלי ותוכן ראשי. היא דומה לפריסה הקודמת, אבל עכשיו היא כוללת סרגלי צד!
כדי לכתוב את כל הרשת באמצעות שורת קוד אחת, צריך להשתמש במאפיין grid-template. כך אפשר להגדיר גם את השורות וגם את העמודות בו-זמנית.
צמד המאפיין והערך: grid-template: auto 1fr auto / auto 1fr auto. הקו הנטוי בין הרשימה הראשונה והשנייה שמופרדים ברווחים הוא המעבר בין השורות לעמודות.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
כמו בדוגמה האחרונה, שבה הכותרת העליונה והתחתונה כלל תוכן בגודל אוטומטי, כאן סרגלי הצד השמאלי והימני נקבעים באופן אוטומטי על סמך הגודל הפנימי של ילדיהם. עם זאת, הפעם מדובר בגודל אופקי (רוחב) במקום אנכי (גובה).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"חסרים לי מידע או פרטים"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"התוכן מורכב מדי או עם יותר מדי שלבים"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"התוכן לא עדכני"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"בעיה בתרגום"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"בעיה בדוגמאות/בקוד"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"סיבה אחרת"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"התוכן קל להבנה"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"התוכן עזר לי לפתור בעיה"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"סיבה אחרת"
}]
{"lastModified": "\u05e2\u05d3\u05db\u05d5\u05df \u05d0\u05d7\u05e8\u05d5\u05df: 2023-10-25 (\u05e9\u05e2\u05d5\u05df UTC)."}
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2023-10-25 (שעון UTC)."],[],[]]