How to Create Rows and Column in CSS

How to Create Rows and Column in CSS

How to Create Rows and Column in CSS

How to Create Rows and Column in CSS, this is very important when we try to sort or isolate content row by row  in our website.

Before we  start designing our site, we should roughly sketch out the structure of our site in a piece of paper or draft, on how many section inside our website.

Each section is equal to a row, while inside the row, how many sub column reside in it.Hope that my explanation is clear.

In order to create a responsive row and column, there are a few step we need to do.

  1. Plan your site, How many section are there in your site, how many column you have in your section.
  2.           <div class="container">
               <div class="row">
                    <div class="col-3">
                       <p>This comprise 25% of the Website Space</p>
                    </div>
                    <div class="col-6">
                      <p>This comprise 50% of the Website Space</p>
                    </div>
                    <div class="col-3">
                      <p>This comprise 25% of the Website Space</p>
                    </div>
                </div>
               <div class="row">
                 <div class="col-2">
                      <p>This comprise 16% of the Website Space</p>
                  </div>
                  <div class="col-7">
                       <p>This comprise 58.3% of the Website Space</p>
                  </div>
                  <div class="col-4">
                      <p>This comprise 33.3% of the Website Space</p>
                  </div>
               </div>   
            </div>       
                
            
  3. Create Section and segregate section  in HTML  using  the <DIV> tag. with a class name assign to the Section.
  4.  Setting up a Flex display feature in roll in CSS . Refer here what is a Flex 
  5.  
             .row {
                    display: flex;
                    width: 100%
                  }
    
    
            
  6.  Make every single row to stack upon each other , by pointing  it using the After Selector function.
  7.            .row::after {
                     /* display: block;*/
                       clear: both;
                        content: "";
                           }
    
    
               
  8. Define all the Possible column width by Percentage in CSS.
  9.                .col-1 {width: 8.33%};
                   .col-2 {width: 16.66%;}
                   .col-3 {width: 25%;}
                   .col-4 {width: 33.33%;}
                   .col-5 {width: 41.66%;}
                   .col-6 {width: 50%;}
                   .col-7 {width: 58.33%;}
                   .col-8 {width: 66.66%;}
                   .col-9 {width: 75%;}
                   .col-10 {width: 83.33%;}
                   .col-11 {width: 91.66%;}
                   .col-12 {width: 100%;}
               
  10. Use the “*” Selector , to create ” Box-sizing” property for your column.
  11.               * {
                      box-sizing: border-box;
                    }
    
                  
  12. This is optional , Styling your Box.
  13.             [class*="col-"]{
                             border: 2px solid grey;
                             padding: 15px;
                             float: left;
                                }
    
    
                

Output

How to Create Rows and Column in CSS

Check out how to use Padding and Margin in CSS here

Leave a Reply

Your email address will not be published. Required fields are marked *

four × two =