उदाहरण
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; } .col { color: white; float: left; width: 25%; padding: 10px; } .colContainer:after { content: ""; display: table; clear: both; } @media screen and (max-width: 900px) { .col { width: 50%; } } @media screen and (max-width: 600px) { .col { width: 100%; } } </style> </head> <body> <h1>Mixed col Layout Example</h1> <h2>Resize the screen to see the below divs resize themselves</h2> <div class="colContainer"> <div class="col" style="background-color:rgb(153, 29, 224);"> <h2>First col</h2> </div> <div class="col" style="background-color:rgb(12, 126, 120);"> <h2>Second col</h2> </div> <div class="col" style="background-color:rgb(207, 41, 91);"> <h2>Third col</h2> </div> <div class="col" style="background-color:rgb(204, 91, 39);"> <h2>Fourth col</h2> </div> </div> </body> </html>
आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:
स्क्रीन रिसाइज़ करने पर 4 कॉलम लेआउट 2 कॉलम में बदल जाएगा और इसी तरह:
