توضیحات

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

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

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

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

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

برای بهتر فهمیدن CSS Grid ویدیو معرفی دوره را مشاهده کنید

پیش نیاز این دوره فوق العاده :

دوره های پیشنهادی، بعد از گذراندن این دوره :


HTML CSS طراحی وب طراحی واکنشگرا grid layout طراحی سایت

مدرس دوره علی شیخ
مدت دوره 02:19:59
تعداد ویدو 14

وضعیت دوره : کامل شده
قیمت دوره : رایگان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • استاد برای bootstrap نباید قبلش sass رو یاد بگیرم اینجوری بهتر نیست ؟؟
    یه سوال دیگه استاد Grid Layout رو یاد بگیریم خوبه ؟؟ بعد یا قبل از چه زبانی یادش بگیریم بهتره؟؟؟؟
    من که flexbox , css , html رو بلدم نیازی به Grid Layout هست و این زبان چه فرقی میکنه؟
    با تشکر

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

  • سلام علی آقا مخلصیم خسته نباشید
    استاد یه سوال داشتم من html , css ,flexbox رو یاد گرفتم و بلدم میخواستم بدونم بعد اینا چیو یاد بگیرم میشه راهنماییم کنین...
    ممنونم♥

    • سلام وقت بخیر.
      با یکی از فریمورک های html و css مثله bootstrap، materialize و ...
      آشنا بشید.

  • به این صورت استفاده میشه
    header .css?v=<?php echo(mt_rand (10,72));?>"m
    اون m آخری جزو کد نیست مهندس گذاشتم کد مرتب در بیاد خیلی خوب کار میکنه منم رو کامپیوتر ctrl +f5 میزدم ولی اینو که قرار دادم با همون دکمه رفرش مرورگر به راحتی تغییرات رو اعمال میکنه رو هاست هم که تغییر میدم وقتی سایت رو باز کنم تغییرات اعمال شده فقط تو پرانتز باید عدد اول کوچکتر از عدد دوم باشه

  • دقیقا درسته اونجا که فایل css رو به سند php معرفی میکنیم جلوش از تابع mt_rand استفاده میکنیم اینطوری مرورگر هربار که تغییرات میدیم اونو یک ورژن جدید به حساب میاره و کش نمیکنه من خیلی سرچ کردم فقط یه سایت ایرانی اشاره کرده بود به این موضوع که مشکل یکی از کاربرانش بود و با این تابع مشکلش حل شد به زبان انگلیسی هم سرچ کردم چرا تغییرات css اعمال نمیشه همین تابع رو مثال زده بود
    به این صورت استفاده میشه مهندس جان
    ""

  • سلام مهندس علی عزیز از این لحاظ گفتم از mt_rand استفاده باید کرد چون مخاطب سایت که نمیاد کش مرورگر پاک کنه باید اتوماتیک تغییرات اعمال بشه

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

  • سلام علی جان تو موبایل منظورم بود که کش مرورگر رو پاک کردم درست شد دمت گرم استاد از تابع mt_rand که استفاده کردم جای عدد بزرگ و کوچک اشتباه بود از سایت استک کپی کردم ولی تو سایتای ایرانی گفته بود عدد کوچکتر اول باشه الان درست کار میکنه حالا که از mt_rand درست استفاده کردم احتمالش هست اگه تغییری دادم بازم مرورگر کش کنه و نشون نده ؟ چون تو سایتها نوشته که mt_rand باعث میشه مرورگر فایل css رو از کش نخونه و تغییرات رو نشون بده

    • سلام وقت بخیر.
      شما کلا اگه تغییری توی فایل css و js دارید، بهتر هست کش مرورگر را پاک کنید

  • سلام علی جان من روی هاست تغییراتی روی فایل css خودم دادم از تابع mt_rand هم جلوی فایل css که معرفی کردم استفاده کردم تا مرورگر تغییرات رو لحاظ کنه مرورگر فایر فاکس تغییرات رو نشون میده البته باید اونجا که از تابع mt_rand استفاده کردم یه تغییری بدم مثلا مساوی اضافه یا کم کنم اما مرورگر کروم تغییرات رو نشون نمیده چیکار کنم که همه مرورگرها به درستی تغییرات رو نشون بدن با تشکر از سایت خوبتون

    • سلام وقت بخیر.
      به احتمال زیاد مرورگر شما کش کرده.باید ctl+f5 بزنید تو مرورگر تا دورباره مرورگر شما فایل ها رو بخونه.

    • سلام وقت بخیر.
      خیله عجیبه این موضوع!؟!؟
      یک پروژه جدید ایجاد و چک کنید.مطمن بشین فایل های css به درستی به پروژه اضافه شده باشه.inspect بگیرید بینید استایل به تگ ها داده میشه.

  • سلام به تیم خوب وب پروگ . . یه سوال داشتم . . من مبحث های دوره grid layout و دوره ی bootstrap رو بررسی کردم و اینطور که فهمیدم چیز هایی که در دوره grid layout آموزش داده میشه همون چیزاییه که تو دوره بوت استرپ آموزش داده میشه مثل row و col و . . .
    با این حال من میتونم مستقیم برم سر دوره بوت استرپ و دوره grid layout رو نبینم ؟

    • سلام. متفاوت هست و bootstrap از flexbox استفاده میکنه.و شما میتونین دوره bootstrap را مشاهده کنید و از grid layout رد بشین اما دوره flexbox را قبلش حتما ببینید