ওয়েব ডিজাইন (পর্ব ১৫) সিএসএস ডিসপ্লে গ্রিড

সিএসএস ডিসপ্লে গ্রিড আমরা আগে সিএসএস ডিসপ্লে ফ্লেক্স শিখেছিলাম। যা দিয়ে আমরা X অক্ষ বরাবর বা Y অক্ষ বরাবর কাজ করতে পারছিলাম, অর্থাৎ X (horizontal) অক্
Samrat Raihan

আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো ডিসপ্লে গ্রিড।

Display Grid

আমরা আগে সিএসএস ডিসপ্লে ফ্লেক্স শিখেছিলাম। যা দিয়ে আমরা X অক্ষ বরাবর বা Y অক্ষ বরাবর কাজ করতে পারছিলাম, অর্থাৎ X (horizontal) অক্ষ নিয়ে কাজ করলে Y(Vertical) অক্ষ কাজ করবেনা আবার Y অক্ষ নিয়ে কাজ করলে X অক্ষ কাজ করবেনা।

তবে ডিসপ্লে  গ্রিড দিয়ে এক সাথে X অক্ষ এবং Y অক্ষ নিয়ে কাজ করা যাবে।

Grid Container

আমরা গ্রিড কন্টেইনার তৈরি করবো যাতে করে গ্রিড আইটেম গুলোকে গ্রিড এর নির্দেশনা গুলো এক সাথে দিতে পারি।

ডিসপ্লে গ্রিড দেওয়ার সাথেই সাথেই কোনো পরিবর্তন দেখতে পারবেন না।

Grid Template

গ্রিড ট্যামপ্লেট দিয়ে আমরা কলাম এবং রো কে আলাদা করতে পারবো।
<style>
.container {
    display: grid;
    /* গ্রিড ট্যামপ্লেট রো তে যতগুলো ভেলু নিবেন ততটি রো হবে */
    grid-template-rows: auto 192px auto auto;
    /* গ্রিড ট্যামপ্লেট কলামে যতগুলো ভেলু নিবেন ততটি কলাম হবে */
    grid-template-columns: 100px auto 100px auto;
}
.item {
    background: teal;
    color: wheat;
    margin: 10px;
    padding: 10px;
}
</style>

    <div class="container">
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
    </div>

Grid Gap

প্রতিটি রো অথবা কলামের ভিতর আমাদের কলাম দেওয়ার প্রয়োজন হতে পারে। তখন আমরা নিচের প্রোপার্টি এবং ভেলু ইউজ করতে পারি।

row-gap ও column-gap এই দুইটা প্রোপার্টি ইউজ করে আলাদা ভাবেও কাজ করা যাবে। আপনি চাইলে grid-gap প্রোপার্টি দিয়ে সর্ট হ্যান্ড পদ্বতিতে কাজ করতে পারবেন। 
<style>
.container {
    display: grid;
    grid-template-rows: auto 192px auto auto;
    grid-template-columns: auto auto auto auto;
    grid-gap: 30px 44px;
}
.item {
    background: teal;
    color: wheat;
    margin: 10px;
    padding: 10px;
}

</style>
    <div class="container">
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
        <div class="item">Lorem, ipsum dolor.</div>
    </div>

Grid Row Colum Marge

আমরা যদি চাই আমাদের গ্রিডের কলাম এবং রো কে মার্জ করতে তাহলে  আমরা খুব সহজেই এই কাজ টি করতে পারবো।

Colum Marge

প্রথমে কিভাবে কলাম মার্জ করা যায় সেইটা  আমরা দেখবো।

<style>
.container {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto auto;
    grid-gap: 30px 44px;
}
.item {
    background: teal;
    color: #ffeb3b;
    margin: 10px;
    padding: 10px;
    text-align: center;
}
.merge1 {
    grid-column-start: 1;
    grid-column-end: 4;
}
</style>
    <div class="container">
        <div class="item merge1">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
    </div>

Row Marge

এইটা দিয়ে রো কে মার্জ করতে পারবো।

<style>

.container {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto auto;
    grid-gap: 30px 44px;
}
.item {
    background: teal;
    color: #ffeb3b;
    margin: 10px;
    padding: 10px;
    text-align: center;
}
.merge1 {
    grid-row-start: 2;
    grid-row-end: 6;
}
</style>

    <div class="container">
        <div class="item merge1">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
    </div>

Column and Row Together

এই বার আমরা দুই টাই এক সাথে করবো। ডিসপ্লে গ্রিড  এর এটাই সব চেয়ে ভালো লাগার বিষয়।
একই সাথে দুই দিকে কাজ করা যায়।

নিচের ছবির মতো আমরা বানাবো।
<style>
.container {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto auto;
    grid-gap: 21px 27px;
    background: #cddc39;
}
.item {
    background: teal;
    color: #ffeb3b;
    margin: 10px;
    padding: 10px;
    text-align: center;
}
.merge1 {
    grid-row-start: 1;
    grid-row-end: 4;
}
.merge2 {
    grid-row-start: 1;
    grid-row-end: 3;
}
.merge5 {
    grid-column-start: 2;
    grid-column-end: 4;
}
.merge6 {
    grid-column-start: 1;
    grid-column-end: 4;
}
</style>

    <div class="container">
        <div class="item merge1">1</div>
        <div class="item merge2">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item merge5">5</div>
        <div class="item merge6">6</div>
    </div>

Naming Grid website layout



উপরের ছবির মতো করে গ্রিড দিয়ে খুব সহজেই ওয়েব সাইট লেআউট তৈরি করতে পারবো। 
<style>
/* নামকরন করা হয়েছে */
.item1{
    grid-area: h;
}
.item2{
    grid-area: m;
}
.item3{
    grid-area: c;
}
.item4{
    grid-area: a;
}
.item5{
    grid-area: f;
}

/* গ্রিডের কাজ করা হয়েছে */
.container{
    display: grid;
    background-color: aqua;
    grid-gap: 10px;

    grid-template-areas: 
    'h h h h h h h h h h h h'
    'm m m c c c c c c a a a'
    'f f f f f f f f f f f f'
    ;
}
.container > div {
    background-color: brown;
    padding: 10px;
    height: 46px;
}

</style>
 <div class="container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Content</div>
<div class="item4">Adv.</div>
<div class="item5">Footer</div>
 </div>

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে। 
Samrat Raihan