{
  "id": "css-grid",
  "title": "সিএসএস গ্রিড",
  "slug": "css-grid",
  "description": "গ্রিড লেআউট আমাদেরকে এইচটিএমএলের চিন্তা বাদ দিয়ে শুধুমাত্র সিএসএস ব্যবহার করে গ্রিড স্ট্রাকচার তৈরী করতে সাহায্য করে। এর সাহায্যে আমরা লেআউট তৈরী করতে পারি যেগুলো আবার পরবর্তিতে মিডিয়া কোয়েরী ব্যবহার করে পুনরায় ডিফাইন করা সম্ভব এবং একই সাথে বিভিন্ন রকম কন্টেক্সট এ মানিয়ে নিতে পারে। গ্রিড লেআউট আমাদেরকে সোর্স ইলিমেন্ট আর ভিজুয়্যাল প্রেসেন্টেশন এর অর্ডার সম্পূর্ণ পৃথকভাবে ডিফাইন করতে সাহায্য করে যা এই রেস্পন্সিভ ডিজাইনের দুনিয়াতে খুবই গুরুত্বপূর্ন এবং একইসাথে কাজের।",
  "colorPref": "#FF9800",
  "contents": [
    {
      "title": "ব্যাসিক ধারণা",
      "items": [
        {
          "definition": "গ্রিড অ্যাপ্লাই করা হয় সিএসএস প্রপার্টি display দিয়ে",
          "code": "display: grid;"
        },
        {
          "definition": "যে ইলিমেন্ট এ গ্রিড প্রপার্টি অ্যাপ্লাই করা হয় সেটা গ্রিড কন্টেইনার। কন্টেইনারে অ্যাপ্লাই করা যাবে এমন সিএসএস প্রপার্টিগুলো কন্টেইনার দিয়ে চিহ্নিত করা হয়েছে",
          "code": "কন্টেইনার"
        },
        {
          "definition": "কন্টেইনারের ভিতরের চিলড্রেন ইলিমেন্টকে গ্রিড আইটেম হিসেবে ধরা হয়। চিলড্রেনে অ্যাপ্লাই করা যাবে এমন সিএসএস প্রপার্টিগুলো চিলড্রেন দিয়ে চিহ্নিত করা হয়েছে",
          "code": "চিলড্রেন"
        }
      ]
    },
    {
      "title": "কন্টেইনার - গ্রিড ফরম্যাট",
      "items": [
        {
          "definition": "ব্লক লেভেল গ্রিড",
          "code": "display: grid;"
        },
        {
          "definition": "ইনলাইন লেভেল গ্রিড",
          "code": "display: inline-grid;"
        },
        {
          "definition": "সাব-গ্রিড",
          "code": "display: subgrid;"
        }
      ]
    },
    {
      "title": "কন্টেইনার - গ্রিড টেমপ্লেট(কলাম)",
      "items": [
        {
          "definition": "গ্রিডের কলাম ডিফাইন করা",
          "code": "grid-template-columns: <লম্বা(%,fr,px)> ... | <নাম> <লম্বা(%,fr,px)> ...;"
        },
        {
          "definition": "গ্রিড কলাম উদাহরণ(পিক্সেল দিয়ে)",
          "code": "grid-template-columns: 12px 12px 12px;"
        },
        {
          "definition": "গ্রিড কলাম উদাহরণ(ফাংশন দিয়ে)",
          "code": "grid-template-columns: repeat(3, 12px);"
        },
        {
          "definition": "গ্রিড কলাম উদাহরণ(অটো)",
          "code": "grid-template-columns: 8px auto 8px;"
        },
        {
          "definition": "গ্রিড কলাম উদাহরণ(পার্সেন্টিজ)",
          "code": "grid-template-columns: 22% 22% auto;"
        }
      ]
    },
    {
      "title": "কন্টেইনার - গ্রিড টেমপ্লেট(সারি)",
      "items": [
        {
          "definition": "গ্রিডের সারি ডিফাইন করা",
          "code": "grid-template-rows: <লম্বা(%,fr,px)> ... | <নাম> <লম্বা(%,fr,px)> ...;"
        },
        {
          "definition": "গ্রিড সারি উদাহরণ(পিক্সেল দিয়ে)",
          "code": "grid-template-rows: 12px 12px 12px;"
        },
        {
          "definition": "গ্রিড সারি উদাহরণ(ফাংশন দিয়ে)",
          "code": "grid-template-rows: repeat(3, 12px);"
        },
        {
          "definition": "গ্রিড সারি উদাহরণ(অটো)",
          "code": "grid-template-rows: 8px auto 8px;"
        },
        {
          "definition": "গ্রিড সারি উদাহরণ(পার্সেন্টিজ)",
          "code": "grid-template-rows: 22% 22% auto;"
        }
      ]
    },
    {
      "title": "কন্টেইনার - ফাঁকা জায়গা",
      "items": [
        {
          "definition": "সারিতে ফাঁকা জায়গা",
          "code": "grid-row-gap: 1px;"
        },
        {
          "definition": "কলামে ফাঁকা জায়গা",
          "code": "grid-column-gap: 9px;"
        },
        {
          "definition": "দুইটা শর্টকাটে",
          "code": "grid-gap: 1px 9px;"
        },
        {
          "definition": "একই জায়গা সারি ও কলামে শর্টকাটে",
          "code": "grid-gap: 6px;"
        }
      ]
    },
    {
      "title": "কন্টেইনার - গ্রিড আইটেম সারিতে অ্যালাইনমেন্ট",
      "items": [
        {
          "definition": "শুরুতে অ্যালাইনমেন্ট সেট করা",
          "code": "justify-items: start;"
        },
        {
          "definition": "শেষের দিকে অ্যালাইনমেন্ট সেট করা",
          "code": "justify-items: end;"
        },
        {
          "definition": "মাঝখানে অ্যালাইনমেন্ট সেট করা",
          "code": "justify-items: center;"
        },
        {
          "definition": "ছড়িয়ে দেওয়া (ডিফল্ট)",
          "code": "justify-items: stretch;"
        }
      ]
    },
    {
      "title": "কন্টেইনার - গ্রিড আইটেম কলামে অ্যালাইনমেন্ট",
      "items": [
        {
          "definition": "শুরুর দিকে অ্যালাইনমেন্ট সেট করা",
          "code": "align-items: start;"
        },
        {
          "definition": "শেষের দিকে অ্যালাইনমেন্ট সেট করা",
          "code": "align-items: end;"
        },
        {
          "definition": "মাঝখানে অ্যালাইনমেন্ট সেট করা",
          "code": "align-items: center;"
        },
        {
          "definition": "(ডিফল্ট) ছড়িয়ে দেওয়া",
          "code": "align-items: stretch;"
        }
      ]
    },
    {
      "title": "কন্টেইনার - গ্রিড কন্টেন্ট সারিতে অ্যালাইনমেন্ট",
      "items": [
        {
          "definition": "শুরুর দিকে সেট করা",
          "code": "justify-content: start;"
        },
        {
          "definition": "শেষের দিকে সেট করা",
          "code": "justify-content: end;"
        },
        {
          "definition": "মাঝখানে সেট করা",
          "code": "justify-content: center;"
        },
        {
          "definition": "ছড়িয়ে দেওয়া",
          "code": "justify-content: stretch;"
        },
        {
          "definition": "আইটেমের চারদিকে স্পেস ছড়িয়ে দেওয়া",
          "code": "justify-content: space-around;"
        },
        {
          "definition": "আইটেমের মধ্যবর্তী স্পেস ছড়িয়ে দেওয়া",
          "code": "justify-content: space-between;"
        },
        {
          "definition": "আইটেমের মধ্যে সমান্তরালভাবে স্পেস ছড়িয়ে দেওয়া",
          "code": "justify-content: space-evenly;"
        }
      ]
    },
    {
      "title": "কন্টেইনার - গ্রিড কন্টেন্ট কলামে অ্যালাইনমেন্ট",
      "items": [
        {
          "definition": "শুরুর দিকে সেট করা",
          "code": "align-content: start;"
        },
        {
          "definition": "শেষের দিকে সেট করা",
          "code": "align-content: end;"
        },
        {
          "definition": "মাঝখানে সেট করা",
          "code": "align-content: center;"
        },
        {
          "definition": "ছড়িয়ে দেওয়া",
          "code": "align-content: stretch;"
        },
        {
          "definition": "আইটেমের চারদিকে স্পেস ছড়িয়ে দেওয়া",
          "code": "align-content: space-around;"
        },
        {
          "definition": "আইটেমের মধ্যবর্তী স্পেস ছড়িয়ে দেওয়া",
          "code": "align-content: space-between;"
        },
        {
          "definition": "আইটেমের মধ্যে সমান্তরালভাবে স্পেস ছড়িয়ে দেওয়া",
          "code": "align-content: space-evenly;"
        }
      ]
    },
    {
      "title": "কন্টেইনার - অটো প্লেস অ্যালগরিদম",
      "items": [
        {
          "definition": "প্রত্যেকটা সারি পূর্ণ করে আইটেম রাখা",
          "code": "#grid-auto-flow: row;"
        },
        {
          "definition": "প্রত্যেকটা কলাম পূর্ণ করে আইটেম রাখা",
          "code": "grid-auto-flow: column;"
        },
        {
          "definition": "ডেন্স প্যাকিং অ্যালগরিদম ব্যবহার করে ছোটো আইটেম থাকা সত্ত্বেও বড় আইটেমের কারণে সৃষ্ট ফাঁকা যায়গা অর্ডার ভেঙ্গে ভরাট করা",
          "code": "grid-auto-flow: dense;"
        }
      ]
    },
    {
      "title": "চিলড্রেন - গ্রিড কলাম",
      "items": [
        {
          "definition": "কলামের শুরু সেট করা",
          "code": "grid-column-start: 1;"
        },
        {
          "definition": "কলামের শেষ সেট করা",
          "code": "grid-column-end: 3;"
        },
        {
          "definition": "কলামের ব্যপ্তি সেট করা",
          "code": "grid-column-start: span 3;"
        },
        {
          "definition": "শর্টকাটে",
          "code": "grid-column: 2 / 3"
        },
        {
          "definition": "ব্যপ্তিসহ শর্টকাটে",
          "code": "grid-column: 2 / span 2"
        }
      ]
    },
    {
      "title": "চিলড্রেন - গ্রিড সারি",
      "items": [
        {
          "definition": "সারির শুরু সেট করা",
          "code": "grid-row-start: 1;"
        },
        {
          "definition": "সারির শেষ সেট করা",
          "code": "grid-row-end: 3;"
        },
        {
          "definition": "সারির ব্যপ্তি সেট করা",
          "code": "grid-row-start: span 3;"
        },
        {
          "definition": "শর্টকাট",
          "code": "grid-row: 1 / 3;"
        },
        {
          "definition": "ব্যপ্তিসহ শর্টকাট",
          "code": "grid-row: 1 / span 3;"
        }
      ]
    },
    {
      "title": "চিলড্রেন - সারিতে নিজের অ্যালাইনমেন্ট",
      "items": [
        {
          "definition": "শুরুর দিকে",
          "code": "justify-self: start;"
        },
        {
          "definition": "শেষের দিকে",
          "code": "justify-self: end;"
        },
        {
          "definition": "মাঝখানে",
          "code": "justify-self: center;"
        },
        {
          "definition": "(ডিফল্ট) ছড়িয়ে দেওয়া",
          "code": "justify-self: stretch;"
        }
      ]
    },
    {
      "title": "চিলড্রেন - কলামে নিজের অ্যালাইনমেন্ট",
      "items": [
        {
          "definition": "শুরুর দিকে",
          "code": "align-self: start;"
        },
        {
          "definition": "শেষের দিকে",
          "code": "align-self: end;"
        },
        {
          "definition": "মাঝখানে",
          "code": "align-self: center;"
        },
        {
          "definition": "(ডিফল্ট) ছড়িয়ে দেওয়া",
          "code": "align-self: stretch;"
        }
      ]
    }
  ]
}