0

I am learning CSS and have come across to this lesson in W3school. I am struggling to understand what are the purposes of having so many column classes in grid view:

....
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
......

And why the two div elements are put inside colulmn-3 and colulmn-9, why others are skipped?

  <div class="col-3">
  <ul>
......
  </ul>
</div>

<div class="col-9">
.....
Jaf-2017
  • 89
  • 1
  • 3
  • 15
  • 1
    Possible duplicate of [What is a CSS grid system?](http://stackoverflow.com/questions/4462662/what-is-a-css-grid-system) – pintxo Feb 09 '17 at 10:14
  • pintxo, please don't say that. Its not the duplicate. Have you even gone through my question details? – Jaf-2017 Feb 09 '17 at 10:17
  • such column classes are most often part of a CSS grid system, so I reason it's a good idea to point you to read about what a grid system is. – pintxo Feb 09 '17 at 10:20
  • https://v4-alpha.getbootstrap.com/layout/grid/ – shyamm Feb 09 '17 at 10:23

3 Answers3

1

I try to explain it. please visit this Webseite for more information.

grid view is used in 99% cases to make a website responsiv.

row has 12 column per default. and <div class="col-3"> means that div should only use 3 column of 12. And the other <div class="col-9"> should use 9 column of 12 so you hahe 3 + 9 = 12 column. enter image description here

I hope it helps.

MKAD
  • 447
  • 2
  • 10
0

So 

12 = 100%
9 + 3 = 12 (100%)

If you want to have a full width, you need to have a total of 12 and that will give you 100% of container

If you want to have 3 columns you will use 4 + 4 + 4 = 12

<div class="row">
   <div class="col-4">
   <div class="col-4">
   <div class="col-4">
</div>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
fernando
  • 814
  • 1
  • 9
  • 24
0

This is simple math while taking columns classes div.

Percentages add up to make 100% . Like 25% + 75% = 100%

Examples

2 columns: 25% on left, 75% on right

<div class="row">
    <div class="col-3">..</div>
    <div class="col-9">..</div>
</div>

2 columns: 50% on left, 50% on right

<div class="row">
    <div class="col-6">..</div>
    <div class="col-6">..</div>
</div>

3 columns: 33% each

<div class="row">
    <div class="col-4">..</div>
    <div class="col-4">..</div>
    <div class="col-4">..</div>
</div>
Sahil Dhir
  • 4,162
  • 1
  • 13
  • 33