فرادرسروش های قدیمی برای طراحی لی آوت با CSS — آموزش CSS (بخش سی و چهارم)
سیستم‌های گرید یکی از قابلیت‌های بسیار رایج در لی‌آوت‌های CSS محسوب می‌شوند. تا پیش از معرفی و آموزش CSS Grid این گرید‌ها با استفاده از float یا دیگر قابلیت‌های لی‌آوت پیاده‌سازی می‌شدند. در این روش لی‌آوت را می‌توان به صورت تعدادی ستون (مثلاً 4، 6 یا 12) تصور کرد که محتوا درون این ستون‌های خیالی جای می‌گیرد. در این مقاله به توضیح و بررسی روش های قدیمی برای طراحی لی آوت می‌پردازیم تا در صورت کار روی یک پروژه قدیمی با شیوه کار با آن آشنا باشید. برای مطالعه بخش قبلی این سری مقالات روی این لینک کلیک کنید: کوئری مدیا در CSS — آموزش CSS (بخش سی و سوم)
لی‌آوت و سیستم‌های گرید پیش از معرفی CSS Grid Layout
هر کسی که اندکی تجربه طراحی داشته باشد، وقتی متوجه میشود CSS تا همین اواخر هیچ سیستم گرید نداشته است، شگفت‌زده میشود. CSS به جای این سیستم‌های گرید از یک سری روش‌های غیر بهینه برای ایجاد طراحی‌های شبه شبکه‌ای استفاده می‌کرد. این روش‌ها اینک به نام روش‌های «قدیمی» (Legacy) یاد می‌شوند.
در پروژه‌های جدید در اغلب موارد از CSS Grid Layout به همراه یک یا چند روش مدرن دیگر لی‌آوت استفاده میشود تا هر نوع لی‌آوت خاص که مورد نظر است ساخته شود. با این حال ممکن است با «سیستم‌های گرید» (grid systems) ساخته شده با این روش‌های قدیمی نیز گاه به گاه مواجه شوید. از این رو، درک طرز کار آن‌ها و تفاوت‌هایشان با CSS Grid Layout حائز اهمیت است.
در این مقاله به توضیح طرز کار سیستم‌های گرید و فریمورک‌های گرید بر مبنای floats و flexbox می‌پردازیم. ما در بخش‌های قبلی این سری مقالات با Grid Layout آشنا شدیم و اکنون با در نظر گرفتن این روش‌های قدیمی متوجه خواهید شد که تا پیش از معرفی Grid Layout کار تا چه حد پیچیده بوده است. همچنین این دانش از روش‌های قدیمی به شما کمک می‌کند که کد fallback را برای مرورگرهایی که از روش‌های جدیدتر پشتیبانی نمی‌کنند، بنویسید و همچنین می‌توانید روی پروژه‌های قدیمی که از این نوع سیستم‌ها استفاده می‌کنند، کار کنید.
لازم به ذکر است که ما با بررسی این سیستم‌ها متوجه خواهیم شد که هیچ کدام از این روش‌های قدیمی عملاً یک گرید را چنان که می‌توان با استفاده از CSS Grid Layout ساخت، ایجاد نمی‌کنند. این روش‌های قدیمی با تعیین اندازه برای آیتم‌ها و تعیین موقعیت برای آن‌ها کاری می‌کنند که اجزای صفحه شبیه یک گرید یا شبکه به نظر بیایند.
یک لی‌آوت دو ستونی
کار خود را با ساده‌ترین مثال ممکن آغاز می‌کنیم که یک لی‌آوت دو ستونی است. شما نیز می‌توانید با ما همراه باشید و یک فایل به نام index.html روی رایانه خود ایجاد کرده و کد زیر را در آن قرار دهید و در ادامه کدهایی را که در بخش‌های زیر معرفی می‌شوند به بخش‌های مختلف فایل اضافه کنید. در انتهای این بخش می‌توانید یک نمونه از کد کامل و نمونه اجرایی مثال را مشاهده کنید.
فایل آغازین index.html
1
2<!DOCTYPE html>
3<html lang="en-US">
4 <head>
5 <meta charset="utf-8">
6 <title>My test page</title>
7 </head>
8 <body>
9 <p>This is my page</p>
10 </body>
11</html>قبل از هر چیز باید مقداری محتوا به ستون‌های خود اضافه کنیم. بنابراین هر آن چه را که هم اینک در بخش body فایل قرار دارد با محتوای زیر عوض کنید:
1<h1>2 column layout example</h1>
2<div>
3 <h2>First column</h2>
4 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
5</div>
6
7<div>
8 <h2>Second column</h2>
9 <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
10</div>هر کدام از ستون‌ها باید یک عنصر بیرونی داشته باشند که محتوایش را شامل میشود و امکان دست‌کاری یک‌باره آن را به ما می‌دهد. در این نمونه موردی ما از عنصر <div> استفاده کرده‌ایم، اما شما می‌توانید چیزی مانند <article>، <section> و <aside> را انتخاب کنید که از نظر معناشناختی مناسبتر باشد.
اکنون به CSS می‌پردازیم. قبل از هر چیز کد زیر را روی HTML اعمال کنید تا نوعی تنظیمات ابتدایی به دست آید:
1body {
2 width: 90%;
3 max-width: 900px;
4 margin: 0 auto;
5}به این ترتیب، بخش body، نود درصد از عرض ویوپورت را می‌گیرد تا این که عرضی به اندازه 900 پیکسل پیدا کند، که در این حالت در این عرش ثابت می‌ماند و خود را در مرکز ویوپورت قرار می‌دهد. به صورت پیش‌فرض فرزندان bost یعنی h1 و <div>-ها فضایی به اندازه 100% عرض body را اشغال می‌کنند. گر بخواهیم دو <div> در کنار همدیگر قرار گیرند، باید عرض‌هایشان را برابر با 100% یا کوچک‌تر از عرض عنصر والدشان تعیین کنیم تا بتوانند در کنار هم قرار گیرند. کد زیر را به انتهای CSS خود اضافه کنید:
1div:nth-of-type(1) {
2 width: 48%;
3}
4
5div:nth-of-type(2) {
6 width: 48%;
7}در کد فوق، هر دو عنصر فرزند را به اندازه 48% والد خود تنظیم کرده‌ایم که مجموعاً 96% از عرض را اشغال می‌کنند و 4% برای استفاده به عنوان فاصله بین و ستون باقی می‌ماند. به این ترتیب فضایی برای نمایش بهتر محتوا فراهم میشود. اکنون باید ستون‌ها را به صورت زیر تنظیم کنیم:
1div:nth-of-type(1) {
2 width: 48%;
3 float: left;
4}
5
6div:nth-of-type(2) {
7 width: 48%;
8 float: right;
9}بدین ترتیب اینک باید نتیجه‌ای مانند زیر داشته باشیم:
شاید متوجه شده باشید که در کد فوق برای همه عرض‌ها از درصد استفاده کردیم. این موضوع یک راهبرد مناسب است چون لی‌آوت سیالی ایجاد می‌کند که می‌تواند به تناسب اندازه‌های مختلف صفحه‌ها تغییر پیدا کند و تناسب یکسانی را روی اندازه‌های صفحه‌های کوچک‌تر برای عرض ستون‌ها فراهم سازد. اکنون تلاش کنید عرض پنجره مرورگر را تغییر دهید تا این موضوع را بهتر متوجه شوید. این یک ابزار ارزشمند برای طراحی وب واکنش‌گرا است. اینک فایل نهایی لی‌آوت دو ستونی ما به صورت زیر درآمده است:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>2 column layout example</title>
6 <style>
7 body {
8 width: 90%;
9 max-width: 900px;
10 margin: 0 auto;
11 }
12
13 div:nth-of-type(1) {
14 width: 48%;
15 float: left;
16 }
17
18 div:nth-of-type(2) {
19 width: 48%;
20 float: right;
21 }
22 </style>
23 </head>
24 <body>
25 <h1>2 column layout example</h1>
26
27 <div>
28 <h2>First column</h2>
29 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
30 </div>
31
32 <div>
33 <h2>Second column</h2>
34 <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
35 </div>
36 </body>
37</html>ساخت فریمورک‌های گرید ساده قدیمی
اغلب فریمورک‌های قدیمی از رفتار مشخصه float برای قرار دادن یک ستون در کنار ستون دیگر و ساخت چیزی شبیه به یک گرید عمل می‌کنند.
تلاش در مسیر ساخت یک گرید با استفاده از مشخصه‌های float به شما نشان می‌دهد که طرز کار آن چگونه است و با برخی مفاهیم پیشرفته برای ساخت چیزهایی که در مقاله زیر از سری مقالات آموزش CSS ارائه شده‌اند، آشنا خواهید شد:
ساده‌ترین نوع از این فریمورک‌های گرید، انواع با عرض ثابت هستند. در این نوع از فریمورک‌ها باید اندازه کل عرض طراحی خود، تعداد ستون‌هایی که نیاز داریم و عرض فواصل ستون‌ها و خود ستون‌ها را محاسبه کنیم. اگر به جای آن تصمیم بگیریم طراحی خود را روی گریدی با ستون‌هایی طراحی کنیم که بر اساس عرض مرورگر منبسط و منقبض می‌شوند، باید عرض درصدی را برای ستون‌ها و فواصل بین‌شان محاسبه کنیم.
در بخش‌های بعدی به بررسی روش اجرای هر دو راه‌حل می‌پردازیم. ما یک گرید با 12 ستون ایجاد می‌کنیم که گزینه‌ای کاملاً رایج است، چون به دلیل تقسیم‌پذیری 12 بر اعداد 6، 4، 3 و 2 برای راهکارهای مختلف تطبیق‌پذیری زیادی دارد.
یک گرید ساده با عرض ثابت
ابتدا یک سیستم گرید با ستون‌هایی دارای عرض ثابت ایجاد می‌کنیم. کار خود را با ایجاد یک فایل به نام simple-grid.html و محتوای زیر آغاز می‌کنیم که شامل markup بخش body است:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Simple grid</title>
6 <style>
7
8 </style>
9 </head>
10
11 <body>
12 <div class="wrapper">
13 <div class="row">
14 <div class="col">1</div>
15 <div class="col">2</div>
16 <div class="col">3</div>
17 <div class="col">4</div>
18 <div class="col">5</div>
19 <div class="col">6</div>
20 <div class="col">7</div>
21 <div class="col">8</div>
22 <div class="col">9</div>
23 <div class="col">10</div>
24 <div class="col">11</div>
25 <div class="col">12</div>
26 </div>
27 <div class="row">
28 <div class="col span1">13</div>
29 <div class="col span6">14</div>
30 <div class="col span3">15</div>
31 <div class="col span2">16</div>
32 </div>
33 </div>
34 </body>
35</html>هدف ما این است که این صفحه را به یک گرید نمایشی با دو ردیف و دوازده ستون تبدیل کنیم. ردیف فوقانی اندازه ستون‌های منفرد را نمایش می‌دهد و ردیف دوم نیز برخی نواحی با اندازه مختلف را روی گرید نشان می‌دهد.
در عنصر <article> کد زیر ا اضافه می‌کنیم که یک کانتینر پوششی با عرض 980 پیکسل و با padding سمت راست به میزان 20 پیکسل ایجاد می‌کند. به این ترتیب 960 پیکسل برای کل عرض ستون‌ها و فواصل بین‌شان باقی می‌ماند. در این مورد padding از کل عرض محتوا کسر میشود، زیرا برای مشخصه border-box از مقدار box-sizing روی همه عناصر سایت استفاده شده است.
1* {
2 box-sizing: border-box;
3}
4
5body {
6 width: 980px;
7 margin: 0 auto;
8}
9
10.wrapper {
11 padding-right: 20px;
12}اکنون از کانتینر ردیف استفاده می‌کنیم که پیرامون هر ردیف گرید قرار دارد تا یک ردیف را از ردیف دیگر متمایز سازد. قاعده زیر را در ادامه قواعد قبلی اضافه کنید:
1.row {
2 clear: both;
3}با به‌کارگیری این قاعده دیگر لازم نیست که هر ردیف را با عناصری پر کنیم تا دوازده ستون ایجاد شود. به این ترتیب ردیف‌ها از هم جدا می‌مانند و دخالتی در همدیگر نخواهند داشت.
فواصل بین ستون‌ها عرضی به مقدار 20 پیکسل دارند. این فواصل را به شکل margin در سمت چپ هر ستون ایجاد کرده‌ایم که شامل ستون اول نیز میشود تا تعادلی با padding 20 پیکسلی سمت راست کانتینر ایجاد شود. بنابراین در مجموع 12 gutter با عرض پیکسل داریم که فضایی به مقدار 240 پیکسل ر ا اشغال می‌کنند.
اکنون باید این مقدار را از عرض کلی 960 پیکسل کسر کنیم تا 720 پیکسل برای ستون‌ها باقی بماند. اگر اکنون این عدد را بر 12 تقسیم کنیم، می‌بینیم که عرض هر ستون باید 60 پیکسل باشد.
در گام بعدی قاعده‌ای برای col. ایجاد کرده و آن را در سمت چپ قرار می‌دهیم. همچنین مقدار margin-left را 20 پیکسل تنظیم می‌کنیم تا یک gutter ایجاد شود و width را نیز برابر با 60 پیکسل قرار می‌دهیم. به این منظور کد زیر را به انتهای CSS اضافه کنید:
1.col {
2 float: left;
3 margin-left: 20px;
4 width: 60px;
5 background: rgb(255, 150, 150);
6}اینک ردیف فوقانی ستون‌های منفرد به صورت یک گرید تنظیم میشود. توجه کنید که ما یک رنگ قرمز روشن نیز برای ستون‌ها تعیین کرده‌ایم تا به وضوح ببینید که هر کدام چه فضایی را اشغال کرده‌اند.
در مورد کانتینرهای لی‌آوتی که بخواهیم در بیش از یک ستون گسترش یابند، باید کلاس‌های خاصی به مقادیر width آن‌ها بدهیم تا برابر با تعداد ستون‌های مورد نظر شوند (همچنین باید gutter-ها را نیز در نظر بگیریم). به این منظور باید یک کلاس اضافی ایجاد کنیم تا به کانتینرها امکان بدهیم که از 2 تا 12 ستون گسترش یابند. هر عرضی در نتیجه جمع زدن عرض ستون‌ها به آن تعداد به علاوه فواصل بین ستون‌ها است که بدیهی است همواره یکی کمتر از تعداد ستون‌ها خواهد بود.
بنابراین کد زیر را به انتهای CSS اضافه کنید:
1/* Two column widths (120px) plus one gutter width (20px) */
2.col.span2 { width: 140px; }
3/* Three column widths (180px) plus two gutter widths (40px) */
4.col.span3 { width: 220px; }
5/* And so on... */
6.col.span4 { width: 300px; }
7.col.span5 { width: 380px; }
8.col.span6 { width: 460px; }
9.col.span7 { width: 540px; }
10.col.span8 { width: 620px; }
11.col.span9 { width: 700px; }
12.col.span10 { width: 780px; }
13.col.span11 { width: 860px; }
14.col.span12 { width: 940px; }اکنون که این کلاس‌ها را ایجاد کردیم، می‌توانیم ستون‌هایی با عرض‌های متفاوت روی گرید قرار دهیم. تلاش کنید صفحه را ذخیره و در مرورگر بارگذاری کنید تا نتیجه آن را ببینید. اگر هر گونه مشکلی در دستیابی به نتیجه مورد نظر داشید، فایل خود را با مثال نهایی زیر مقایسه کنید:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Simple grid</title>
6 <style>
7
8 * { box-sizing: border-box; }
9
10 body {
11 width: 980px;
12 margin: 0 auto;
13 }
14
15 .wrapper {
16 padding-right: 20px;
17 }
18
19 .row {
20 clear: both;
21 }
22
23 .col {
24 float: left;
25 margin-left: 20px;
26 width: 60px;
27 background: rgb(255,150,150);
28 }
29
30 /* Two column widths (120px) plus one gutter width (20px) */
31 .col.span2 { width: 140px; }
32 /* Three column widths (180px) plus two gutter widths (40px) */
33 .col.span3 { width: 220px; }
34 /* And so on... */
35 .col.span4 { width: 300px; }
36 .col.span5 { width: 380px; }
37 .col.span6 { width: 460px; }
38 .col.span7 { width: 540px; }
39 .col.span8 { width: 620px; }
40 .col.span9 { width: 700px; }
41 .col.span10 { width: 780px; }
42 .col.span11 { width: 860px; }
43 .col.span12 { width: 940px; }
44
45 </style>
46 </head>
47
48 <body>
49 <div class="wrapper">
50 <div class="row">
51 <div class="col">1</div>
52 <div class="col">2</div>
53 <div class="col">3</div>
54 <div class="col">4</div>
55 <div class="col">5</div>
56 <div class="col">6</div>
57 <div class="col">7</div>
58 <div class="col">8</div>
59 <div class="col">9</div>
60 <div class="col">10</div>
61 <div class="col">11</div>
62 <div class="col">12</div>
63 </div>
64 <div class="row">
65 <div class="col span1">13</div>
66 <div class="col span6">14</div>
67 <div class="col span3">15</div>
68 <div class="col span2">16</div>
69 </div>
70 </div>
71 </body>
72</html>تلاش کنید کلاس‌های روی عناصر را ویرایش یا حتی برخی کانتینرها را حذف نمایید تا با روش ایجاد تغییر در لی‌آوت آشنا شوید. برای نمونه می‌توانید ردیف دوم را به صورت زیر دربیاورید:
1<div class="row">
2 <div class="col span8">13</div>
3 <div class="col span4">14</div>
4</div>اینک شما یک سیستم گرید عملیاتی به دست آورده‌اید که می‌توانید ردیف‌ها و تعداد ستون‌های هر ردیف را تعریف کنید و سپس هر کانتینر را با محتوای مورد نظر خود پر کنید.
ایجاد یک گرید سیال
گریدی که در بخش قبلی ساختیم، عملکرد مطلوبی دارد، اما عرض آن ثابت است. ما به یک گرید با عرض انعطاف‌پذیر (سیال) نیاز داریم که بسته به فضای موجود در ویوپورت مرورگر قبض و بسط یابد. برای نیل به این مقصود می‌توانیم مقادیر عرض‌های پیکسلی را به صورت درصد دربیاوریم.
معادله مورد نیاز برای تبدیل یک عرض ثابت به عرض انعطاف‌پذیر مبتنی بر درصد به صورت زیر است:
target / context = result
در مورد عرض ستون، «عرض هدف» (target width) ما 60 پیکسل و «زمینه» (context) نیز برابر با یک پوشش 960 پیکسلی است. ما می‌توانیم از معادله زیر برای محاسبه یک درصد استفاده کنیم:
60 / 960 = 0.0625
سپس از اعداد اعشاری دو رقمی استفاده می‌کنیم تا عدد 6.25% به دست آید. بنابراین در CSS می‌توانیم به جای 60 پیکسل از عرض 6.25% استفاده کنیم.
همین کار را باید در مورد فواصل (Gutters) نیز انجام دهیم:
20 / 960 = 0.02083333333
اکنون باید مقدار 20 پیکسل مشخصه margin-left در قاعده col. و همچنین مقدار 20 پیکسل مشخصه padding-right را روی weapper. به 2.08333333% عوض کنیم.
به‌روزرسانی گرید
برای آغاز این بخش باید یک فایل به نام simple-grid-finished.html ایجاد کرده و محتوای زیر را به عنوان محتوای آغازین آن وارد کنید:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Simple grid</title>
6 <style>
7
8 * { box-sizing: border-box; }
9
10 body {
11 width: 980px;
12 margin: 0 auto;
13 }
14
15 .wrapper {
16 padding-right: 20px;
17 }
18
19 .row {
20 clear: both;
21 }
22
23 .col {
24 float: left;
25 margin-left: 20px;
26 width: 60px;
27 background: rgb(255,150,150);
28 }
29
30 /* Two column widths (120px) plus one gutter width (20px) */
31 .col.span2 { width: 140px; }
32 /* Three column widths (180px) plus two gutter widths (40px) */
33 .col.span3 { width: 220px; }
34 /* And so on... */
35 .col.span4 { width: 300px; }
36 .col.span5 { width: 380px; }
37 .col.span6 { width: 460px; }
38 .col.span7 { width: 540px; }
39 .col.span8 { width: 620px; }
40 .col.span9 { width: 700px; }
41 .col.span10 { width: 780px; }
42 .col.span11 { width: 860px; }
43 .col.span12 { width: 940px; }
44
45 </style>
46 </head>
47
48 <body>
49 <div class="wrapper">
50 <div class="row">
51 <div class="col">1</div>
52 <div class="col">2</div>
53 <div class="col">3</div>
54 <div class="col">4</div>
55 <div class="col">5</div>
56 <div class="col">6</div>
57 <div class="col">7</div>
58 <div class="col">8</div>
59 <div class="col">9</div>
60 <div class="col">10</div>
61 <div class="col">11</div>
62 <div class="col">12</div>
63 </div>
64 <div class="row">
65 <div class="col span1">13</div>
66 <div class="col span6">14</div>
67 <div class="col span3">15</div>
68 <div class="col span2">16</div>
69 </div>
70 </div>
71 </body>
72</html>در ادامه قاعده CSS دوم با سلکتور wrapper. را به صورت زیر به‌روزرسانی کنید:
1body {
2 width: 90%;
3 max-width: 980px;
4 margin: 0 auto;
5}
6
7.wrapper {
8 padding-right: 2.08333333%;
9}به این ترتیب ما نه‌تنها به آن یک width مبتنی بر درصد داده‌ایم، بلکه یک مشخصه max-width نیز اضافه کرده‌ایم تا از عریض شدن بیش از اندازه لی‌آوت جلوگیری کنیم. در ادامه قاعده CSS چهارم مربوط به سلکتور col. را به صورت زیر تغییر می‌دهیم:
1.col {
2 float: left;
3 margin-left: 2.08333333%;
4 width: 6.25%;
5 background: rgb(255, 150, 150);
6}اکنون به بخش‌های نسبتاً دشوارتر کار می‌رسیم. ما باید قواعد .col.span خود را طوری به‌روزرسانی کنیم که از درصد به جای عرض پیکسلی استفاده کنند. این کار نیاز به کمی کار با ماشین حساب دارد، اما ما این کار را به جای شما در کد زیر انجام داده‌ایم.
بلوک انتهایی قواعد CSS را به صورت زیر تغییر دهید:
1/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
2.col.span2 { width: 14.58333333%; }
3/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
4.col.span3 { width: 22.91666666%; }
5/* And so on... */
6.col.span4 { width: 31.24999999%; }
7.col.span5 { width: 39.58333332%; }
8.col.span6 { width: 47.91666665%; }
9.col.span7 { width: 56.24999998%; }
10.col.span8 { width: 64.58333331%; }
11.col.span9 { width: 72.91666664%; }
12.col.span10 { width: 81.24999997%; }
13.col.span11 { width: 89.5833333%; }
14.col.span12 { width: 97.91666663%; }اکنون کد را ذخیره کنید، آن را در مرورگر ذخیره نمایید و تلاش کنید عرض ویوپورت را تغییر دهید در این صورت می‌بینید که عرض‌های ستون‌ها به طرز مناسبی تطبیق پیدا می‌کنند. اگر هر گونه مشکلی در رسیدن به نتیجه مطلوب داشتید، کد خود را با نمونه نهایی زیر مقایسه کنید:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Fluid grid</title>
6 <style>
7
8 * { box-sizing: border-box; }
9
10 body {
11 width: 90%;
12 max-width: 980px;
13 margin: 0 auto;
14 }
15
16 .wrapper {
17 padding-right: 2.08333333%;
18 }
19
20 .row {
21 clear: both;
22 }
23
24 .col {
25 float: left;
26 margin-left: 2.08333333%;
27 width: 6.25%;
28 background: rgb(255,150,150);
29 }
30
31 /* Two column widths (12.5%) plus one gutter width (2.08333333%) */
32 .col.span2 { width: 14.58333333%; }
33 /* Three column widths (18.75%) plus two gutter widths (4.1666666) */
34 .col.span3 { width: 22.91666666%; }
35 /* And so on... */
36 .col.span4 { width: 31.24999999%; }
37 .col.span5 { width: 39.58333332%; }
38 .col.span6 { width: 47.91666665%; }
39 .col.span7 { width: 56.24999998%; }
40 .col.span8 { width: 64.58333331%; }
41 .col.span9 { width: 72.91666664%; }
42 .col.span10 { width: 81.24999997%; }
43 .col.span11 { width: 89.5833333%; }
44 .col.span12 { width: 97.91666663%; }
45
46 </style>
47 </head>
48
49 <body>
50 <div class="wrapper">
51 <div class="row">
52 <div class="col">1</div>
53 <div class="col">2</div>
54 <div class="col">3</div>
55 <div class="col">4</div>
56 <div class="col">5</div>
57 <div class="col">6</div>
58 <div class="col">7</div>
59 <div class="col">8</div>
60 <div class="col">9</div>
61 <div class="col">10</div>
62 <div class="col">11</div>
63 <div class="col">12</div>
64 </div>
65 <div class="row">
66 <div class="col span1">13</div>
67 <div class="col span6">14</div>
68 <div class="col span3">15</div>
69 <div class="col span2">16</div>
70 </div>
71 </div>
72 </body>
73</html>محاسبات آسان‌تر با تابع ()calc
ما می‌توانیم از تابع ()calc برای اجرای محاسبات مربوط به درصد مستقیماً در خود CSS استفاده کنیم. به این ترتیب می‌توانیم معادلات ریاضی ساده را در مقادیر CSS خود وارد کنیم تا مقادیر را به دست آوریم. این معادلات به طور خاص در مواردی که باید ریاضیات پیچیده‌ای استفاده شود، مفید هستند و می‌توانید محاسبات را با استفاده از واحد‌های مختلف انجام دهید. برای نمونه فرض کنید می‌خواهیم ارتفاع یک عنصر برابر با 100% ارتفاع والدش منهای 50px باشد.
هر ستونی که عرضی بیشتر از یک ستون گرید را اشغال کند، دارای عرضی برابر با 6.25% ضرب در تعداد ستون‌های اشغال شده به علاوه 2.08333333% ضرب در تعداد فواصل (که یکی کمتر از تعداد ستون‌ها است) خواهد بود. تابع ()calc به ما امکان می‌دهد که این محاسبات را مستقیماً درون مقدار عرض انجام دهیم. از این رو برای نمونه برای آیتمی که 4 ستون را اشغال می‌کند، می‌توانیم به صورت زیر عمل کنیم:
1.col.span4 {
2 width: calc((6.25%*4) + (2.08333333%*3));
3}بلوک انتهایی قواعد را با CSS زیر عوض کرده و سپس صفحه را در مرورگر باز کنید تا ببینید که نتیجه یکسانی به دست می‌آید:
1.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
2.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
3.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
4.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
5.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
6.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
7.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
8.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
9.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
10.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
11.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }نسخه نهایی فایل شما باید به صورت زیر باشد:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Fluid grid with calc()</title>
6 <style>
7
8 * { box-sizing: border-box; }
9
10 body {
11 width: 90%;
12 max-width: 980px;
13 margin: 0 auto;
14 }
15
16 .wrapper {
17 padding-right: 2.08333333%;
18 }
19
20 .row {
21 clear: both;
22 }
23
24 .col {
25 float: left;
26 margin-left: 2.08333333%;
27 width: 6.25%;
28 background: rgb(255,150,150);
29 }
30
31 .col.span2 { width: calc((6.25%*2) + 2.08333333%); }
32 .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
33 .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
34 .col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
35 .col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
36 .col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
37 .col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
38 .col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
39 .col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
40 .col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
41 .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
42
43 </style>
44 </head>
45
46 <body>
47 <div class="wrapper">
48 <div class="row">
49 <div class="col">1</div>
50 <div class="col">2</div>
51 <div class="col">3</div>
52 <div class="col">4</div>
53 <div class="col">5</div>
54 <div class="col">6</div>
55 <div class="col">7</div>
56 <div class="col">8</div>
57 <div class="col">9</div>
58 <div class="col">10</div>
59 <div class="col">11</div>
60 <div class="col">12</div>
61 </div>
62 <div class="row">
63 <div class="col span1">13</div>
64 <div class="col span6">14</div>
65 <div class="col span3">15</div>
66 <div class="col span2">16</div>
67 </div>
68 </div>
69 </body>
70</html>اگر پس از تطبیق فایل خود با کد فوق، همچنان نتوانستید نتیجه مطلوبی به دست آورید، احتمالاً اشکال از مرورگر شما است که از تابع calc() پشتیبانی نمی‌کند، هر چند این تابع اینک تقریباً روی همه مرورگرها تا IE9 پشتیبانی میشود.
سیستم‌های گرید معناشناختی در مقابل انواع غیر معناشناختی
افزودن کلاس به markup برای تعریف لی‌آوت به این معنی است که محتوا و markup شما با ارائه دیداری‌تان پیوند می‌یابند. ممکن است گاهی اوقات شنیده باشید که کاربرد کلاس‌های CSS یک رویکرد غیر «معناشناختی» (unsemantic) است؛ در حالی که شیوه توصیف محتوا به صورت «معناشناختی» (semantic) است. این حالت در مورد استفاده از کلاس‌های span2، span3 و غیره مصداق دارد.
باید توجه داشته باشید که این تنها رویکرد ممکن نیست. شما می‌توانید به جای آن، اول مشخصات گرید را معین کنید و سپس اطلاعات اندازه‌بندی را به قواعد کلاس‌های معناشناختی موجود اضافه کنید. برای نمونه اگر یک <div> با کلاس content داشته باشید که بخواهید عرضی برابر با 8 ستون داشته باشد، می‌توانید روی عرض به مقدار کلاس span8 کپی کنید که نتیجه‌ای مانند زیر به دست می‌دهد:
1.content {
2 width: calc((6.25%*8) + (2.08333333%*7));
3}اگر بخواهید از یک «پیش‌پردازشگر» (preprocessor) مانند Sass استفاده کنید، می‌توانید یک mixin ساده ایجاد کنید که این مقدار را برای شما درج می‌کند.
فعال‌سازی کانتینرها در گرید
گریدی که در بخش قبل ساختیم تا زمانی که بخواهیم همه کانتینرها از سمت چپ گرید آغاز شوند، مشکلی نخواهد داشت. اما اگر بخواهیم یک ستون خالی پیش از اولین کانتینر یا بین کانتینرها ایجاد کنیم باید یک کلاس آفست ایجاد کرده و یک margin چپ به آن بدهیم تا از نظر دیداری روی گرید قرار گیرد.
به این منظور کار خود را با فایل قبلی به عنوان نقطه آغازین آغاز می‌کنیم:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Fluid grid</title>
6 <style>
7
8 * { box-sizing: border-box; }
9
10 body {
11 width: 90%;
12 max-width: 980px;
13 margin: 0 auto;
14 }
15
16 .wrapper {
17 padding-right: 2.08333333%;
18 }
19
20 .row {
21 clear: both;
22 }
23
24 .col {
25 float: left;
26 margin-left: 2.08333333%;
27 width: 6.25%;
28 background: rgb(255,150,150);
29 }
30
31 /* Two column widths (12.5%) plus one gutter width (2.08333333%) */
32 .col.span2 { width: 14.58333333%; }
33 /* Three column widths (18.75%) plus two gutter widths (4.1666666) */
34 .col.span3 { width: 22.91666666%; }
35 /* And so on... */
36 .col.span4 { width: 31.24999999%; }
37 .col.span5 { width: 39.58333332%; }
38 .col.span6 { width: 47.91666665%; }
39 .col.span7 { width: 56.24999998%; }
40 .col.span8 { width: 64.58333331%; }
41 .col.span9 { width: 72.91666664%; }
42 .col.span10 { width: 81.24999997%; }
43 .col.span11 { width: 89.5833333%; }
44 .col.span12 { width: 97.91666663%; }
45
46 </style>
47 </head>
48
49 <body>
50 <div class="wrapper">
51 <div class="row">
52 <div class="col">1</div>
53 <div class="col">2</div>
54 <div class="col">3</div>
55 <div class="col">4</div>
56 <div class="col">5</div>
57 <div class="col">6</div>
58 <div class="col">7</div>
59 <div class="col">8</div>
60 <div class="col">9</div>
61 <div class="col">10</div>
62 <div class="col">11</div>
63 <div class="col">12</div>
64 </div>
65 <div class="row">
66 <div class="col span1">13</div>
67 <div class="col span6">14</div>
68 <div class="col span3">15</div>
69 <div class="col span2">16</div>
70 </div>
71 </div>
72 </body>
73</html>سپس یک کلاس در CSS اضافه می‌کنیم که یک عنصر کانتینر را به مقدار عرض یک ستون، آفست می‌کند. به این منظور کد زیر را به انتهای CSS خود اضافه کنید:
1.offset-by-one {
2 margin-left: calc(6.25% + (2.08333333%*2));
3}یا در صورتی که ترجیح می‌دهید خودتان درصد را محاسبه کنید از کد زیر استفاده کنید:
1.offset-by-one {
2 margin-left: 10.41666666%;
3}اینک می‌توانید این کلاس را به هر کانتینری که می‌خواهید یک ستون فضای خالی در سمت چپ خودش داشته باشد، اضافه کنید. برای نمونه اگر کد زیر را در HTML داشته باشید:
1<div class="col span6">14</div>آن را با کد زیر عوض کنید:
1<div class="col span5 offset-by-one">14</div>نکته: توجه کنید که باید تعداد ستون‌ها را کاهش دهید تا فضایی برای آفست ایجاد شود.
با بارگذاری مجدد صفحه در مرورگر، متوجه می‌شوید که نمونه نهایی به صورت زیر است:
اگر در حصول این نتیجه با مشکلی مواجه شدید، فایل خود را با فایل زیر مقایسه کنید:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Fluid grid with offset class</title>
6 <style>
7
8 * { box-sizing: border-box; }
9
10 body {
11 width: 90%;
12 max-width: 980px;
13 margin: 0 auto;
14 }
15
16 .wrapper {
17 padding-right: 2.08333333%;
18 }
19
20 .row {
21 clear: both;
22 }
23
24 .col {
25 float: left;
26 margin-left: 2.08333333%;
27 width: 6.25%;
28 background: rgb(255,150,150);
29 }
30
31 /* Two column widths (12.5%) plus one gutter width (2.08333333%) */
32 .col.span2 { width: 14.58333333%; }
33 /* Three column widths (18.75%) plus two gutter widths (4.1666666) */
34 .col.span3 { width: 22.91666666%; }
35 /* And so on... */
36 .col.span4 { width: 31.24999999%; }
37 .col.span5 { width: 39.58333332%; }
38 .col.span6 { width: 47.91666665%; }
39 .col.span7 { width: 56.24999998%; }
40 .col.span8 { width: 64.58333331%; }
41 .col.span9 { width: 72.91666664%; }
42 .col.span10 { width: 81.24999997%; }
43 .col.span11 { width: 89.5833333%; }
44 .col.span12 { width: 97.91666663%; }
45
46 .offset-by-one {
47 margin-left: 10.41666666%;
48 }
49
50 </style>
51 </head>
52
53 <body>
54 <div class="wrapper">
55 <div class="row">
56 <div class="col">1</div>
57 <div class="col">2</div>
58 <div class="col">3</div>
59 <div class="col">4</div>
60 <div class="col">5</div>
61 <div class="col">6</div>
62 <div class="col">7</div>
63 <div class="col">8</div>
64 <div class="col">9</div>
65 <div class="col">10</div>
66 <div class="col">11</div>
67 <div class="col">12</div>
68 </div>
69 <div class="row">
70 <div class="col span1">13</div>
71 <div class="col span5 offset-by-one">14</div>
72 <div class="col span3">15</div>
73 <div class="col span2">16</div>
74 </div>
75 </div>
76 </body>
77</html>محدودیت‌های گرید Float
وقتی با سیستمی این چنین کار می‌کنید، باید مراقب باشید که عرض کلی همواره به درستی محاسبه شود و این که عناصر را در ردیفی که بیش از آن چه ستون‌ها می‌توانند بپذیرند قرار ندهید. به دلیل طرز کار float-ها، اگر تعداد ستون‌های گرید بیش از عرض گرید شود، عناصر انتهایی به خط بعدی می‌افتند که موجب شکسته شدن گرید میشود. همواره در خاطر داشته باشید که اگر محتوای عناصر عریض‌تر از ردیف‌هایی شود که اشغال می‌کنند، دچار سرریز شده و زشت دیده میشود.
بزرگ‌ترین محدودیت این سیستم آن است که اساساً تک‌بعدی است. ما با ستون‌ها سروکار داریم و عناصر روی ستون‌ها و نه ردیف‌ها گسترش می‌یابند. بنابراین کنترل ارتفاع عناصر بدون تعیین صریح ارتفاع در این روش‌های لی‌آوت قدیمی کاری دشوار است و این کار نیز یک رویکرد غیر منعطف محسوب می‌َشود و تنها در صورتی به درستی عمل می‌کند که تضمین کنید محتوا دارای یک ارتفاع خاصی خواهد بود.
گرید‌های Flexbox
اگر مقاله قبلی این سری مقالات در مورد Flexbox را خوانده باشید، ممکن است فکر کنید که استفاده از Flexbox برای ایجاد سیستم گرید گزینه مناسبی محسوب میشود.
سیستم‌های گرید مختلفی بر مبنای Flexbox ایجاد شده‌اند و Flexbox می‌تواند بسیاری از مشکلاتی که در بخش فوق در مورد ساخت گرید اشاره کردیم را رفع کند.
اما Flexbox هرگز به منظور ارائه یک سیستم گرید طراحی نشده است و زمانی که به این منظور استفاده شود، مجموعه چالش‌های جدیدی را با خود به همراه می‌آورد. به عنوان یک مثال ساده، می‌توانیم نمونه markup ساده‌ای که قبلاً استفاده کردیم را در نظر گرفته و از CSS زیر برای استایل‌بندی کلاس‌های wrapper ،row و col استفاده کنیم:
1body {
2 width: 90%;
3 max-width: 980px;
4 margin: 0 auto;
5}
6
7.wrapper {
8 padding-right: 2.08333333%;
9}
10
11
12.row {
13 display: flex;
14}
15
16.col {
17 margin-left: 2.08333333%;
18 margin-bottom: 1em;
19 width: 6.25%;
20 flex: 1 1 auto;
21 background: rgb(255,150,150);
22}در کد فوق، ما هر ردیف را به یک کانتینر flex تبدیل می‌کنیم. با استفاده از یک گرید مبتنی بر flexbox همچنان باید ردیف‌ها را به ترتیب داشته باشیم تا بتوانیم عناصری را اضافه کنیم که کمتر از 100% عرض را اشغال کنند. کانتینر را به صورت display: flex تنظیم می‌کنیم.
روی col. مقدار اول مشخصه flex یعنی flex-grow را روی 1 تنظیم می‌کنیم تا آیتم‌ها بتوانند بزرگ‌تر شوند. مقدار مشخصه دوم flex-shrink را 1 تعیین می‌کنیم تا آیتم‌ها بتوانند کوچک‌تر شوند و مقدار سوم flex-basis را نیز روی auto قرار می‌دهیم. از آنجا که عنصر ما دارای یک width تعیین شده است، مقدار auto از این عرض به عنوان مقدار flex-basis استفاده می‌کند.
در خط فوقانی دوازده باکس مرتب روی گرید داریم که می‌توانند به طور برابر با تغییر عرض ویوپورت، بزرگ و کوچک شوند. اما در خط بعدی، تنها چهار آیتم داریم و این آیتم‌ها نیز می‌توانند از مبنای 60 پیکسل تغییر اندازه بدهند. اما چون فقط چهار مورد از آن‌ها وجود دارند، می‌توانند بسیار بیشتر از عناصر ردیف فوقانی بزرگ شوند. در نهایت آن‌ها می‌توانند همه عرض ردیف دوم را اشغال کنند.
برای اصلاح این مشکل باید کلاس‌های span را بگنجانیم تا عرضی ارائه دهند که با مقدار مورد استفاده از سوی flex-basis برای عنصر جایگزین شود.
همچنین این عناصر به خصوصیات ردیف آیتم‌های فوقانی توجهی ندارند، چون هیچ چیزی در مورد آن نمی‌دانند. Flexbox دارای یک طراحی تک‌بعدی است و تنها با یک بعد کار می‌کند که می‌تواند یک ردیف یا ستون باشد. ما نمی‌توانیم یک گرید صریح برای ردیف‌ها و سون‌ها ایجاد کنیم. معنی این حرف آن است که اگر از flexbox برای ساخت گرید بهره بگیریم، همچنان باید درصد را به صورت لی‌آوت float-شده محاسبه کنیم.
شما در پروژه خود ممکن است بخواهید از یک گرید flexbox استفاده کنید، چون flexbox امکانات جهت‌گیری و توزیع فضایی بیشتری نسبت به float می‌دهد. اما باید آگاه باشید که همچنین از این ابزار برای مقصودی استفاده می‌کنید که برای آن طراحی نشده است. از این رو ممکن است فکر کنید برای رسیدن به نتیجه‌ای که می‌خواهید باید از موانع بیشتری رد شوید.
سیستم‌های گرید شخص ثالث
اکنون که با مبانی ریاضی محاسبات گرید آشنا شدیم، موقعیت خوبی فرا رسیده است که نگاهی به برخی سیستم‌های گرید شخص ثالث که کاربرد گسترده‌تری دارند، بیندازیم. اگر به دنبال عبارت CSS Grid framework در وب بگردید، فهرست بلندی از گزینه‌ها را می‌یابید. فریمورک‌های محبوب مانند Bootstrap و Foundation دارایی سیستم گرید برای خود هستند. همچنین سیستم‌های گرید مستقلی وجود دارند که با استفاده از CSS یا پیش‌پردازشگرها توسعه یافته‌اند.
در ادامه یکی از این سیستم‌های مستقل را بررسی می‌کنیم، زیرا برخی تکنیک‌های رایج برای عملکرد یک فریمورک را نشان می‌دهند. این گرید بخشی از Skeleton است که یک فریمورک ساده CSS محسوب میشود.
برای آغاز کار سری به وب‌سایت Skeleton (+) بزنید و گزینه Download را انتخاب کنید تا یک فایل فشرده دانلود شود. این فایل را از حالت فشرده خارج و فایل‌های skeleton.css و normalize.css را به دایرکتوری جدید کپی کنید. سپس روی سیستم خود و در همان دایرکتوری یک فایل به نام html-skeleton.html ایجاد کرده و کد زیر را در آن ذخیره کنید:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Skeleton example</title>
6 </head>
7
8 <body>
9
10 </body>
11</html>با افزودن کد زیر به بخش head صفحه، skeleton و normalize CSS را در صفحه HTML بگنجانید:
1<link href="normalize.css" rel="stylesheet">
2<link href="skeleton.css" rel="stylesheet">Skeleton شامل چیزی بیش از یک سیستم گرید است و CSS مورد نیاز برای تایپوگرافی و دیگر عناصر صفحه را نیز در خود گنجانده که می‌توانید به عنوان یک نقطه شروع مورد استفاده قرار دهید. ما این گزینه‌ها را در حالت پیش‌فرض حفظ می‌کنیم، چون فعلاً سیستم گرید آن مورد توجه ما قرار دارد.
نکته: Normalize یک کتابخانه کوچک واقعاً مفید CSS است که توسط «نیکلاس گالافر» (Nicolas Gallagher) نوشته شده است که به طور خودکار برخی اصلاحات لی‌آوت مفید را انجام داده و استایل‌بندی پیش‌فرض عناصر را به روشی منسجم‌تر روی مرورگرهای مختلف اجرا می‌کند.
ما در اینجا از HTML مشابهی که در مثال قبلی خود استفاده کردیم، بهره می‌گیریم و HTML زیر را به بخش body اضافه می‌کنیم:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Skeleton example</title>
6 </head>
7
8 <body>
9
10 </body>
11</html>برای شروع استفاده از Skeleton باید کلاس container را به <div> پوششی بدهیم که از قبل در HTML قرار دارد. به این ترتیب محتوا با بیشینه عرض 960 پیکسل به صورت مرکزی تنظیم میشود. اینک می‌بینیم که باکس‌ها هرگز عرضی بیشتر از 960 پیکسل نخواهند یافت.
اگر نگاهی به فایل skeleton.css بیندازید، می‌بینید که CSS مورد استفاده به چه شکل است. <div> با استفاده از تنظیم margin-های چپ و راست به صورت auto به صورت مرکزی تنظیم شده و یک padding 20 پیکسلی روی سمت راست و چپ اعمال شده است. Skeleton از مقدار box-sizing برای مشخصه border-box استفاده می‌کند که همانند روشی است که ما قبلاً استفاده کردیم و از این رو padding و boarder-های این عنصر نیز در زمان محاسبه عرض کلی لحاظ می‌شوند.
1.container {
2 position: relative;
3 width: 100%;
4 max-width: 960px;
5 margin: 0 auto;
6 padding: 0 20px;
7 box-sizing: border-box;
8}عناصر تنها زمانی می‌توانند بخشی از گرید باشند که درون یک ردیف قرار داشته باشند، بنابراین همانند مثال قبلی به یک <div> اضافی یا عنصری دیگر با کلاس row تودرتو بین content <div> و <div>-های کانتینر محتوای واقعی نیاز داریم. ما این کار را نیز قبلاً انجام داده‌ایم.
اکنون فرض کنید باکس‌های کانتینر را لی‌آوت می‌کنیم. Skeleton بر مبنای یک گرید 12 ستونی عمل می‌کند. خط فوقانی باکس‌ها باید همگی دارای کلاس‌های one column باشند تا عرضی به اندازه یک ستون را پوشش دهند. اکنون کدهای زیر را اضافه کنید:
1<div class="container">
2 <div class="row">
3 <div class="one column">1</div>
4 <div class="one column">2</div>
5 <div class="one column">3</div>
6 /* and so on */
7 </div>
8</div>سپس به کانتینرهای ردیف دوم کلاس‌هایی مانند زیر بدهید که تعداد ستون‌هایی که باید گسترش یابند را مشخص سازد:
1<div class="row">
2 <div class="one column">13</div>
3 <div class="six columns">14</div>
4 <div class="three columns">15</div>
5 <div class="two columns">16</div>
6</div>اکنون اگر فایل را ذخیره و صفحه را در مرورگر بارگذاری مجدد کنید، نتیجه کار را مشاهده خواهید کرد. اگر در حصول نتیجه مطلوب مشکلی داشتید، فایل خود را با فایل زیر مقایسه کنید:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Skeleton example</title>
6 <link href="normalize.css" rel="stylesheet">
7 <link href="skeleton.css" rel="stylesheet">
8 </head>
9
10 <body>
11
12 <div class="container">
13 <div class="row">
14 <div class="one column">1</div>
15 <div class="one column">2</div>
16 <div class="one column">3</div>
17 <div class="one column">4</div>
18 <div class="one column">5</div>
19 <div class="one column">6</div>
20 <div class="one column">7</div>
21 <div class="one column">8</div>
22 <div class="one column">9</div>
23 <div class="one column">10</div>
24 <div class="one column">11</div>
25 <div class="one column">12</div>
26 </div>
27 <div class="row">
28 <div class="one column">13</div>
29 <div class="six columns">14</div>
30 <div class="three columns">15</div>
31 <div class="two columns">16</div>
32 </div>
33 </div>
34
35 </body>
36</html>اگر به فایل skeleton.css نگاه کنید، می‌توانید طرز کار این مثال را درک کنید. برای نمونه skeleton مشخصه زیر را برای عناصر استایل‌بندی‌شده با کلاس‌های three columns تعریف کرده است:
1.three.columns { width: 22%; }تنها کاری که Skeleton یا هر فریمورک دیگر انجام می‌دهند، این است که کلاس‌های از پیش‌تعریف‌شده‌ای تنظیم می‌کنند تا شما بتوانید آن‌ها را به markup خود اضافه کنید. این وضعیت دقیقاً همانند آن است که شما خودتان درصدها را محاسبه کنید.
چنان که می‌بینید در زمان استفاده از Skeleton نیاز به نوشتن CSS به مقدار زیادی کاهش می‌یابد. به این ترتیب Skeleton مسئولیت همه بخش‌های floating را در زمان افزودن کلاس‌ها به markup بر عهده می‌گیرد. در واقع تنها مزیت استفاده از یک فریمورک گرید همین است. با این حال امروزه با معرفی CSS Grid Layout بسیاری از توسعه‌دهندگان دیگر از این فریمورک‌ها استفاده نمی‌کنند و از گرید نیتیو داخلی خود CSS بهره می‌گیرند.
سخن پایانی
شما در این مقاله با انواع مختلف سیستم‌های گرید (Grid) که می‌توان ساخت آشنا شدید؛ امیدواریم این مقاله مورد توجه شما قرار گرفته باشد.
برای مطالعه بخش بعدی این سری مقالات روی لینک زیر کلیک کنید:
