CODEWITHSUNDEEP
htmlcssresponsive-design
Jaf-2017
Jaf-2017

Reputation: 89

Columns in RWD grid view (CSS Responsive)

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">
.....

Upvotes: 0

Views: 588

Answers (3)

fernando
fernando

Reputation: 822

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>

Upvotes: 0

MKAD
MKAD

Reputation: 457

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.

Upvotes: 1

Sahil Dhir
Sahil Dhir

Reputation: 4250

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>

Upvotes: 0

Related Questions