آموزش طراحی سایت - 7 راه قرار دادن المان توسط لایه گرید CSS

در این مقاله آموزش طراحی سایت می خواهیم درخصوص چگونگی اضافه کردن المان با استفاده از لایه های گرید CSS را آموزش دهیم.

تمرکز اصلی ما در این مقاله بیشتر بر روی قراردهی المان با استفاده از گرید CSS است. اگر قصد انجام یک آموزش طراحی سایت حرفه ای دارید، بهتر است که هرروز نسبت به تکنولوژی های جدیدی که وارد این حوزه می شود، اطلاعات کسب کنید.

پشتیبانی ضعیف برای لایه گرید در طراحی وب سایت

پشتیبانی مرورگرها از لایه های گرید خیلی ضعیف است. هیچ کدام از مرورگرها به صورت پیش فرض از گریدها پشتیبانی نمی کنند و IE فقط دستورات قدیمی را مورد پشتیبانی قرار می دهد.

برای اینکه بتوانید از نکات گفته شده در این مقاله آموزشی طراحی سایت به درستی استفاده کنید، بهتر است که فلگ "Experimental Web Platform features" در کروم و فلگ “layout.css.grid.enabled” را در فایرفاکس فعال کنید.

هفت راه قرار دادن المان با استفاده از لایه گرید CSS در طراحی سایت

1.همه چیز را در خصوصیات جدانشدنی و تک مشخص کنید

این متد کمی طولانی می باشد اما درک و فهمیدن آن آسان است. حدهای چهارطرف هر المان با استفاده از خصوصیات /grid-column-startgrid-column-end و grid-row-start/grid-row-end تعیین می شود. المان فقط می خواهد یک ستون یا ردیف محدود می کند، کافی است که فقط خصوصیت –end را حذف نمایید.

در دموی شکل زیر، ما المان A را با استفاده از CSS در ردیف و ستون دوم قرار دادیم:

}a.

  ;grid-column-start: 2

 ; grid-column-end: 3

;  grid-row-start: 2

  ;grid-row-end: 3

{

که البته می توانیم به صورت زیر هم بنویسیم:

}.a

 ; grid-column-start: 2

  ;grid-row-start: 2

{

2.استفاده از grid-row و grid-column

در دستور قبلی آموزش طراحی سایت ما لازم بود که چهار خصوصیات مختلف برای تعیین مکان یک المان تک به کار ببریم. ما می توانیم به جای استفاده از چهار خصوصیات، از دو خصوصیت grid-row و grid-column استفاده کنیم.  این دوخصوصیت را می توان با دو مقدار که توسط یک اسلش(/) جدا می شوند، تعیین کرد. مقدار اول خط شروع و مقدار دوم خط پایان را تعیین می کند.

قالب کد این دستور به صورت زیر است:

}selector. 

 ; grid-row: row-start / row-end

  ;grid-column: col-start / col-end

{

برای مثال برای مکان یابی المان c به صورت زیر عمل می کنیم:

}c.

  ;grid-row: 2 / 4

  ;grid-column: 2 / 4

{

3.استفاده از grid-area

به صورت تکنیکی ما از این دستور در آموزش طراحی سایت برای پوشش حوزه خاصی از صفحه وب استفاده می کنیم. مرزهای این مقدار، توسط مقادیری که ما برای grid line ایجاد کرده ایم، تعیین می شود. همه این مقادیر را می توان با استفاده از خصوصیت grid-area تعیین کرد.

قالب دستور CSS آن به صورت زیر است:

}selector. 

  ;grid-area: row-start / col-start / row-end / col-end

{

دو مقدار اول، موقعیت بالا-چپ را نشان می دهند و دو مقدار بعدی موقعیت پایین-راست المان را نشان می دهند.

برای مثال، برای تعیین موقعیت المان c می توانیم به صورت زیر کد آن را بنویسیم:

}c.

  ;grid-area: 2 / 2 / 4 / 4

{

4.استفاده از کلمه span

به جای مقدار پایانی می توانید از دستور span برای تعیین تعداد ستون یا ردیف تعیین کنید.

قالب دستوری آن به صورت زیر است:

}selector .

  ;grid-row: row-start / span row-span-value

 ; grid-column: col-start / span col-span-value

{

البته اگر المان شما فقط یک ردیف یا ستون را محدود می کند، می توانید از به کار بردن دستور span برای مقدار دهی پایانی صرف نظر کنید.

برای مثال المان c را در قسمت بالا-چپ می توانیم به صورت دستور زیر بنویسیم:

}c.

  ;grid-row: 1 / span 2

 ;grid-column: 1 / span 2

{

5.استفاده از خطوط نام گذاری شده

تا اینجا ما از اعداد برای تعیین خطوط گرید استفاده می کردیم و استفاده از این اعداد در هنگام با لایه های ساده، آسان است. اما اگر قصد جای گذاری چندین المان را داشته باشید، مساله کمی پیچیده می شود. این تکنیک در طراحی سایت های رسپانسیو با بوت استرپ بیشتر از همه استفاده می گردد.

در این مورد، بیشتر عناصر صفحه وب شما تحت یک گروه خاصی قرار می گیرند. برای مثال هدر ممکن است دو ستون c1 تا c2 و دو ردیف r1 تا r2 را دربرگیرد. برای استفاده راحت تر بهتر است که همه این خطوط نام گذاری شوند تا بتوان المان ها را بهتر در آن قرار داد.

این مورد با یک مثال خیلی ساده سعی می کنیم توضیح دهیم.

اول از همه باید CSS مربوط به گرید container را مانند دستور زیر بهینه نماییم.

}container.

  ;display: grid

  ;grid-gap: 10px

  ;[grid-template-columns: [head-col-start] 180px [content-col-start] 180px [content-col-mid] 180px [head-col-end

  ;[grid-template-rows: [head-row-start] auto [head-row-end] auto [content-row-end] auto [footer-row-end

{

کاری که ما باید انجام بدهیم این است که هر خط را بسته به نوع محتوایی که می خواهیم در آن قرار دهیم، نام گذاری کنیم. بهتر است از نام هایی استفاده کنیم که چشم اندازی از مکان عناصر مختلف به ما بدهد. در این مثال عنصر هدر کل ستون ها را در بر می گیرد، بنابراین بهتر است که از نام "head-col-start" و "head-col-end" برای تعیین نخستین و آخرین خط ستونی استفاده کنیم. به همین ترتیب بقیه خطوط را نیز می توان نام گذاری کرد.

}header.

  ;grid-column: head-col-start / head-col-end

;grid-row: head-row-start / head-row-end

{

}sidebar.

  ;grid-column: head-col-start / content-col-start

  ;grid-row: head-row-end / content-row-end

{

}content.

  ;grid-column: content-col-start / head-col-end

  ;grid-row: head-row-end / content-row-end

{

}footer.

;grid-column: head-col-start / head-col-end

 ; grid-row: content-row-end / footer-row-end

{

6.استفاده از خطوط نام گذاری شده با نام رایج و کلمه کلیدی span

در بخش قبلی همه خط ها دارای نام های متفاوتی در شروع، وسط و پایان خود بودند. برای مثال "content-col-start" و "content-col-mid" برای شروع و وسط بخش content استفاده می شود اما قصد اضافه کردن دو ردیف در وسط این بخش را داشته باشید، باید از نام های خطوط اضافی مانند "content-col-mid-one" و "content-col-mid-two" استفاده کنیم.

برای اینکه تعداد خطوط کد نویسی خود را کاهش دهید، می توانیم از نام عمومی content  برای همه خطوط گرید استفاده کنید و سپس از کلمه span برای تعیین مقدار خطوطی که این عناصر محدود می کنند را تعیین کنید. همچنین می توان از عدد برای تعیین تعداد ردیف و ستون محدود شده استفاده کرد.

قالب کلی و بقیه دستورات آن به صورت زیر نوشته می شود:

}selector.

  ;grid-row: row-name row-start-number/ row-name row-end-number

 ; grid-column: col-name col-start-number / span col-name col-to-span

{

دستور بعدی

}container.

  ;display: grid

 ;grid-gap: 10px

 ; grid-template-columns: [one-eighty] 180px [one-eighty] 180px [one-eighty] 180px

 ; grid-template-rows: [head-row] auto [content-row] auto [content-row] auto [content-row] auto [footer-row] auto

{

و دستور CSS:

}header.

  ;grid-column: one-eighty 1 / one-eighty 4

  ;grid-row: head-row / content-row 1

{

}sidebar.

  ;grid-column: one-eighty 1 / one-eighty 2

  ;grid-row: content-row 1 / content-row 2

{

}advert .

  ;grid-column: one-eighty 1 / one-eighty 2

  ;grid-row: content-row 2 / content-row 3

{

}content.

 ; grid-column: one-eighty 2 / one-eighty 4

  ;grid-row: content-row 1 / span content-row 2

{

}footer.

  ;grid-column: one-eighty 1 / span one-eighty 3

 ; grid-row: content-row 3 / footer-row

{

7.استفاده از محیط های گرید نام گذاری شده

به جای استفاده از خطوط ما می توانیم هر المان را با استفاده از تعیین نام به محیط های مختلف، جای گذاری کنیم. فقط کافی است که تغییراتی را در CSS تعیین کنیم.

}wrapper.

 ; display: grid

  ;grid-gap: 10px

 ; grid-template-columns: 180px  180px  180px

 " grid-template-areas:  "header  header   header

                        "content content  advert"

                        "content content  ......"

                      ;  "footer  footer   footer"

{

نقطه تک (.) یا مجموعه ای از این نقاط باعث ایجاد فضای خالی می گردد. همه این رشته ها نیاز دارند که تعداد ستون یکسانی داشته باشند. برای همین ما باید از نقطه به جای خالی قرار دادن این مکان استفاده کنیم.

}header.

 ; grid-area: header

{

}content.

 ;grid-area: content

{

}advert.

 ; grid-area: advert

{

}footer.

 ; grid-area: footer

{

اگر می خواهید که طراحی وب سایت خود را به صورت حرفه ای انجام دهید، توصیه می شود که از این هفت گرید CSS حتما استفاده کنید.