উদাহরণ
নিচের কোডটি HTML এবং CSS ব্যবহার করে একটি রেসপন্সিভ ইমেজ গ্রিড তৈরি করার উদাহরণ:
<!DOCTYPE html> <html> <style> * { box-sizing: border-box; } h1 { text-align: center; } .outer-grid { display: flex; flex-wrap: wrap; padding: 0 4px; } .inner-grid { flex: 25%; max-width: 25%; padding: 0 4px; } .inner-grid img { margin-top: 8px; width: 100%; padding: 10px; } @media screen and (max-width: 800px) { .inner-grid { flex: 50%; max-width: 50%; } } @media screen and (max-width: 600px) { .inner-grid { flex: 100%; max-width: 100%; } } </style> <body> <h1>Responsive Image Grid Example</h1> <div class="outer-grid"> <div class="inner-grid"> <img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> </div> <div class="inner-grid"> <img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> </div> <div class="inner-grid"> <img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> </div> </div> </body> </html>
আউটপুট
উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:
স্ক্রিন রিসাইজ করলে গ্রিড ৩ কলাম থেকে ২ কলামে রিসাইজ হবে:
