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> <h3>Mobile First Fluid Grid</h3> <h5>Try to resize the window</h5> <br> <div class="w3-row"> <div class="w3-col m4 l3 w3-grey"> <h5>Navigation</h5> 12 colums (s12)<br>on small screens<br><br> 4 columns (m4)<br> on medium screens<br><br> 3 columns (l3)<br>on large screens<br><br> </div> <div class="w3-col m8 l9"> <h5>Content</h5> 12 colums (s12)<br>on small screens<br><br> 8 columns (m8)<br> on medium screens<br><br> 9 columns (l9)<br>on large screens<br><br> </div> </div> <br> <div class="w3-row"> <div class="w3-col m1 w3-grey"><p>1</p></div> <div class="w3-col m1"><p>2</p></div> <div class="w3-col m1 w3-grey"><p>3</p></div> <div class="w3-col m1"><p>4</p></div> <div class="w3-col m1 w3-grey"><p>5</p></div> <div class="w3-col m1"><p>6</p></div> <div class="w3-col m1 w3-grey"><p>7</p></div> <div class="w3-col m1"><p>8</p></div> <div class="w3-col m1 w3-grey"><p>9</p></div> <div class="w3-col m1"><p>10</p></div> <div class="w3-col m1 w3-grey"><p>11</p></div> <div class="w3-col m1"><p>12</p></div> </div> <br> <div class="w3-row"> <div class="w3-col w3-grey"><p>Default</p></div> </div> <br> <div class="w3-row"> <div class="w3-col m6 w3-grey"><p>m6</p></div> <div class="w3-col m6"><p>m6</p></div> </div> <br> <div class="w3-row"> <div class="w3-col m4 w3-grey"><p>m4</p></div> <div class="w3-col m4"><p>m4</p></div> <div class="w3-col m4 w3-grey"><p>m4</p></div> </div> <br> <div class="w3-row"> <div class="w3-col m3 w3-grey"><p>m3</p></div> <div class="w3-col m3"><p>m3</p></div> <div class="w3-col m3 w3-grey"><p>m3</p></div> <div class="w3-col m3"><p>m3</p></div> </div> <br> <div class="w3-row"> <div class="w3-col m2 w3-grey"><p>m2</p></div> <div class="w3-col m2"><p>m2</p></div> <div class="w3-col m2 w3-grey"><p>m2</p></div> <div class="w3-col m2"><p>m2</p></div> <div class="w3-col m2 w3-grey"><p>m2</p></div> <div class="w3-col m2"><p>m2</p></div> </div> </body> </html>
Result: