W3.CSS Grid:

---

CSS on text:

Grid is a fantastic system to arrange different elements smartly on screen. Since screen sizes and orientations vary in different devices, Grid arranges all the elements perfectly for easy readability:

• A grid is built up of some rows and some columns in each row
• W3.CSS divides the entire screen-width in 12 equal-width columns. That simply means that, in every row there may be a total of 12 columns at most
• Further we need to know that columns can be combined together to form more wide columns but a sum of all column widths can not exceed 12.

---

If we built up a row like this:

Then all the equal-width columns will be like:

Three columns of equal width will be like:

Three columns of unequal width will be like:

---

The syntax for a row is:

The syntax for a row with three equal columns is:

Here w3-col is a class to create a column. s4 is a subclass that defines the display size (small) and the column width (4). Collectively it means that three columns (each of width-4) will be displayed on a small screen device:

---

The syntax for a column is like:

For example:

---

Now we need to understand that the size subclasses scale up hence,

• Using only s4 means on all devices, the column width will be 33.33%.
• Using only m4 means on tabs and monitors, the column width will be 33.33%. On phones, column width will be 100%.
• Using only l4 means only on monitors, the column width will be 33.33%. On phones and tabs, column width will be 100%.

---

The following code creates 2 unequal columns (3 + 9) on all devices:

---

The following code creates (4 + 8) on phones, (3 + 9) on tabs and (2 + 10) on monitors:

---

The class w3-row-padding adds a left-right padding of 16px to all columns:

Note that –padding adds the padding. Using only w3-row doesn’t add any padding in between columns.
Output:

---

The columns can be given width in percentages as well:

Here India is getting 50% of total width, Sri Lanka is getting a 30% width and the Pakistan is getting 20%.
Output:

---

If the class w3-col is given a width of set pixels/percentage, the rest width can be created as a separate column using w3-rest class:

Here India is getting 60% of total width, Sri Lanka is getting a 250px width and the rest is given to Pakistan.
Output:

---