سیستم شبکه ریسپانسیو CSS

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

ایجاد سیستم شبکه CSS

سیستم شبکه CSS بر اساس تقسیم طرح به ستون ها و ردیف ها است. استفاده از ماژول طرح بندی شبکه ساده ترین راه برای طراحی وب سایت های پاسخگو است. طرح شبکه معمولاً از 12 ستون تشکیل شده است اما می تواند تعداد بیشتری ستون داشته باشد.

مثال زیر یک سیستم شبکه ساده CSS ایجاد می کند. در اینجا مراحل اصلی وجود دارد:

• تنظیم صفحه نمایش: شبکه
• اندازه ستون ها و ردیف ها را با grid-template-columns و ستون های grid-template-columns تنظیم کنید.

.example {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
div {
border: solid 2px green;
padding: 5px;
margin: 3px;
}

نکته: اندازه پنجره را در مثال تغییر دهید تا ببینید سیستم شبکه CSS پاسخ می دهد و اندازه ستون ها و ردیف ها را تنظیم می کند.

مثال بعدی یک شبکه CSS پاسخگو متفاوت ایجاد می کند:

.example {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444; 
}

div {
  background-color: purple;
  color: #fff;
  border-radius: 10px;
  padding: 25px;
  font-size: small;
}

شبکه CSS در مقابل flexbox

چندین تفاوت عمده بین سیستم مشاهده شبکه CSS و flexbox وجود دارد:

• چیدمان های شبکه سیستم های دو بعدی هستند. این ایده به این معنی است که شبکه با ردیف ها و ستون ها کار می کند. با این حال ، flexbox یک بعدی است و یا با ستون ها یا ردیف ها کار می کند.
• شبکه برای ایجاد طرح بندی در مقیاس بزرگ عالی است ، در حالی که flexbox برای طرح های مقیاس کوچک بهتر است.
• Grid چیدمان گرا است و flexbox محتوایی گرا است. اگر در مورد محتوای وب سایت مطمئن نیستید ، باید grid (در صورت وجود flexbox) را انتخاب کنید.
• برای تعریف ستون ها یا ردیف ها ، باید با flexbox کار کنید. با این حال ، هنگامی که شما نیاز به ایجاد یک شبکه و متناسب کردن محتوای آن به دو بعد دارید ، شبکه جواب می دهد.

توجه: برای بهترین نتیجه می توانید استفاده از سیستم شبکه CSS و flexbox را ترکیب کنید.

شبکه CSS در مقابل راه انداز

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

• نگهداری کد شبکه آسان تر است زیرا HTML و CSS جداگانه باقی می مانند. بوت استرپ هر سطر را در <div> قرار می دهد و از چندین کلاس استفاده می کند.
• تغییر طرح در شبکه آسان است زیرا نیازی به تغییر کد HTML ندارید. با افزودن درخواست های رسانه ، انعطاف پذیری افزایش می یابد.
• Bootstrap طرح 12 ستونی را ارائه می دهد. شبکه به شما امکان می دهد هر تعداد ردیف و ستون ایجاد کنید.

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

لیستی از خصوصیات شبکه

در اینجا یک صفحه ترفند شبکه CSS با ویژگی هایی وجود دارد که نحوه طراحی صفحه وب را کنترل می کند:

Values	Description	Property
شبکه و شبکه درون خطی برای تولید یک شبکه بلوک یا درون خطی	یک عنصر را به عنوان یک ظرف شبکه تنظیم می کند و یک زمینه قالب بندی شبکه جدید ایجاد می کند	display
مقدار یا کسری (fr) از فضای شبکه موجود	نام خطوط را تنظیم می کند و توابع اندازه گیری ستون ها را ردیابی می کند	grid-template-columns
مقدار درصدی یا کسری (fr) از فضای شبکه موجود	نام خطوط را تنظیم می کند و توابع اندازه گیری ردیف ها را ردیابی می کند	grid-template-rows
نام منطقه شبکه. یک دوره یک سلول شبکه خالی را نشان می دهد. هیچکدام نشان دهنده این نیست که هیچ منطقه ای از شبکه اعلام نشده است	با ارجاع به نام های مختلف شبکه ، الگوی شبکه را تنظیم می کند	grid-template-areas
ارزش خواص مختصر. هیچکدام همه خصوصیات را روی مقدار پیش فرض آنها تنظیم نمی کند	سطرهای شبکه-الگو ، ستون های شبکه-الگو و مناطق-الگو-شبکه را در یک اعلامیه تنظیم می کند (مختصر)	grid-template
شاخص های طول مانند پیکسل ها	اندازه فضای بین ستون ها را تنظیم می کند	grid-column-gap
شاخص های طول مانند پیکسل ها	اندازه فضای بین ردیف ها را تنظیم می کند	grid-row-gap
شاخص های طول مانند پیکسل ها	خلاصه ای برای شکاف شبکه ستون و شکاف ستون شبکه	grid-gap
شروع ، پایان ، مرکز ، کشش	تراز را در امتداد محور درون خطی (ردیف) تنظیم می کند	justify-items
شروع ، پایان ، مرکز ، کشش	تراز بندی را در امتداد محور بلوک (ستون) تنظیم می کند	align-items
شروع ، پایان ، مرکز ، کشش	خلاصه ای برای تراز کردن موارد و توجیه موارد	place-items
شروع ، پایان ، مرکز ، کشش ، فضای اطراف ، فاصله بین ، فضا به طور یکنواخت	تراز بندی شبکه را در داخل ظرف (در امتداد محور خطی) تنظیم می کند	justify-content
شروع ، پایان ، مرکز ، کشش ، فضای اطراف ، فاصله بین ، فضا به طور یکنواخت	تراز بندی شبکه را در داخل ظرف (در امتداد محور بلوک) تنظیم می کند	align-content
شروع ، پایان ، مرکز ، کشش ، فضای اطراف ، فاصله بین ، فضا به طور یکنواخت	خلاصه ای برای تنظیم محتوای تراز و توجیه محتوا	place-content
شروع ، پایان ، مرکز ، کشش ، فضای اطراف ، فاصله بین ، فضا به طور یکنواخت	خلاصه ای برای تنظیم محتوای تراز و توجیه محتوا	place-content
شاخص های طول ، درصد ها ، انعطاف پذیر ، حداکثر محتوا ، حداقل محتوا ، مین مکس ، محتوای اول (آرگومان) ، خودکار	اندازه آهنگ ستون یا الگوی آهنگ ها را تنظیم می کند	grid-auto-columns
شاخص های طول ، درصد ها ، انعطاف پذیر ، حداکثر محتوا ، حداقل محتوا ، مین مکس ، محتوای اول (آرگومان) ، خودکار	اندازه آهنگ ردیف یا الگوی آهنگ ها را تنظیم می کند	grid-auto-rows
ردیف ، ستون ، متراکم	الگوریتم قرار دادن خودکار را تنظیم می کند	grid-auto-flow
هیچکدام همه خصوصیات را روی مقادیر پیش فرض خود تنظیم نمی کند مقادیر هر خاصیت مختصر را می پذیرد	خلاصه ای برای شبکه-الگو-ردیف ها ، شبکه-الگو-ستون ها ، شبکه-الگو-مناطق ، شبکه-خودکار ردیف ها ، شبکه-خودکار ستون ها و شبکه-خودکار جریان	grid
تعداد خط شروع و پایان	شبکه-ستون-شروع و شبکه-ستون-پایان. اندازه موارد شبکه و محل قرارگیری آنها را در ستون شبکه تنظیم می کند	grid-column
تعداد خط شروع و پایان	شبکه-ستون-شروع و شبکه-ستون-پایان. اندازه موارد شبکه و محل قرارگیری آنها را در ستون شبکه تنظیم می کند	grid-row
نام و مقادیر خصوصیات موجود در مقاله کوتاه	خلاصه ای برای شروع شبکه-ردیف ، شبکه-ستون-شروع ، شبکه-ردیف-پایان و شبکه-ستون-پایان. موارد موجود در شبکه را نام می برد	grid-area
شروع ، پایان ، مرکز ، کشش	تراز بندی داخل سلول را در امتداد محور خطی تنظیم می کند	justify-self
شروع ، پایان ، مرکز ، کشش	ترازبندی داخل سلول را در امتداد محور بلوک تنظیم می کند	align-self
خودکار ترازبندی پیش فرض را تنظیم می کند. مقادیری از خصوصیات مختصر را می پذیرد	خلاصه ای برای همسویی کردن و توجیه کردن خود	place-self

ساخت یک طرح بدون شبکه

برای ایجاد یک طرح بندی ، باید ویژگی اندازه جعبه را برای همه عناصر HTML در border-box تنظیم کنید. این تأیید می کند که حاشیه ها و بالشتک ها در ابعاد کل این عناصر گنجانده شده است.

* {
    box-sizing: border-box;
}

مثال بعدی یک وب سایت ساده ریسپانسیو را نشان می دهد که از دو ستون تشکیل شده است:

.firstC {
 width: 60%;
 float: left;
 border: solid #a4508b 5px;
 padding: 10px;
}

.secondC {
 width: 40%;
 float: left;
 border: solid #2f004f 5px;
 padding: 10px;
}

مثال زیر یک طرح پاسخگو ایجاد می کند که دارای پنج ستون است.

در مرحله اول ، شما باید عرض هر ستون را مشخص کنید. ما به دنبال 25٪ / 25٪ / 25٪ / 25٪ / 100٪ هستیم.

سپس ، برای هر ستون یک کلاس CSS ایجاد می کنید.

.C-1 {width: 25%;}
.C-2 {width: 25%;}
.C-3 {width: 25%;}
.C-4 {width: 25%;}
.C-5 {width: 100%;}

در مثال بعدی ، همه ستون ها (C-) را به سمت چپ شناور می کنیم و 5px padding اضافه می کنیم:

[class*="C-"] {
 float: left;
 border: solid #a4508b 5px;
 padding: 5px;
}

همچنین برای هر سطر باید <div> جداگانه ایجاد کنید. هر ردیف باید هر 5 ستون را جمع بندی کند:

<div class="row">
  <div class="C-1">...</div>
  <div class="C-2">...</div>
  <div class="C-3">...</div>
  <div class="C-4">...</div>
  <div class="C-5">...</div>
</div>

ستون ها در یک ردیف به سمت چپ شناور هستند و تحت تأثیر جریان عادی صفحه نیستند. با این حال ، عناصر دیگر به دلیل جریان بی جا می شوند. بنابراین ، برای پاک کردن آن باید  style ایجاد کنیم:

.row::after {
    content: "";
    clear: both;
    display: table;
}

در آخر ، برخی استایل ها و رنگ ها را اضافه می کنیم تا وب سایت جذاب تر به نظر برسد:

html {
 font-family: "Arial", sans-serif;
}

.back-up {
 background-color: #ced4da;
}

.back-up :hover {
 background-color: #a4508b;
}

.back-down {
 background-color: #858585;
}

نکات مهم سیستم شبکه ریسپانسیو CSS:

• شبکه CSS یک چارچوب نیست. این ویژگی داخلی CSS است و توسط همه مرورگرهای مدرن پشتیبانی می شود.
• مسیر شبکه CSS به فضای بین هر دو خط روی شبکه اشاره دارد.
• تابع repeat() با تکرار همه یا بخشی از لیست آهنگ به مدیریت شبکه های دارای بسیاری از آهنگ ها کمک می کند.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.