Google Choice: W3.CSS

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.
💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.
🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.
🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.
✔ Latest world News

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

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

CS