דילוג לתוכן הראשי
Swiper|Fancybox|Outside the Box|HorizonX|Style Guide|מיפוי לפי תוכן|BETA|
חזרה ל-Outside the Box4.1 Photo and centred copy4.2 Offset columns4.3 Head in the step4.4 Zigzag that touches4.5 Text between two pictures4.6 A wide quote4.7 The text at the start4.8 Four columns4.9 Uneven grids

Asymmetry

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

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

/* a picture to the screen edge, the copy in the middle of the other half: no container */
<section className="grid uk-m:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">

/* two columns, the second half a step lower: every item spans two rows, the 2nd is placed */
<div className="grid gap-12 uk-m:grid-cols-2 uk-m:*:row-span-2 uk-m:*:nth-2:col-start-2 uk-m:*:nth-2:row-start-2">

/* a row across the screen, the text one of its columns, pictures in the others */
<section className="grid grid-cols-2 gap-x-3 gap-y-10 uk-m:grid-cols-[3fr_6fr_3fr] uk-m:items-center">

/* a repeating pattern of spans: nth-child on the grid, the children stay plain */
<div className="grid gap-(--uk-grid-gutter) md:grid-cols-3 md:*:nth-[5n+1]:col-span-2 md:*:nth-[5n+3]:col-span-full">

1 · Photo and centred copy👻 Snippet

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

מטבח מעץ אלון עם חזיתות בלי ידיות
מזיגת קפה ליד החלון

בית שמתאים לחיים האמיתיים שלכם

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

איך עובדים איתנו

2 · Offset columns👻 Snippet

ארבעה שירותים בשתי עמודות, השנייה חצי צעד למטה. כל כרטיס בגובה שתי שורות (row-span-2), והשני מתחיל בשורה 2 (row-start-2), אז העמודה שלו יורדת בחצי כרטיס.

תסרוקות

אסוף, חצי אסוף או גלים, מתואמות לאיפור.

3 · Head in the step👻 Snippet

כותרת הסקשן בחצי הצעד הריק שבראש העמודה השנייה.

השירותים

איפור ושיער לכל אירוע

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

תסרוקות

אסוף, חצי אסוף או גלים, מתואמות לאיפור.

4 · Zigzag that touches👻 Snippet

תמונות ומלל כפריטים נפרדים, התמונות נוגעות בפינה.

צלם חתונות

נעים להכיר, דניאל

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

עוד עליי
דניאל, צלם חתונות
זוג הולך באור של שעת ערב

למי זה מתאים

  • רגעים אמיתיים

    לזוג שרוצה לזכור איך הרגיש, לא רק איך נראה.

  • בלי פוזות

    הכוונה קצרה כשצריך, ושאר היום פשוט קורה.

  • ליווי רגוע

    תיאום מראש, לו״ז ברור, ואין על מה לדאוג ביום עצמו.

5 · Text between two pictures👻 Snippet

שורה לרוחב המסך, המלל עמודה אחת באמצע: 3fr 6fr 3fr. התמונה הראשונה למעלה, האחרונה למטה. בטלפון המלל ראשון והתמונות שתיים בשורה.

קיר ספרייה מאגוז עם סולם

בתים שנעים לחיות בהם, כל יום

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

לשירותים
שולחן אוכל מעץ אש

6 · A wide quote👻 Snippet

2fr 8fr 2fr: המלל רחב והצדדים צרים.

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

7 · The text at the start👻 Snippet

1fr 5fr 4fr 3fr: עמודה ריקה ראשונה, המלל בשנייה, כך שהוא לא נצמד לקצה המסך.

נגרות בהזמנה אישית

רהיטים מעץ מלא, למידות של הבית

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

לעבודות
מטבח מעץ אלון עם חזיתות בלי ידיות
חדר ארונות מעץ אלון

8 · Four columns👻 Snippet

3fr 3fr 3fr 1fr: זוג תמונות שיוצא מקצה המסך, והאחרונה קצת נמוכה יותר.

טבעות על כריתידיים אוחזות מתחת לחופה
לחולמים

צילום חתונות

אחרי שהאירוע נגמר, התמונות הן מה שנשאר מהיום הזה.

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

שולחן ערוך באירוע
צללית של זוג בשקיעה
ולאוהבים

9 · Uneven grids👻 Snippet

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

A · a full row every 5: wide | narrow, full, narrow | wide

1
2
3
4
5

B · zigzag every 4, no full row

1
2
3
4
5
6
7
8

C · a full row, then two halves; a half alone at the end takes the row

1
2
3
4
5

D · bento: tall | two stacked | tall

1
2
3
4

גריד שהעמודות שלו לא שוות, לא מתחילות באותו קו, או יוצאות מהקונטיינר עד קצה המסך. אין קלאס ואין קומפוננטה: היחס, ה-span והמיקום כתובים בטייל על הגריד עצמו, והרווח הוא הטוקן של האתר. המנוע היחיד מתחת הוא expand-to-edge.

👻 Snippetמעתיקים את הקוד מהדוגמה

Tailwind on the grid: app/docs/outside-the-box/asymmetry/page.tsx