Edit This Code:
See Result »
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../lib/w3.css"> <body> <div class="w3-container"> <h3>Mobile First Fluid Grid</h3> <p class="w3-large">Try to resize the window!</p> </div> <div class="w3-row"> <div class="w3-col m1 w3-center w3-grey">1</div> <div class="w3-col m1 w3-center">2</div> <div class="w3-col m1 w3-center w3-grey">3</div> <div class="w3-col m1 w3-center">4</div> <div class="w3-col m1 w3-center w3-grey">5</div> <div class="w3-col m1 w3-center">6</div> <div class="w3-col m1 w3-center w3-grey">7</div> <div class="w3-col m1 w3-center">8</div> <div class="w3-col m1 w3-center w3-grey">9</div> <div class="w3-col m1 w3-center">10</div> <div class="w3-col m1 w3-center w3-grey">11</div> <div class="w3-col m1 w3-center">12</div> </div> <div class="w3-row"> <div class="w3-col w3-container m4 l3 w3-yellow"> <p>This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p> </div> <div class="w3-col w3-container m8 l9"> <p>This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.</p> <p>This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.</p> </div> </div> </body> <!-- Mirrored from www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_example&stacked=h by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 13 Mar 2016 11:04:52 GMT --> </html>
Result: