CSS দিয়ে ৪-কলাম লেআউট গ্রিড তৈরি করার কোড নিচে দেওয়া হলো:
উদাহরণ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .first, .second, .third, .fourth { float: left; width: 25%; color: white; padding: 10px; height: 500px; text-align: center; } .first { background-color: tomato; } .second { background-color: teal; } .third { background-color: rgb(166, 71, 255); } .fourth { background-color: rgb(255, 71, 194); } .container:after { clear: both; } </style> </head> <body> <h1 style="text-align: center;">Four Column grid example</h1> <div class="container"> <div class="first"> <h1>Some text on the first div</h1> </div> <div class="second"> <h1>Some text on the second div</h1> </div> <div class="third"> <h1>Some text on the third div</h1> </div> <div class="fourth"> <h1>Some text on the fourth div</h1> </div> </div> </body> </html>
আউটপুট
উপরের কোড নিচের আউটপুট দেবে:
