CSS से 2-कॉलम लेआउट ग्रिड बनाना

2-कॉलम ग्रिड लेआउट

CSS से 2-कॉलम लेआउट ग्रिड बनाने के लिए निम्न कोड उपयोग करें:

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body { font-family: Arial; color: white; }
.left, .right { height: 50%; width: 50%; position: fixed; overflow-x: hidden; padding-top: 20px; }
.left { left: 0; background-color: rgb(36, 0, 95); }
.right { right: 0; background-color: rgb(56, 1, 44); }
.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.centered img { width: 150px; border-radius: 50%; }
</style>
</head>
<body>
<h1 style="color: black;">Two column layout grid example</h1>
<div class="left"><h1>Some random text on the left</h1></div>
<div class="right"><h1>Some random text on the right</h1></div>
</body>
</html>

आउटपुट