প্রতিটা ভালোভাবে-বানানো interface গোপনে একটা grid-এর উপর বানানো, এমনকি যখন screen-এ কিছুই বাক্সবন্দী দেখায় না। চূড়ান্ত product-এ grid অদৃশ্য — এর কাজ শৃঙ্খলা, সাজসজ্জা না।
সবচেয়ে সাধারণ layout grid screen প্রস্থকে সামঞ্জস্যপূর্ণ gutter (ফাঁক) সহ ১২টা সমান column-এ ভাগ করে। ১২ বিশেষভাবে জনপ্রিয় কারণ এটা অর্ধেক, তৃতীয়াংশ, আর চতুর্থাংশে সমানভাবে ভাগ হয় — একটা 2-column layout, একটা 3-column layout, আর একটা 4-column layout সবগুলো এটা redesign না করে একই অন্তর্নিহিত grid শেয়ার করতে পারে।
| Layout দরকার | ব্যবহৃত Column (১২টার মধ্যে) |
|---|---|
| দুটো সমান পাশাপাশি section | 6 + 6 |
| একটা sidebar আর একটা main content এলাকা | 3 + 9, বা 4 + 8 |
| একটা সারিতে তিনটা সমান card | 4 + 4 + 4 |
| একটা সারিতে চারটা সমান card | 3 + 3 + 3 + 3 |
একটা শেয়ার করা grid-এ align করা element কোনো দৃশ্যমান লাইন ছাড়াই ইচ্ছাকৃত আর সুশৃঙ্খল দেখায় — চোখ সামঞ্জস্যপূর্ণ প্রান্ত ধরে ফেলে। কোনো grid ছাড়া "চোখ দিয়ে" বসানো element প্রায়-কিন্তু-ঠিক-না align করা দেখায় ঝোঁক রাখে, যা পার্থক্য মাত্র কয়েক পিক্সেল হলেও অগোছালো পড়ে।
একই 12-column logic সাধারণত ছোট screen-এ কম column-এ সংকুচিত হয় (সাধারণত mobile-এ ৪, tablet-এ ৮) — পরের responsive design lesson-এ বিস্তারিত কভার করা। Grid concept বদলায় না; শুধু column সংখ্যা আর gutter আকার প্রতি breakpoint-এ সমন্বয় হয়।
একটা টুল যা এটা concrete করে
Figma-এর layout grid feature (একটা frame-এর Layout Grid setting-এর অধীনে) design করার সময় সরাসরি canvas-এ একটা আসল 12-column grid overlay করতে পারে — এটাকে theory থেকে একটা দৃশ্যমান গাইডে পরিণত করে।