CSS3 Grid Layout: עימוד טבלאי באפליקציות Windows 8

16 בספטמבר 2012

no comments

css3דפים רבים באינטרנט וכן אפליקציות רבות מעוצבים ע”י חלוקה לגריד עם עמודות ושורות. בעת שימוש בטכנולוגיות Web עם HTML ו- CSS ניתן לעשות ע”י שימוש באלמנט <table>, אך לרוב זה לא מומלץ, והחלופה של עימוד עם <div> הוא טיפה יותר מסובך ופחות קריא. החל מ- CSS3, ניתן להשתמש בעימוד Grid המאפשר את הפשטות שבטבלאות, אך ע”י שימוש רק ב- CSS ובאופן קריא.

בפוסט זה ארחיב על עימוד Grid של CSS3, בו נעשה שימוש רחב באפליקציות Windows 8 שנכתבות עם HTML5 ו- JavaScript.

איך היינו עושים את זה פעם: עימוד עם טבלאות

בשנות ה- 90, אם רצינו לעמד דף בצורת טבלה, היינו משתמשים ב- HTML Tables. לדוגמא, אם היינו רוצים ליצור דף עם 3 עמודות, היינו כותבים את הקוד הבא:

<table height="100%">
  <tr>
    <td valign="top" width="300px" bgcolor="red">
      Left Column, Left Column, Left Column,
      Left Column, Left Column, Left Column,
      Left Column, Left Column, Left Column
    </td>
    <td valign="top" bgcolor="green">
      Middle Column, Middle Column, Middle Column,
      Middle Column, Middle Column, Middle Column,
      Middle Column, Middle Column, Middle Column
    </td>
    <td valign="top" width="300px" bgcolor="blue">
      Right Column, Right Column, Right Column,
      Right Column, Right Column, Right Column,
      Right Column, Right Column, Right Column
    </td>
  </tr>
</table>

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

CSS3 Grid Layout עימוד טבלאי

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

הפיתרון המקובל כיום: שימוש ב- CSS

הפיתרון הנפוץ הוא להשתמש ב- <div> לצורך חלוקת האזורים השונים בדף, וע”י CSS לעמד אותם כעמודות זו לצד זו.

<style type="text/css">
#container {
  min-width: 800px;
}
 
#leftColumn {
  float: left;
  width: 300px;
  height: 100%;
  background-color:red;
}
 
#middleColumn {
  background-color:green;
  height: 100%;
}
 
#rightColumn {
  float: right;
  width: 300px;
  height: 100%;
  background-color:blue;
}
</style>
 
<div id="container">
  <div id="rightColumn">
    Right Column, Right Column, Right Column,
    Right Column, Right Column, Right Column,
    Right Column, Right Column, Right Column
  </div>
  <div id="leftColumn">
    Left Column, Left Column, Left Column,
    Left Column, Left Column, Left Column,
    Left Column, Left Column, Left Column
  </div>
  <div id="middleColumn">
    Middle Column, Middle Column, Middle Column,
    Middle Column, Middle Column, Middle Column,
    Middle Column, Middle Column, Middle Column
  </div>
</div>

הדף הזה כולל <div> בשם container שמכיל את 3 האיזורים: leftColumn, middleColumn, ו- rightColumn. אלמנט ה- leftColumn מוצמד לשמאל ע”י שימוש ב- float, האלמנט rightColumn מוצמד לימין והאמצעי  לא מוצמד לשום כיוון ויופיע באמצע.

CSS3 Grid Layout עימוד טבלאי

אין ספק שהשימוש באלמנטי <div> ו- CSS הוא מורכב יותר מאשר שימוש בטבלאות, ודורש הבנה ב- floats ו- positioning.

הכירות עם CSS3 Grid Layout

CSS Grid Layout הוא סטנדרט חדש של W3C הנותן את כל היתרונות של שימוש ב- HTML Tables מבלי להשתמש בהן, ומאפשר להגדיר עימוד טבלאי ע”י שימוש בחוקי CSS פשוטים.

נכון לכתיבת הפוסט הזה, התקן נמצא עדיין בשלב Working Draft ולכן משולב רק ב- Internet Explorer 10. כיוון שמדובר באותו מנוע תצוגה המציג אפליקציות מודרניות ל- Windows 8 שנכתבות ב- HTML5 ו- JavaScript, זה המקום הטבעי בו נעשה שימוש בשיטת העימוד הזאת.

נתחיל מתוכן הדף – אותם אלמנטי <div> שראינו קודם. container המכיל 3 איזורים שונים:

<div id="container">
  <div id="leftColumn">
      Left Column, Left Column, Left Column,
      Left Column, Left Column, Left Column,
      Left Column, Left Column, Left Column
  </div>
  <div id="middleColumn">
    Middle Column, Middle Column, Middle Column,
    Middle Column, Middle Column, Middle Column,
    Middle Column, Middle Column, Middle Column
  </div>
  <div id="rightColumn">
    Right Column, Right Column, Right Column,
    Right Column, Right Column, Right Column,
    Right Column, Right Column, Right Column
  </div>
</div>

בשלב הראשון נקבע כי אלמנט ה- container יהיה מסוג Grid עם 3 עמודות ושורה אחת.

<style type="text/css">
  #container {
    display: -ms-grid;
    -ms-grid-columns: 300px auto 300px;
    -ms-grid-rows: 100%;
  }
</style>

בדוגמא הנ”ל קבענו את מאפיין ה- display להיות –ms-grid (נשים לב לקידמות ms- כיוון שהתקן נמצא עדיין בשלב לא סופי), וכן נקבע את המאפיינים ms-grid-columns ו- ms-grid-rows לערכים המתאימים. נשים לב שהגדרת כמות ורוחב העמודות נעשה ע”י ציון הרוחב של העמודות בזה אחר זה: 3 עמודות, בהן הראשונה והאחרונה ברוחב 300 פיקסלים והאמצעית תקבע באופן אוטומטי.

-ms-grid-columns: 300px auto 300px;

באותה צורה הגדרנו שתהיה רק שורה אחת, שתתפוס את כל גובה הגריד.

-ms-grid-rows: 100%;

כעת, נשבץ את אלמנטי ה- <div> הבנים לעמודות שנרצה:

<style type="text/css">
  #container {
    display: -ms-grid;
    -ms-grid-columns: 300px auto 300px;
    -ms-grid-rows: 100%;
  }
      
  #leftColumn {
    -ms-grid-column: 1;
    background-color: red;
  }
      
  #middleColumn {
    -ms-grid-column: 2;
    background-color: green;
  }
      
  #rightColumn {
    -ms-grid-column: 3;
    background-color: blue;
  }
</style>

לכל איזור, הגדרנו את מאפיין ה- ms-grid-column בו הוא ישובץ, כאשר הספירה מתחילה מ- 1.

בסופו של דבר נקבל את התוצאה הבאה:

CSS3 Grid Layout עימוד טבלאי

דוגמא מורכבת: טבלה עם שורות ועמודות מרובות

כעת, ננסה ליצור עימוד המתאים לדף טיפוסי באפליקציה:

CSS3 Grid Layout עימוד טבלאי

דף זה כולל שורת header, איזור תוכן ואיזור footer. איזור התוכן כולל 3 עמודות.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #container {
        height: 100%;
        padding: 0px;
        margin: 0px;
      }
      
      #container {
        display: -ms-grid;
        -ms-grid-columns: 300px auto 300px;
        -ms-grid-rows: 100px 1fr 100px;
      }
      
      #header {
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        -ms-grid-row: 1;
        background-color: yellow;
      }
      
      #leftColumn {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        background-color:red;
      }
      
      #middleColumn {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
        background-color:green;
      }
      
      #rightColumn {
        -ms-grid-column: 3;
        -ms-grid-row: 2;
        background-color:blue;
      }
      
      #footer {
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        -ms-grid-row: 3;
        background-color: orange;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <div id="header">
        Header, Header, Header
      </div>
      <div id="leftColumn">
        Left Column, Left Column, Left Column,
        Left Column, Left Column, Left Column,
        Left Column, Left Column, Left Column
      </div>
      <div id="middleColumn">
        Middle Column, Middle Column, Middle Column,
        Middle Column, Middle Column, Middle Column,
        Middle Column, Middle Column, Middle Column
      </div>
      <div id="rightColumn">
        Right Column, Right Column, Right Column,
        Right Column, Right Column, Right Column,
        Right Column, Right Column, Right Column
      </div>
      <div id="footer">
        Footer, Footer, Footer
      </div>
    </div>
  </body>
</html>

בדף הנ”ל אני יוצא גריד עם 3 שורות ו- 3 עמודות, ע”י שימוש בחוק ה- CSS הבא:

#container {
  display: -ms-grid;
  -ms-grid-columns: 300px auto 300px;
  -ms-grid-rows: 100px 1fr 100px;
}

ה- Header מוגדר בצורה הבאה, והוא ממוקם בשורה הראשונה ומתפרש ע”פ 3 עמודות:
#header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  background-color: yellow;
}

שימו לב לשימוש במאפיין ms-grid-column-span כדי להגדיר על כמה עמודות מתפרש ה- header. באופן דומה ניתן להשתמש בהגדרה ms-grid-row-span כדי להגדיר על כמה שורות מתפרש איזור.

שימוש ביחידות fr וחלוקה יחסית של גודל אזור בגריד

יחידות fr (קיצור של fraction) מאפשרות לחלק עמודות / שורות בגריד לפי יחס ביניהן. למשל, אם נרצה ליצור גריד עם 4 עמודות: הראשונה, ברוחב 200 פיקסלים ו- 3 הנותרות מתחלקות בשאר השטח כך שהעמודה השניה ברוחב פי 2 הרוחב של כל אחת מהעמודות השלישית והרביעית, נוכל לעשות זאת באופן הבא:

#container {
  display: -ms-grid;
  -ms-grid-columns: 200px 2fr 1fr 1fr;
  -ms-grid-rows: 1fr;
}

התוצאה תיראה כך:

CSS3 Grid Layout עימוד טבלאי

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

CSS3 Grid Layout עימוד טבלאי

סיכום

CSS3 Grid Layout הוא תקן W3C המאפשר ליצור עימוד טבלאי לדפי אינטרנט בצורה קלה וע”י שימוש בחוקי CSS בלבד. הכירות עם תקן זה חיונית למפתחי אפליקציות ל- Windows 8 עם HTML5 ו- JavaScript.

Add comment
facebook linkedin twitter email