شبکه

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

طرح شبکه چیست؟

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

یک شبکه به طور معمول دارای ستون ، ردیف و سپس شکاف بین هر سطر و ستون خواهد بود. این شکاف ها معمولاً به عنوان روده ها گفته می شود.

ایجاد شبکه خود در CSS

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

فیلم زیر توضیح بصری خوبی در مورد استفاده از شبکه CSS ارائه می دهد:

تعریف یک شبکه

به عنوان یک نقطه شروع ، فایل نقطه شروع را در ویرایشگر متن و مرورگر خود بارگیری و باز کنید (می توانید آن را نیز به صورت زنده ببینید). مثالی را با یک ظرف مشاهده خواهید کرد که دارای برخی از موارد کودک است. این نمایش ها به طور پیش فرض در جریان عادی نمایش داده می شوند ، بنابراین جعبه ها یکی را در زیر دیگری نشان می دهند. ما برای اولین بخش این درس با این پرونده کار خواهیم کرد و تغییراتی را ایجاد می کنیم تا ببینیم شبکه آن چگونه رفتار می کند.

برای تعریف یک شبکه از مقدار شبکه خاصیت صفحه نمایش استفاده می کنیم. مانند Flexbox ، این طرح شبکه را امکان پذیر می کند. همه فرزندان مستقیم این ظرف به وسایل شبکه تبدیل می شوند. این را به CSS موجود در پرونده خود اضافه کنید:

کانتینر  نمایش دادن:توری; > 

بر خلاف Flexbox ، موارد بلافاصله متفاوت به نظر نمی رسند. اعلام نمایش: Grid یک شبکه یک ستون به شما می دهد ، بنابراین موارد شما همانطور که در جریان عادی انجام می شود ، یکی از موارد زیر را در زیر دیگری نمایش می دهند.

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

کانتینر  نمایش دادن:توری; ستونهای شبکه:200px 200px 200px; > 

اعلامیه دوم را به قانون CSS خود اضافه کنید ، سپس صفحه را بارگیری کنید. باید ببینید که این موارد خود را به گونه ای تنظیم مجدد کرده اند که در هر سلول شبکه یکی وجود دارد.

بدنه  عرض:90 ٪; حداکثر:900 px; لبه:2EM AUTO; قلم:0. 9EM/1. 2 Arial,هولیتیکا,بدون دندانه; > .container>قسمت  خطوط مرزی:5 عدد; لایه گذاری:10 عدد; رنگ پس زمینه: RGB(207,232,220); مرز:2px جامدRGB(79,185,227); > 

قسمت طبقه="کانتینر"> قسمت>یکیقسمت> قسمت>دوقسمت> قسمت>سهقسمت> قسمت>چهارقسمت> قسمت>پنجقسمت> قسمت>ششقسمت> قسمت>هفتقسمت> قسمت> 

شبکه های انعطاف پذیر با واحد FR

علاوه بر ایجاد شبکه ها با استفاده از طول و درصد ، می توانیم از FR استفاده کنیم. واحد FR یک بخش از فضای موجود در ظرف شبکه را به ردیف ها و ستون های شبکه انعطاف پذیر نشان می دهد.

لیست آهنگ خود را به تعریف زیر تغییر دهید و سه آهنگ 1FR ایجاد کنید:

کانتینر  نمایش دادن:توری; ستونهای شبکه:1fr 1fr 1fr; > 

شما اکنون آهنگ های انعطاف پذیر دارید. واحد FR به طور متناسب فضا را توزیع می کند. شما می توانید مقادیر مثبت مختلفی را برای آهنگ های خود مشخص کنید مانند:

کانتینر  نمایش دادن:توری; ستونهای شبکه:2fr 1fr 1fr; > 

آهنگ اول از 2fr از فضای موجود برخوردار است و دو آهنگ دیگر 1FR را نیز دریافت می کنند و اولین آهنگ را بزرگتر می کند. می توانید واحدهای FR را با واحدهای طول ثابت مخلوط کنید. در این حالت ، فضای مورد نیاز برای آهنگ های ثابت ابتدا قبل از توزیع فضای باقیمانده در آهنگ های دیگر استفاده می شود.

بدنه  عرض:90 ٪; حداکثر:900 px; لبه:2EM AUTO; قلم:0. 9EM/1. 2 Arial,هولیتیکا,بدون دندانه; > .container>قسمت  خطوط مرزی:5 عدد; لایه گذاری:10 عدد; رنگ پس زمینه: RGB(207,232,220); مرز:2px جامدRGB(79,185,227); > 

قسمت طبقه="کانتینر"> قسمت>یکیقسمت> قسمت>دوقسمت> قسمت>سهقسمت> قسمت>چهارقسمت> قسمت>پنجقسمت> قسمت>ششقسمت> قسمت>هفتقسمت> قسمت> 

توجه: واحد FR فضای موجود را توزیع می کند ، نه همه فضا. بنابراین ، اگر یکی از آهنگ های شما در داخل آن چیز بزرگی داشته باشد ، فضای آزاد کمتری برای اشتراک گذاری وجود خواهد داشت.

شکاف بین آهنگ ها

برای ایجاد شکاف بین آهنگ ها ، ما از خواص استفاده می کنیم:

• شکاف ستون برای شکاف بین ستون ها
• شکاف ردیف برای شکاف بین ردیف ها
• شکاف به عنوان یک کوتاه برای هر دو

کانتینر  نمایش دادن:توری; ستونهای شبکه:2fr 1fr 1fr; شکاف:20 قطعه; > 

این شکاف ها می توانند هر واحد یا درصد طول داشته باشند ، اما یک واحد FR نیست.

بدنه  عرض:90 ٪; حداکثر:900 px; لبه:2EM AUTO; قلم:0. 9EM/1. 2 Arial,هولیتیکا,بدون دندانه; > .container>قسمت  خطوط مرزی:5 عدد; لایه گذاری:10 عدد; رنگ پس زمینه: RGB(207,232,220); مرز:2px جامدRGB(79,185,227); > 

قسمت طبقه="کانتینر"> قسمت>یکیقسمت> قسمت>دوقسمت> قسمت>سهقسمت> قسمت>چهارقسمت> قسمت>پنجقسمت> قسمت>ششقسمت> قسمت>هفتقسمت> قسمت> 

توجه: خصوصیات شکاف (شکاف ستون ، شکاف ردیف و شکاف) توسط شبکه- پیشوند شده است. مشخصات تغییر کرده است اما نسخه های پیشوند به عنوان نام مستعار حفظ می شوند. برای اینکه در سمت امن باشید و کد خود را بیشتر ضد گلوله کنید ، می توانید هر دو ویژگی را اضافه کنید:

کانتینر  نمایش دادن:توری; ستونهای شبکه:2fr 1fr 1fr; شبکه:20 قطعه; شکاف:20 قطعه; > 

تکرار لیست های آهنگ

شما می توانید با استفاده از عملکرد تکرار CSS () همه یا صرفاً بخشی از لیست آهنگ خود را تکرار کنید. لیست آهنگ خود را به موارد زیر تغییر دهید:

کانتینر  نمایش دادن:توری; ستونهای شبکه: تکرار(3,1fr); شکاف:20 قطعه; > 

اکنون مانند گذشته سه آهنگ 1FR دریافت خواهید کرد. مقدار اول منتقل شده به عملکرد تکرار () تعداد دفعاتی را که می خواهید لیست را تکرار کند مشخص می کند ، در حالی که مقدار دوم یک لیست آهنگ است که ممکن است یک یا چند آهنگ باشد که می خواهید تکرار کنید.

شبکه ضمنی و صریح

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

• شبکه صریح: ایجاد شده با استفاده از-ستون های شبکه یا ردیف های شبکه.
• شبکه ضمنی: هنگامی که محتوا در خارج از آن شبکه قرار می گیرد ، مانند در ردیف های ما با ترسیم خطوط شبکه اضافی ، شبکه صریح تعریف شده را گسترش می دهد.

به طور پیش فرض ، آهنگ های ایجاد شده در شبکه ضمنی به اندازه خودکار هستند که به طور کلی به این معنی است که آنها به اندازه کافی بزرگ هستند تا محتوای آنها را در خود جای دهند. اگر می خواهید به اندازه های شبکه ضمنی اندازه دهید ، می توانید از خواص Grid-Auto-Rows و Grid-Auto-Columns استفاده کنید. اگر ردیف های Grid-Auto را با مقدار 100px به CSS خود اضافه کنید ، خواهید دید که این ردیف های ایجاد شده اکنون 100 پیکسل بلند هستند.

بدنه  عرض:90 ٪; حداکثر:900 px; لبه:2EM AUTO; قلم:0. 9EM/1. 2 Arial,هولیتیکا,بدون دندانه; > .container>قسمت  خطوط مرزی:5 عدد; لایه گذاری:10 عدد; رنگ پس زمینه: RGB(207,232,220); مرز:2px جامدRGB(79,185,227); > 

قسمت طبقه="کانتینر"> قسمت>یکیقسمت> قسمت>دوقسمت> قسمت>سهقسمت> قسمت>چهارقسمت> قسمت>پنجقسمت> قسمت>ششقسمت> قسمت>هفتقسمت> قسمت> 

کانتینر  نمایش دادن:توری; ستونهای شبکه: تکرار(3,1fr); شبکه-اتو ردیف:100 پیروز; شکاف:20 قطعه; > 

عملکرد minmax ()

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

عملکرد Minmax () به ما امکان می دهد حداقل و حداکثر اندازه را برای یک مسیر تنظیم کنیم ، به عنوان مثال Minmax (100px ، Auto). حداقل اندازه 100 پیکسل است ، اما حداکثر آن خودکار است که برای تهیه محتوای بیشتر گسترش می یابد. برای استفاده از یک مقدار minmax ، ردیف های Grid-auto را تغییر دهید:

کانتینر  نمایش دادن:توری; ستونهای شبکه: تکرار(3,1fr); شبکه-اتو ردیف: ممتاز(100 پیروز,خودکار); شکاف:20 قطعه; > 

اگر محتوای اضافی اضافه کنید ، می بینید که این مسیر گسترش می یابد تا اجازه دهد تا آن جا بیفتد. توجه داشته باشید که گسترش درست در امتداد ردیف اتفاق می افتد.

همانطور که بسیاری از ستون ها متناسب هستند

ما می توانیم برخی از درسهایی را که در مورد لیست آهنگ ، تکرار نماد و Minmax () آموخته ایم ، ترکیب کنیم تا یک الگوی مفید ایجاد کنیم. بعضی اوقات مفید است که بتوانیم از Grid بخواهید به همان تعداد ستون هایی که در ظرف قرار می گیرد ، ایجاد کند. ما این کار را با تنظیم مقدار ستون های-template-template با استفاده از عملکرد تکرار () انجام می دهیم ، اما به جای اینکه در یک عدد عبور کنیم ، در صفحه کلیدی را پر کنید. برای پارامتر دوم عملکرد ما از minmax () با حداقل مقدار برابر با حداقل اندازه آهنگ که دوست داریم استفاده کنیم و حداکثر 1fr استفاده می کنیم.

این کار را در پرونده خود اکنون با استفاده از CSS زیر امتحان کنید:

بدنه  عرض:90 ٪; حداکثر:900 px; لبه:2EM AUTO; قلم:0. 9EM/1. 2 Arial,هولیتیکا,بدون دندانه; > .container>قسمت  خطوط مرزی:5 عدد; لایه گذاری:10 عدد; رنگ پس زمینه: RGB(207,232,220); مرز:2px جامدRGB(79,185,227); > 

قسمت طبقه="کانتینر"> قسمت>یکیقسمت> قسمت>دوقسمت> قسمت>سهقسمت> قسمت>چهارقسمت> قسمت>پنجقسمت> قسمت>ششقسمت> قسمت>هفتقسمت> قسمت> 

کانتینر  نمایش دادن:توری; ستونهای شبکه: تکرار(خود را پر کردن, ممتاز(200 پیک,1fr)); شبکه-اتو ردیف: ممتاز(100 پیروز,خودکار); شکاف:20 قطعه; > 

این کار به این دلیل است که Grid به همان اندازه ستون های 200 پیکسل ایجاد می شود که در ظرف قرار می گیرد ، سپس به اشتراک گذاشتن هر فضای باقی مانده در بین همه ستون ها. حداکثر 1fr است که ، همانطور که از قبل می دانیم ، فضا را به طور مساوی بین آهنگ ها توزیع می کند.

جایگاه مبتنی بر خط

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

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

این خصوصیات همه می توانند یک شماره خط به عنوان مقدار خود داشته باشند. همچنین می توانید از خواص Shorthand استفاده کنید:

اینها به شما امکان می دهد خطوط شروع و پایان را به طور همزمان مشخص کنید ، که توسط یک برش رو به جلو جدا شده اید.

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

در عوض بیایید با استفاده از خطوط شبکه ، تمام عناصر را برای سایت خود ترتیب دهیم. قوانین زیر را به پایین CSS خود اضافه کنید:

سرتیتر  کلنگ:1/3; شبکه: 1; > مقاله  کلنگ: 2; شبکه: 2; > گذشته از  کلنگ: 1; شبکه: 2; > پشته  کلنگ:1/3; شبکه: 3; > 

بدنه  عرض:90 ٪; حداکثر:900 px; لبه:2EM AUTO; قلم:0. 9EM/1. 2 Arial,هولیتیکا,بدون دندانه; > کانتینر  نمایش دادن:توری; ستونهای شبکه:1fr 3fr; شکاف:20 قطعه; > هدر ، پاورقی  خطوط مرزی:5 عدد; لایه گذاری:10 عدد; رنگ پس زمینه: RGB(207,232,220); مرز:2px جامدRGB(79,185,227); > گذشته از  مرزی:1px جامد #999; > 

قسمت طبقه="کانتینر"> سرتیتر>این وبلاگ دوست داشتنی من استسرتیتر> مقاله> h1>مقاله منh1> p>DUIS FELIS ORCI ، PULVINAR ID METUS UT ، RUTRUM LUCTUS ORCI. Cras Porttitor Imperdiet nunc ، در Ultricies Tellus Laoreet Sit Amet. sed auctor cursus massa در پورتا. INTEGER LIGULA IPSUM ، TRISTIQUE SIT AMET ORCI VEL ، VIVERRA EGESTAS LIGULA. Curabitur Vehicula tellus neque ، ac oare ex malesuada et. در Vitae convallis lacus. Aliquam Erat Volutpat. Assendisse ac Imperdiet Turpis. Aenean Finibus Sollicitudin Eros Pharetra Congue. duis oare egestas augue ut luctus. Proin Blandit Quam nec lacus varius commodo و ua. ut id oare felis ، eget fermentum sapien.p> p>برای قطر مخرب یا در زمان نوشیدن. متأسفانه ، تبلیغات عزاداری به بسکتبال Malesuada نیاز دارد. نام زشت این است که یک پروتئین هویج را به آنتی اکسیدان ها وارد کنید ، اما این است. برای آن لبخند که همیشه نیاز اصلی مشتری است. درد توسعه دهنده مخزن زنده ، اما قیمت ترس دریافت می کند. مائوریس Ultricies فارغ التحصیل شد ، اما کارتن به پایان می رسد. Vivamus football ua eget velit در حال اجرا هر سالاد تولیدی را بکشید. آخرین توسعه دهندگان به پروتئین به فلفل دلمه ای احتیاج دارند. هنگامی که پرتوهای و فشار زیادی از کوهها را می کشد ، متولد می شود.p> مقاله> گذشته از> h2>چیز های دیگرh2> p>برای قطر مخرب یا در زمان نوشیدن. متأسفانه ، تبلیغات عزاداری به بسکتبال Malesuada نیاز دارد. نام زشت این است که یک پروتئین هویج را به آنتی اکسیدان ها وارد کنید ، اما این است.p> گذشته از> پشته>با me@example. com تماس بگیریدپشته> قسمت> 

توجه: همچنین می توانید از مقدا ر-1 برای هدف قرار دادن ستون پایان یا خط ردیف استفاده کنید ، سپس با استفاده از مقادیر منفی از انتها به سمت داخل بشمارید. همچنین توجه داشته باشید که خطوط همیشه از لبه های شبکه صریح حساب می شوند ، نه شبکه ضمنی.

موقعیت با شبکه های شبکه

یک روش جایگزین برای ترتیب دادن موارد در شبکه شما استفاده از خاصیت AREAS GRID-Template و ارائه عناصر مختلف طراحی شما با نام است.

موقعیت یابی مبتنی بر خط را از آخرین مثال حذف کنید (یا پرونده را دوباره بارگیری کنید تا یک نقطه شروع تازه داشته باشید) و CSS زیر را اضافه کنید.

کانتینر  نمایش دادن:توری; ابهام: "هدر هدر" "محتوای نوار کناری" "پاورقی پاورقی"; ستونهای شبکه:1fr 3fr; شکاف:20 قطعه; > سرتیتر  منطقه شبکه:سرتیتر; > مقاله  منطقه شبکه:محتوا; > گذشته از  منطقه شبکه:نوار کناری; > پشته  منطقه شبکه:پشته; > 

بارگذاری مجدد صفحه و خواهید دید که موارد شما دقیقاً مانند گذشته قرار داده شده است بدون اینکه ما نیاز به استفاده از هر شماره خط داشته باشیم!

بدنه  عرض:90 ٪; حداکثر:900 px; لبه:2EM AUTO; قلم:0. 9EM/1. 2 Arial,هولیتیکا,بدون دندانه; > هدر ، پاورقی  خطوط مرزی:5 عدد; لایه گذاری:10 عدد; رنگ پس زمینه: RGB(207,232,220); مرز:2px جامدRGB(79,185,227); > گذشته از  مرزی:1px جامد #999; > 

قسمت طبقه="کانتینر"> سرتیتر>این وبلاگ دوست داشتنی من استسرتیتر> مقاله> h1>مقاله منh1> p>DUIS FELIS ORCI ، PULVINAR ID METUS UT ، RUTRUM LUCTUS ORCI. Cras Porttitor Imperdiet nunc ، در Ultricies Tellus Laoreet Sit Amet. sed auctor cursus massa در پورتا. INTEGER LIGULA IPSUM ، TRISTIQUE SIT AMET ORCI VEL ، VIVERRA EGESTAS LIGULA. Curabitur Vehicula tellus neque ، ac oare ex malesuada et. در Vitae convallis lacus. Aliquam Erat Volutpat. Assendisse ac Imperdiet Turpis. Aenean Finibus Sollicitudin Eros Pharetra Congue. duis oare egestas augue ut luctus. Proin Blandit Quam nec lacus varius commodo و ua. ut id oare felis ، eget fermentum sapien.p> p>برای قطر مخرب یا در زمان نوشیدن. متأسفانه ، تبلیغات عزاداری به بسکتبال Malesuada نیاز دارد. نام زشت این است که یک پروتئین هویج را به آنتی اکسیدان ها وارد کنید ، اما این است. برای آن لبخند که همیشه نیاز اصلی مشتری است. درد توسعه دهنده مخزن زنده ، اما قیمت ترس دریافت می کند. مائوریس Ultricies فارغ التحصیل شد ، اما کارتن به پایان می رسد. Vivamus football ua eget velit در حال اجرا هر سالاد تولیدی را بکشید. آخرین توسعه دهندگان به پروتئین به فلفل دلمه ای احتیاج دارند. هنگامی که پرتوهای و فشار زیادی از کوهها را می کشد ، متولد می شود.p> مقاله> گذشته از> h2>چیز های دیگرh2> p>برای قطر مخرب یا در زمان نوشیدن. متأسفانه ، تبلیغات عزاداری به بسکتبال Malesuada نیاز دارد. نام زشت این است که یک پروتئین هویج را به آنتی اکسیدان ها وارد کنید ، اما این است.p> گذشته از> پشته>با me@example. com تماس بگیریدپشته> قسمت> 

قوانین مربوط به شبکه های شبکه به شرح زیر است:

• شما باید هر سلول از شبکه را پر کنید.
• برای دور شدن در دو سلول ، نام را تکرار کنید.
• برای خالی کردن سلول ، از a استفاده کنید.(دوره زمانی).
• مناطق باید مستطیل باشند - به عنوان مثال ، شما نمی توانید یک منطقه 50 شکل داشته باشید.
• مناطق نمی توانند در مکان های مختلف تکرار شوند.

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

چارچوب های شبکه در شبکه CSS

"چارچوب های" شبکه تمایل دارند که در حدود 12 یا 16-ستون شبکه مستقر شوند. با استفاده از CSS Grid ، شما نیازی به ابزار شخص ثالث ندارید تا چنین چارچوبی را به شما ارائه دهد - این در حال حاضر در مشخصات است.

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

سرتیتر  کلنگ:1/13; شبکه: 1; > مقاله  کلنگ:4/13; شبکه: 2; > گذشته از  کلنگ:1/4; شبکه: 2; > پشته  کلنگ:1/13; شبکه: 3; > 

بدنه  عرض:90 ٪; حداکثر:900 px; لبه:2EM AUTO; قلم:0. 9EM/1. 2 Arial,هولیتیکا,بدون دندانه; > کانتینر  نمایش دادن:توری; ستونهای شبکه: تکرار(12, ممتاز(0,1fr)); شکاف:20 قطعه; > هدر ، پاورقی  خطوط مرزی:5 عدد; لایه گذاری:10 عدد; رنگ پس زمینه: RGB(207,232,220); مرز:2px جامدRGB(79,185,227); > گذشته از  مرزی:1px جامد #999; > 

قسمت طبقه="کانتینر"> سرتیتر>این وبلاگ دوست داشتنی من استسرتیتر> مقاله> h1>مقاله منh1> p>DUIS FELIS ORCI ، PULVINAR ID METUS UT ، RUTRUM LUCTUS ORCI. Cras Porttitor Imperdiet nunc ، در Ultricies Tellus Laoreet Sit Amet. sed auctor cursus massa در پورتا. INTEGER LIGULA IPSUM ، TRISTIQUE SIT AMET ORCI VEL ، VIVERRA EGESTAS LIGULA. Curabitur Vehicula tellus neque ، ac oare ex malesuada et. در Vitae convallis lacus. Aliquam Erat Volutpat. Assendisse ac Imperdiet Turpis. Aenean Finibus Sollicitudin Eros Pharetra Congue. duis oare egestas augue ut luctus. Proin Blandit Quam nec lacus varius commodo و ua. ut id oare felis ، eget fermentum sapien.p> p>برای قطر مخرب یا در زمان نوشیدن. متأسفانه ، تبلیغات عزاداری به بسکتبال Malesuada نیاز دارد. نام زشت این است که یک پروتئین هویج را به آنتی اکسیدان ها وارد کنید ، اما این است. برای آن لبخند که همیشه نیاز اصلی مشتری است. درد توسعه دهنده مخزن زنده ، اما قیمت ترس دریافت می کند. مائوریس Ultricies فارغ التحصیل شد ، اما کارتن به پایان می رسد. Vivamus football ua eget velit در حال اجرا هر سالاد تولیدی را بکشید. آخرین توسعه دهندگان به پروتئین به فلفل دلمه ای احتیاج دارند. هنگامی که پرتوهای و فشار زیادی از کوهها را می کشد ، متولد می شود.p> مقاله> گذشته از> h2>چیز های دیگرh2> p>برای قطر مخرب یا در زمان نوشیدن. متأسفانه ، تبلیغات عزاداری به بسکتبال Malesuada نیاز دارد. نام زشت این است که یک پروتئین هویج را به آنتی اکسیدان ها وارد کنید ، اما این است.p> گذشته از> پشته>با me@example. com تماس بگیریدپشته> قسمت> 

اگر از بازرس شبکه Firefox برای پوشیدن خطوط شبکه در طراحی خود استفاده می کنید ، می توانید ببینید که شبکه 12 ستونی ما چگونه کار می کند.

مهارت های خود را امتحان کنید!

شما به پایان این مقاله رسیده اید ، اما آیا می توانید مهمترین اطلاعات را به خاطر بسپارید؟می توانید آزمایش های دیگری پیدا کنید تا تأیید کنید که این اطلاعات را قبل از ادامه کار حفظ کرده اید - به تست مهارت های خود مراجعه کنید: Grid.

خلاصه

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

همچنین ببینید

• راهنمای شبکه CSS
• بازرس شبکه CSS: طرح بندی شبکه را بررسی کنید
• راهنمای CS S-Tricks برای شبکه - مقاله ای که همه چیز را در مورد شبکه به روشی جذاب و بصری توضیح می دهد
• Garden Grid - یک بازی آموزشی برای یادگیری و درک بهتر اصول اولیه شبکه

• قبلی
• نمای کلی: طرح CSS
• بعد

با این صفحه مشکل محتوا پیدا کرده اید؟

• صفحه را در GitHub ویرایش کنید.
• گزارش محتوا را گزارش دهید.
• منبع را در GitHub مشاهده کنید.

این صفحه آخرین بار در 22 مارس 2023 توسط همکاران MDN اصلاح شد.

طرح شما برای اینترنت بهتر.