উদাহরণ
নিচের কোডটি CSS ব্যবহার করে একটি রেসপন্সিভ পোর্টফোলিও গ্যালারি গ্রিড তৈরি করার উদাহরণ:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border-box; } h1 { font-size: 50px; text-align: center; font-family: monospace, serif, sans-serif; } body { background-color: #f1f1f1; padding: 20px; font-family: Arial; } main { max-width: 1000px; margin: auto; } img { width: 100%; } .portfolioContainer { margin: 8px -16px; } .portfolioContainer, .portfolioContainer > .ImageCol { padding: 8px; } .ImageCol { float: left; width: 25%; } .portfolioContainer:after { content: ""; display: table; clear: both; } .portfolioContent { background-color: white; padding: 10px; } @media screen and (max-width: 900px) { .ImageCol { width: 50%; } } @media screen and (max-width: 600px) { .ImageCol { width: 100%; } } </style> </head> <body> <main> <h1>Photography</h1> <hr /> <div class="portfolioContainer"> <div class="ImageCol"> <div class="portfolioContent"> <img src="https://i.picsum.photos/id/531/400/400.jpg" /> <h3>Picture 1</h3> <p>Clicked at my house</p> </div> </div> <div class="ImageCol"> <div class="portfolioContent"> <img src="https://i.picsum.photos/id/511/400/400.jpg" /> <h3>Picture 2</h3> <p>Clicked at Tenesse</p> </div> </div> <div class="ImageCol"> <div class="portfolioContent"> <img src="https://i.picsum.photos/id/521/400/400.jpg" /> <h3>Picture 3</h3> <p>Clicked on a bridge while travelling</p> </div> </div> <div class="ImageCol"> <div class="portfolioContent"> <img src="https://i.picsum.photos/id/551/400/400.jpg" /> <h3>Picture 4</h3> <p>Riding my safari jeep in sahara</p> </div> </div> </div> </main> </body> </html>
আউটপুট
উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:
