CSS গ্রিড টেমপ্লেট কলামস: ডায়নামিক কলাম সংজ্ঞায় দক্ষতা অর্জন

CSS গ্রিড ওয়েব লেআউটে বিপ্লব এনেছে, যা অভূতপূর্ব নিয়ন্ত্রণ এবং নমনীয়তা প্রদান করে। এর অন্যতম মূল বৈশিষ্ট্য হলো grid-template-columns প্রোপার্টি, যা আপনাকে আপনার গ্রিডের কলামের কাঠামো নির্ধারণ করতে দেয়। বিভিন্ন স্ক্রিন সাইজ এবং বিষয়বস্তুর প্রয়োজনীয়তার সাথে খাপ খায় এমন প্রতিক্রিয়াশীল এবং ডায়নামিক লেআউট তৈরি করার জন্য এই প্রোপার্টিটি কীভাবে কার্যকরভাবে ব্যবহার করতে হয় তা বোঝা অত্যন্ত গুরুত্বপূর্ণ।

grid-template-columns বোঝা

grid-template-columns প্রোপার্টি একটি গ্রিড কন্টেইনারে কলামের সংখ্যা এবং প্রস্থ নির্দিষ্ট করে। আপনি বিভিন্ন একক ব্যবহার করে কলামের আকার নির্ধারণ করতে পারেন, যার মধ্যে রয়েছে:

• নির্দিষ্ট দৈর্ঘ্য: পিক্সেল (px), পয়েন্ট (pt), সেন্টিমিটার (cm), মিলিমিটার (mm), ইঞ্চি (in)
• আপেক্ষিক দৈর্ঘ্য: Ems (em), rems (rem), ভিউপোর্ট প্রস্থ (vw), ভিউপোর্ট উচ্চতা (vh)
• ভগ্নাংশ ইউনিট: fr (গ্রিড কন্টেইনারে উপলব্ধ স্থানের একটি ভগ্নাংশকে প্রতিনিধিত্ব করে)
• কীওয়ার্ড: auto, min-content, max-content, minmax()

আসুন একটি সাধারণ উদাহরণ দিয়ে শুরু করা যাক:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

            

              
                Copy
              
            
          

এই কোডটি তিনটি কলাম সহ একটি গ্রিড তৈরি করে। প্রথম এবং তৃতীয় কলাম প্রতিটি উপলব্ধ স্থানের ১/৪ অংশ নেয়, যখন দ্বিতীয় কলামটি ২/৪ (বা ১/২) অংশ নেয়।

নির্দিষ্ট বনাম আপেক্ষিক ইউনিট

নির্দিষ্ট এবং আপেক্ষিক ইউনিটের মধ্যে নির্বাচন করা আপনার ডিজাইনের লক্ষ্যের উপর নির্ভর করে। পিক্সেলের মতো নির্দিষ্ট ইউনিটগুলো কলামের প্রস্থের উপর সুনির্দিষ্ট নিয়ন্ত্রণ প্রদান করে, কিন্তু এগুলো লেআউটকে কম নমনীয় এবং প্রতিক্রিয়াশীল করে তুলতে পারে। অন্যদিকে, আপেক্ষিক ইউনিটগুলো কলামকে স্ক্রিনের আকার বা বিষয়বস্তুর সাথে আনুপাতিকভাবে স্কেল করতে দেয়।

নির্দিষ্ট ইউনিট (পিক্সেল): যখন আপনার কোনো উপাদানের একটি নির্দিষ্ট, অপরিবর্তনীয় আকারের প্রয়োজন হয় তখন পিক্সেল ব্যবহার করুন। এটি একটি প্রতিক্রিয়াশীল গ্রিড লেআউটে কলামের জন্য কম সাধারণ, তবে নির্দিষ্ট ব্র্যান্ডিং প্রয়োজনীয়তা সহ উপাদানগুলোর জন্য কার্যকর হতে পারে। উদাহরণ:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 150px 300px;
}

            

              
                Copy
              
            
          

আপেক্ষিক ইউনিট (Ems, Rems, ভিউপোর্ট ইউনিট): এই ইউনিটগুলো আরও নমনীয়। em এবং rem ফন্ট আকারের সাথে আপেক্ষিক, যা আরও ভালো অ্যাক্সেসিবিলিটির জন্য উপাদানগুলোকে টেক্সট আকারের সাথে স্কেল করতে দেয়। vw এবং vh ভিউপোর্টের আকারের সাথে আপেক্ষিক, যা বিভিন্ন স্ক্রিনের মাত্রার সাথে খাপ খায় এমন লেআউট সক্ষম করে। উদাহরণ:

            .grid-container {
  display: grid;
  grid-template-columns: 10vw 20vw 70vw;
}

            

              
                Copy
              
            
          

ভগ্নাংশ ইউনিট (fr)

fr ইউনিটটি নমনীয় গ্রিড লেআউট তৈরির জন্য একটি শক্তিশালী টুল। এটি গ্রিড কন্টেইনারে অন্যান্য সমস্ত নির্দিষ্ট আকারের কলামগুলো বিবেচনা করার পরে উপলব্ধ স্থানের একটি ভগ্নাংশকে প্রতিনিধিত্ব করে। এটি অবশিষ্ট স্থান আনুপাতিকভাবে বিতরণ করার জন্য আদর্শ করে তোলে।

এই উদাহরণটি বিবেচনা করুন:

            .grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}

            

              
                Copy
              
            
          

এখানে, প্রথম কলামটি ১০০ পিক্সেল চওড়া। অবশিষ্ট স্থানটি দ্বিতীয় এবং তৃতীয় কলামের মধ্যে বিভক্ত করা হয়েছে, যেখানে দ্বিতীয় কলামটি অবশিষ্ট স্থানের ১/৩ অংশ এবং তৃতীয় কলামটি ২/৩ অংশ নেয়।

কীওয়ার্ড: auto, min-content, max-content

CSS গ্রিড কলামের প্রস্থ নির্ধারণের জন্য বেশ কিছু কীওয়ার্ড প্রদান করে:

• auto: ব্রাউজার স্বয়ংক্রিয়ভাবে তার বিষয়বস্তুর উপর ভিত্তি করে কলামের প্রস্থ গণনা করে।
• min-content: কলামের প্রস্থ তার বিষয়বস্তু ওভারফ্লো না করে ধারণ করার জন্য প্রয়োজনীয় সর্বনিম্ন আকারে সেট করা হয়। এর মানে হতে পারে দীর্ঘ শব্দগুলো র‍্যাপ (wrap) করা।
• max-content: কলামের প্রস্থ তার বিষয়বস্তু র‍্যাপ না করে ধারণ করার জন্য প্রয়োজনীয় সর্বোচ্চ আকারে সেট করা হয়। এটি সম্ভব হলে শব্দগুলোকে নতুন লাইনে র‍্যাপ হওয়া থেকে বিরত রাখবে।

auto ব্যবহার করে উদাহরণ:

            .grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

            

              
                Copy
              
            
          

এই ক্ষেত্রে, প্রথম এবং তৃতীয় কলামগুলো তাদের বিষয়বস্তুর সাথে মানানসই হওয়ার জন্য তাদের প্রস্থ সামঞ্জস্য করবে, যখন দ্বিতীয় কলামটি অবশিষ্ট স্থান দখল করবে।

min-content এবং max-content ব্যবহার করে উদাহরণ:

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
}

            

              
                Copy
              
            
          

প্রথম কলামটি কেবল তার ক্ষুদ্রতম বিষয়বস্তুর নির্দেশ মতো চওড়া হবে, যখন দ্বিতীয় কলামটি সম্ভব হলে তার সমস্ত বিষয়বস্তু এক লাইনে ফিট করার জন্য প্রসারিত হবে।

minmax() ফাংশন

minmax() ফাংশন আপনাকে একটি কলামের জন্য একটি সর্বনিম্ন এবং সর্বোচ্চ আকার নির্দিষ্ট করতে দেয়। এটি এমন কলাম তৈরির জন্য বিশেষভাবে কার্যকর যা উপলব্ধ স্থান পূরণ করতে প্রসারিত হতে পারে কিন্তু একটি নির্দিষ্ট আকারের নিচে সংকুচিত হয় না।

সিনট্যাক্স:

            minmax(min, max)

            

              
                Copy
              
            
          

উদাহরণ:

            .grid-container {
  display: grid;
  grid-template-columns: 100px minmax(200px, 1fr) 100px;
}

            

              
                Copy
              
            
          

এই উদাহরণে, প্রথম এবং তৃতীয় কলামগুলো ১০০ পিক্সেল এ স্থির করা হয়েছে। দ্বিতীয় কলামটির সর্বনিম্ন প্রস্থ ২০০ পিক্সেল এবং একটি সর্বোচ্চ প্রস্থ রয়েছে যা এটিকে প্রসারিত হতে এবং অবশিষ্ট স্থান পূরণ করতে দেয়। যদি অবশিষ্ট স্থান ২০০ পিক্সেলের কম হয়, তবে দ্বিতীয় কলামটি ২০০ পিক্সেল চওড়া হবে এবং গ্রিডটি ওভারফ্লো হতে পারে বা কলামগুলো আনুপাতিকভাবে সংকুচিত হতে পারে (গ্রিডের সামগ্রিক সীমাবদ্ধতার উপর নির্ভর করে)।

repeat() দিয়ে কলামের সংজ্ঞা পুনরাবৃত্তি করা

repeat() ফাংশনটি পুনরাবৃত্তিমূলক কলাম প্যাটার্ন সংজ্ঞায়িত করা সহজ করে তোলে। এটি দুটি আর্গুমেন্ট নেয়: প্যাটার্নটি কতবার পুনরাবৃত্তি করতে হবে এবং প্যাটার্নটি নিজেই।

সিনট্যাক্স:

            repeat(number, pattern)

            

              
                Copy
              
            
          

উদাহরণ:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

            

              
                Copy
              
            
          

এই কোডটি এর সমতুল্য:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

            

              
                Copy
              
            
          

আপনি অন্যান্য ইউনিট এবং কীওয়ার্ডের সাথে repeat() একত্রিত করতে পারেন:

            .grid-container {
  display: grid;
  grid-template-columns: 100px repeat(2, 1fr 200px) auto;
}

            

              
                Copy
              
            
          

এটি নিম্নলিখিত কলাম কাঠামো সহ একটি গ্রিড তৈরি করে: 100px, 1fr, 200px, 1fr, 200px, auto।

repeat() এর সাথে auto-fill এবং auto-fit ব্যবহার করা

repeat() এর সাথে ব্যবহৃত auto-fill এবং auto-fit কীওয়ার্ডগুলো ডায়নামিক কলাম তৈরি করে যা স্বয়ংক্রিয়ভাবে উপলব্ধ স্থানের সাথে সামঞ্জস্য করে। এগুলো প্রতিক্রিয়াশীল গ্যালারী বা তালিকা তৈরির জন্য বিশেষভাবে কার্যকর।

• auto-fill: কন্টেইনারটি ওভারফ্লো না করে যতটা সম্ভব কলাম তৈরি করে, এমনকি যদি কিছু কলাম খালি থাকে।
• auto-fit: auto-fill এর মতো, তবে খালি কলামগুলোকে ০ প্রস্থে সংকুচিত করে, যা অন্যান্য কলামগুলোকে প্রসারিত হতে এবং উপলব্ধ স্থান পূরণ করতে দেয়।

auto-fill ব্যবহার করে উদাহরণ:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

এটি যতটা সম্ভব কলাম তৈরি করে, প্রতিটির সর্বনিম্ন প্রস্থ ২০০ পিক্সেল এবং একটি সর্বোচ্চ প্রস্থ যা তাদের উপলব্ধ স্থান পূরণ করতে দেয়। যদি সমস্ত কলাম পূরণ করার জন্য পর্যাপ্ত বিষয়বস্তু না থাকে, তবে কিছু কলাম খালি থাকবে, কিন্তু তারা তখনও স্থান দখল করবে।

auto-fit ব্যবহার করে উদাহরণ:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

এটি auto-fill এর মতোই কাজ করে, তবে যদি খালি কলাম থাকে, তবে সেগুলো ০ প্রস্থে সংকুচিত হবে, এবং অবশিষ্ট কলামগুলো স্থান পূরণ করতে প্রসারিত হবে। প্রতিক্রিয়াশীল গ্রিডের জন্য এটি প্রায়শই কাঙ্ক্ষিত আচরণ।

নামযুক্ত গ্রিড লাইন

আপনি গ্রিড লাইনে নাম নির্ধারণ করতে পারেন, যা আপনার কোডকে আরও পঠনযোগ্য এবং রক্ষণাবেক্ষণযোগ্য করে তুলতে পারে। এটি grid-template-columns (এবং grid-template-rows) প্রোপার্টি নির্ধারণ করার সময় বর্গাকার বন্ধনীর মধ্যে নামগুলো আবদ্ধ করে করা হয়।

উদাহরণ:

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-2] 2fr [col-end];
}

            

              
                Copy
              
            
          

এই উদাহরণে, আমরা প্রথম গ্রিড লাইনটির নাম দিয়েছি col-start, দ্বিতীয় গ্রিড লাইনটির নাম col-2, এবং তৃতীয় গ্রিড লাইনটির নাম col-end। আপনি তারপর grid-column-start, grid-column-end, grid-row-start, এবং grid-row-end প্রোপার্টি ব্যবহার করে গ্রিড আইটেম স্থাপন করার সময় এই নামগুলো ব্যবহার করতে পারেন।

            .grid-item {
  grid-column-start: col-start;
  grid-column-end: col-2;
}

            

              
                Copy
              
            
          

এটি গ্রিড আইটেমটিকে col-start লাইনে শুরু করে এবং col-2 লাইনে শেষ করে স্থাপন করে।

ব্যবহারিক উদাহরণ এবং ব্যবহারের ক্ষেত্র

এখানে বাস্তব-বিশ্বের পরিস্থিতিতে grid-template-columns কীভাবে ব্যবহার করবেন তার কিছু ব্যবহারিক উদাহরণ দেওয়া হলো:

১. প্রতিক্রিয়াশীল নেভিগেশন বার

একটি নেভিগেশন বার যা বিভিন্ন স্ক্রিনের আকারের সাথে খাপ খায়:

            .navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px;
}

.logo {
  /* Styles for logo */
}

.nav-links {
  display: flex;
  justify-content: space-around;
}

.search-bar {
  /* Styles for search bar */
}

@media (max-width: 768px) {
  .navbar {
    grid-template-columns: 1fr;
  }
  .nav-links {
    flex-direction: column;
  }
}

            

              
                Copy
              
            
          

এই উদাহরণে, নেভিগেশন বারে তিনটি কলাম রয়েছে: একটি লোগোর জন্য (auto), একটি নেভিগেশন লিঙ্কের জন্য (1fr), এবং একটি সার্চ বারের জন্য (auto)। ছোট স্ক্রিনে, গ্রিডটি একটি একক কলামে সংকুচিত হয়, এবং নেভিগেশন লিঙ্কগুলো উল্লম্বভাবে সজ্জিত হয়।

২. ইমেজ গ্যালারী

একটি প্রতিক্রিয়াশীল ইমেজ গ্যালারী যার কলামের সংখ্যা নমনীয়:

            .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.gallery-item {
  /* Styles for gallery items */
}

            

              
                Copy
              
            
          

এটি এমন একটি ইমেজ গ্যালারী তৈরি করে যার কলামগুলো কমপক্ষে ২৫০ পিক্সেল চওড়া এবং উপলব্ধ স্থান পূরণ করতে প্রসারিত হয়। auto-fit কীওয়ার্ডটি নিশ্চিত করে যে খালি কলামগুলো সংকুচিত হয়েছে, এবং ছবিগুলো সুন্দরভাবে কন্টেইনারটি পূরণ করে।

৩. সাইডবার সহ দুই-কলাম লেআউট

একটি নির্দিষ্ট-প্রস্থের সাইডবার এবং একটি নমনীয় প্রধান বিষয়বস্তু এলাকা সহ একটি ক্লাসিক দুই-কলাম লেআউট:

            .container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

.sidebar {
  /* Styles for sidebar */
}

.main-content {
  /* Styles for main content */
}

            

              
                Copy
              
            
          

সাইডবারটির একটি নির্দিষ্ট প্রস্থ ২৫০ পিক্সেল, যখন প্রধান বিষয়বস্তু এলাকাটি অবশিষ্ট স্থান নেয়।

৪. নামযুক্ত গ্রিড এলাকা সহ জটিল লেআউট

আরও জটিল লেআউটের জন্য, আপনি আপনার গ্রিডের নির্দিষ্ট এলাকা সংজ্ঞায়িত করতে grid-template-columns এর সাথে grid-template-areas একত্রিত করতে পারেন।

            .container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  /* Styles for header */
}

.sidebar {
  grid-area: sidebar;
  /* Styles for sidebar */
}

.main {
  grid-area: main;
  /* Styles for main content */
}

.footer {
  grid-area: footer;
  /* Styles for footer */
}

            

              
                Copy
              
            
          

এই উদাহরণটি একটি হেডার, সাইডবার, প্রধান বিষয়বস্তু এলাকা এবং ফুটার সহ একটি গ্রিড সংজ্ঞায়িত করে। grid-template-areas প্রোপার্টি এই উপাদানগুলোতে নির্দিষ্ট এলাকা নির্ধারণ করে। কলাম সংজ্ঞাগুলো পঠনযোগ্যতা উন্নত করতে নামযুক্ত গ্রিড লাইন ব্যবহার করে।

অ্যাক্সেসিবিলিটি বিবেচনা

CSS গ্রিড ব্যবহার করার সময়, অ্যাক্সেসিবিলিটি বিবেচনা করা অত্যন্ত গুরুত্বপূর্ণ। নিশ্চিত করুন যে আপনার লেআউটগুলো প্রতিবন্ধী ব্যবহারকারীদের জন্য যৌক্তিক এবং চলাচলযোগ্য। অ্যাক্সেসিবিলিটি বাড়ানোর জন্য সিমেন্টিক HTML উপাদান ব্যবহার করুন এবং উপযুক্ত ARIA অ্যাট্রিবিউট প্রদান করুন। উদাহরণস্বরূপ, ট্যাব অর্ডারের প্রতি মনোযোগী হন এবং নিশ্চিত করুন যে গ্রিডের সাথে দৃশ্যত পুনর্বিন্যাস করা হলেও বিষয়বস্তু একটি যৌক্তিক ক্রমে উপস্থাপন করা হয়েছে।

পারফরম্যান্স অপ্টিমাইজেশন

CSS গ্রিড সাধারণত পারফরম্যান্ট, তবে পারফরম্যান্স অপ্টিমাইজ করার জন্য আপনি কিছু জিনিস করতে পারেন:

• অতিরিক্ত নেস্টিং এড়িয়ে চলুন: রেন্ডারিং ওভারহেড কমাতে আপনার গ্রিড কাঠামো যতটা সম্ভব সহজ রাখুন।
• হার্ডওয়্যার অ্যাক্সিলারেশন ব্যবহার করুন: রেন্ডারিং পারফরম্যান্স উন্নত করতে হার্ডওয়্যার অ্যাক্সিলারেশন ট্রিগার করে এমন CSS প্রোপার্টি (যেমন, transform: translateZ(0)) ব্যবহার করুন।
• ছবি অপ্টিমাইজ করুন: পৃষ্ঠা লোড সময় কমাতে আপনার ছবিগুলো সঠিকভাবে অপ্টিমাইজ করা হয়েছে তা নিশ্চিত করুন।
• বিভিন্ন ডিভাইসে পরীক্ষা করুন: যেকোনো পারফরম্যান্স সমস্যা চিহ্নিত এবং সমাধান করার জন্য বিভিন্ন ডিভাইস এবং ব্রাউজারে আপনার লেআউটগুলো পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন।

CSS গ্রিড লেআউট ডিবাগিং

আধুনিক ব্রাউজারগুলো CSS গ্রিড লেআউট ডিবাগ করার জন্য চমৎকার ডেভেলপার টুল সরবরাহ করে। ক্রোম, ফায়ারফক্স এবং এজ-এ, আপনি গ্রিড কন্টেইনার পরিদর্শন করতে পারেন এবং গ্রিড লাইন, কলামের প্রস্থ এবং সারির উচ্চতা দেখতে পারেন। এই টুলগুলো আপনাকে দ্রুত লেআউট সমস্যা চিহ্নিত করতে এবং সমাধান করতে সহায়তা করতে পারে।

grid-template-columns ব্যবহারের সেরা অনুশীলন

• আপনার লেআউট পরিকল্পনা করুন: কোডিং শুরু করার আগে, আপনার গ্রিড লেআউট সাবধানে পরিকল্পনা করুন এবং মূল এলাকা এবং তাদের কাঙ্ক্ষিত আকারগুলো চিহ্নিত করুন।
• আপেক্ষিক ইউনিট ব্যবহার করুন: প্রতিক্রিয়াশীল লেআউট তৈরির জন্য fr, em, এবং vw এর মতো আপেক্ষিক ইউনিট পছন্দ করুন।
• minmax() ব্যবহার করুন: বিভিন্ন বিষয়বস্তু এবং স্ক্রিনের আকারের সাথে খাপ খায় এমন নমনীয় কলামের আকার নির্ধারণ করতে minmax() ফাংশনটি ব্যবহার করুন।
• repeat() ব্যবহার করুন: পুনরাবৃত্তিমূলক কলাম প্যাটার্ন সহজ করার জন্য repeat() ফাংশনটি ব্যবহার করুন।
• অ্যাক্সেসিবিলিটি বিবেচনা করুন: নিশ্চিত করুন যে আপনার লেআউটগুলো সমস্ত ব্যবহারকারীর জন্য অ্যাক্সেসযোগ্য।
• পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন: আপনার লেআউটগুলো বিভিন্ন ডিভাইস এবং ব্রাউজারে পরীক্ষা করে নিশ্চিত করুন যে তারা প্রত্যাশিতভাবে কাজ করে।
• পরিষ্কার, রক্ষণাবেক্ষণযোগ্য কোড লিখুন: আপনার কোডকে আরও পঠনযোগ্য এবং রক্ষণাবেক্ষণযোগ্য করতে নামযুক্ত গ্রিড লাইন এবং মন্তব্য ব্যবহার করুন।

উপসংহার

grid-template-columns প্রোপার্টিটি নমনীয়, প্রতিক্রিয়াশীল এবং ডায়নামিক ওয়েব লেআউট তৈরির জন্য একটি শক্তিশালী টুল। উপলব্ধ বিভিন্ন ইউনিট, কীওয়ার্ড এবং ফাংশনগুলোতে দক্ষতা অর্জন করে, আপনি CSS গ্রিডের সম্পূর্ণ সম্ভাবনা উন্মোচন করতে পারেন এবং যেকোনো স্ক্রিন সাইজ এবং বিষয়বস্তুর প্রয়োজনীয়তার সাথে খাপ খায় এমন অত্যাশ্চর্য ওয়েব ডিজাইন তৈরি করতে পারেন। আপনার লেআউটগুলো সাবধানে পরিকল্পনা করতে, আপেক্ষিক ইউনিট ব্যবহার করতে, অ্যাক্সেসিবিলিটি বিবেচনা করতে এবং সর্বোত্তম ফলাফল নিশ্চিত করতে পুঙ্খানুপুঙ্খভাবে পরীক্ষা করতে ভুলবেন না। এই সেরা অনুশীলনগুলো অনুসরণ করে, আপনি আধুনিক, ব্যবহারকারী-বান্ধব ওয়েবসাইট তৈরি করতে পারেন যা সমস্ত ব্যবহারকারীদের জন্য একটি দুর্দান্ত অভিজ্ঞতা প্রদান করে।

আরও রিসোর্স

• MDN ওয়েব ডক্স: grid-template-columns
• CSS-ট্রিকস: CSS গ্রিডের একটি সম্পূর্ণ গাইড
• গ্রিড বাই এক্সাম্পল