Google Choice: W3.CSS

Thursday, March 16, 2017

W3.CSS - Grids

W3.CSS provides a 12 column fluid responsive grid.
It uses the w3-row and w3-col style classes to define rows and columns respectively.

Class Name	Description
w3-row	Specifies a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive.
w3-col	Specifies a column with sub-classes

w3-col has several sub-classes meant for different types of screens.

Columns for Small Screen Devices

Here is a list of column-level styles for small screen devices, typically smartphones.

Class Name	Description
s1	Defines 1 of 12 columns with width as 08.33%.
s2	Defines 2 of 12 columns with width as 16.66%.
s3	Defines 3 of 12 columns with width as 25.00%.
s4	Defines 4 of 12 columns with width as 33.33%.
s5 - s11
s12	Defines 12 of 12 columns with width as 100%. Default class for small screen phones.

Columns for Medium Screen Devices

Here is a list of column-level styles for medium screen devices, typically tablets.

Class Name	Description
m1	Defines 1 of 12 columns with width as 08.33%.
m2	Defines 2 of 12 columns with width as 16.66%.
m3	Defines 3 of 12 columns with width as 25.00%.
m4	Defines 4 of 12 columns with width as 33.33%.
m5 - m11
m12	Defines 12 of 12 columns with width as 100%. Default class for medium screen phones.

Columns for Large Screen Devices

Here is a list of column-level styles for large screen devices, typically laptops.

Class Name	Description
l1	Defines 1 of 12 columns with width as 08.33%.
l2	Defines 2 of 12 columns with width as 16.66%.
l3	Defines 3 of 12 columns with width as 25.00%.
l4	Defines 4 of 12 columns with width as 33.33%.
l5 - l11
l12	Defines 12 of 12 columns with width as 100%. Default class for large screen devices.

Usage

Each subclass determines the number of columns of the grid to be used based on the type of a device. Consider the following HTML snippet.

<div class="w3-row">
   <div class="w3-col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

Default columns to be used are 12 on a device if a sub-class is not mentioned in the class attribute of an HTML element.

Example

w3css_grids.htm

<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body> 
     
         <header class="w3-container w3-teal">   
            <h2>Mobile First Design Demo</h2>  
            <p class="w3-large">Resize the window to see the effect!</p>   
         </header>   
         <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 text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
            </div>
            <div class="w3-col w3-container s4 m8 l9">  
               <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
         </div>
   </body>
</html>

Result

Verify the result.

Mobile First Design Demo

Resize the window to see the effect!

This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).

This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews