آموزش پروژه محور لایه بندی گرید در سی اس اس

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

آموزش پروژه محور

قدم اول:ساخت لایه ساده HTML

در شروع هر پروژه وب ابتدا باید یک لایه ساده با استفاده از HTML ایجاد کنیم،در این فایل اسکلت اولیه لایه گرید را تشکیل می دهیم و سپس با استفاده از Css به ظاهر و بخش های مختلف اسکلت استایل اعمال می کنیم.(در طول دوره HTML5 با تمامی بخشهای ساختار یک صفحه وب آشنا شده‌ایم).

بررسی المنتهای استفاده شده در کدهای بالا:

المنت section:از عنصر <section> برای تعیین یک بخش یا قسمت مجزا در یک سند وب استفاده می شود.در کدهای بالا ما از المنت section برای ایجاد بخشهای مجزا هر لایه گرید استفاده می کنیم.

مطلب مرتبط:لیست اموزش های گرید در Css

المنت div:تگ <div> معرف یک دسته بندی یا یک بخش در یک HTML است. این تگ برای گروه بندی عناصر بلوک برای شکل گیری از طریق css در طراحی سایت استفاده می شود. در واقع تگ <div> در در طراحی سایت کاربرد فراوانی دارد. این تگ تا حد زیادی جایگزین تگ <table> در Html 4 است. ما در کدهای بالا از تگ Div برای دسته بندی کارت های نمایشی استفاده کرده ایم.

المنت article:تگ <article> محتوایی مستقل و جامع را مشخص می کند. یک Article باید به تنهایی دارای معنا و مفهوم باشد و بتوان آن را مستقل از سایر اجزای سایت در مکان های مختلف ارائه داد.در کدهای بالا ما از تگ Article برای نمایش اطلاعات استفاده کردیم.

قدم دوم:استایل دهی به عناصر با Css

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

در کدهای بالا اگر  با Css آشنا باشید،متوجه نحوه استایل دهی به عناصر خواهید شد.ما برای هرکدام از card ها یک تصویر برای نمایش و همچنین از box-shadow برای اعمال سایه به باکس ها یا کارت ها استفاده کردیم.

ویژگی های grid-template-columns و grid-template-rows

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

ویژگی grid-gap:از طریق این ویژگی می توان دو ویژگی grid-column-gap و grid-row-gap را بصورت مختصر و یکجا نوشت.

ویژگی grid-column-gap و grid-row-gap:با استفاده از این ویژگی ها می توان بین ستون ها و ردیف ها فاصله یا گپ بوجود آورد. که البته این فاصله بین ترک ها و لبه های نگهدارنده بوجود نمی آید. در ضمن به این گپ ها در صفحه آرایی Gutter گفته می شود. مقادیر این ویژگی های می تواند از واحدهای طولی و یا درصد استفاده کند که واحد درصد نمایانگر عرض عنصر نگهدارنده است.

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

See the Pen آموزش پروژه محور لایه بندی گرید در سی اس اس by CodeFriend(کدفرند) (@codefriend) on CodePen.0

کدفرند

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

همه مطالب این نویسنده

تاکنون هیچ نظری ثبت نشده است