Recently I read about the adaptive grid, everything seems to be clear, except for one. How to add indents between blocks (more precisely, columns inside row)? Thanks in advance for your reply.

Here, here I wanted to indent, say, between content and sidebar. html:

*, *:after, *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0; margin: 0; } #browserWidth { position: fixed; background: #c1c1c1; left: 0; bottom: 0; width: 100px; height: 25px; text-align: center; color: #234567; line-height: 25px; } .b-container { position: relative; margin: 0 auto; width: 90%; background: #c1c1c1; } .cols { background: #fd4; float: left; padding: 5px; text-align: center; } .cols.col-1 { width: 8.333333333333333% } ; .cols.col-2 { width: 16.66666666666667% } ; .cols.col-3 { width: 25% } ; .cols.col-4 { width: 33.33333333333333% } ; .cols.col-5 { width: 41.66666666666667% } ; .cols.col-6 { width: 50% } ; .cols.col-7 { width: 58.33333333333333% } ; .cols.col-8 { width: 66.66666666666667% } ; .cols.col-9 { width: 75% } ; .cols.col-10 { width: 83.33333333333333% } ; .cols.col-11 { width: 91.66666666666667% } ; .cols.col-12 { width: 100% } ; @media (max-width: 520px) { .cols.col-1, .cols.col-2, .cols.col-3, .cols.col-4, .cols.col-5, .cols.col-6, .cols.col-7, .cols.col-8, .cols.col-9, .cols.col-10, .cols.col-11, .cols.col-12 { width: 100%; display: block; } } .clearfix:after, .clearfix:before, .row:after, .row:before { content: " "; display: table; clear: both; } .b-header { background: black; position: relative; height: 45px; color: #fff; font-size: 20px; padding: 0; line-height: 45px; &_logo { color: #fd4; font-size: 24px; } } .b-sidebar { height: 300px; background: #1c1c1c; color: #fff; line-height: 300px; position: relative; padding: 0; } .b-content { height: 300px; position: relative; background: #c1c1c1; color: #fff; line-height: 300px; padding: 0; } .b-footer { height: 45px; background: black; position: relative; color: #fff; padding: 0; line-height: 45px; } 
 <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style/style.css"> <title>Grid And Others</title> </head> <body> <div class="b-container"> <div class="row"> <div class="cols col-12 b-header"> <div class="b-header_logo"> <a>LOGO</a> </div> </div> </div> <div class="row"> <div class="cols col-3 b-sidebar"> <a>.b-sidebar</a> </div> <div class="cols col-9 b-content"> <a>.b-content</a> </div> </div> <div class="row"> <div class="cols col-12 b-footer"> <a>.b-footer</a> </div> </div> </div> <div id="browserWidth"></div> </body> <script> document.getElementById("browserWidth").innerHTML = "width: " + window.innerWidth + "px"; </script> </html>

  • one
    Give a minimal example of what you are talking about - Alexey Prokopenko
  • Did you try to add a simple margin ? Well, or padding , if the indents are needed "from the inside." - smellyshovel
  • @smellyshovel, tried it (margin collapses layout, padding is not needed) - Andrey
  • @ Andrew, how do they ruin the layout? What's happening? margin and padding are designed to indent. If you have them "demolish the layout", then you are doing something wrong. And I do not advise you to invent crutches, because this is likely to break the semantics. Describe the behavior of the normal indentation. - smellyshovel

2 answers 2

Option 1 .cols.col-3 { width: 24%; margin-right: 1%; } .cols.col-3 { width: 24%; margin-right: 1%; } .cols.col-3 { width: 24%; margin-right: 1%; } :

 *, *:after, *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0; margin: 0; } #browserWidth { position: fixed; background: #c1c1c1; left: 0; bottom: 0; width: 100px; height: 25px; text-align: center; color: #234567; line-height: 25px; } .b-container { position: relative; margin: 0 auto; width: 90%; background: #ccc; } .cols { background: #fd4; float: left; padding: 5px; text-align: center; } .cols.col-1 { width: 8.333333333333333% } ; .cols.col-2 { width: 16.66666666666667% } ; .cols.col-3 { width: 24% } ; .cols.col-4 { width: 33.33333333333333% } ; .cols.col-5 { width: 41.66666666666667% } ; .cols.col-6 { width: 50% } ; .cols.col-7 { width: 58.33333333333333% } ; .cols.col-8 { width: 66.66666666666667% } ; .cols.col-9 { width: 75% } ; .cols.col-10 { width: 83.33333333333333% } ; .cols.col-11 { width: 91.66666666666667% } ; .cols.col-12 { width: 100% } ; .cols.col-3 { margin-right: 1%; } @media (max-width: 520px) { .cols.col-1, .cols.col-2, .cols.col-3, .cols.col-4, .cols.col-5, .cols.col-6, .cols.col-7, .cols.col-8, .cols.col-9, .cols.col-10, .cols.col-11, .cols.col-12 { width: 100%; display: block; } } .clearfix:after, .clearfix:before, .row:after, .row:before { content: " "; display: table; clear: both; } .b-header { background: black; position: relative; height: 45px; color: #fff; font-size: 20px; padding: 0; line-height: 45px; &_logo { color: #fd4; font-size: 24px; } } .b-sidebar { height: 300px; background: #1c1c1c; color: #fff; line-height: 300px; position: relative; padding: 0; } .b-content { height: 300px; position: relative; background: #c1c1c1; color: #fff; line-height: 300px; padding: 0; } .b-footer { height: 45px; background: black; position: relative; color: #fff; padding: 0; line-height: 45px; } 
 <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style/style.css"> <title>Grid And Others</title> </head> <body> <div class="b-container"> <div class="row"> <div class="cols col-12 b-header"> <div class="b-header_logo"> <a href="#">LOGO</a> </div> </div> </div> <div class="row"> <div class="cols col-3 b-sidebar"> <a href="#">.b-sidebar</a> </div> <div class="cols col-9 b-content"> <a href="#">.b-content</a> </div> </div> <div class="row"> <div class="cols col-12 b-footer"> <a href="#">.b-footer</a> </div> </div> </div> <div id="browserWidth"></div> </body> <script> document.getElementById("browserWidth").innerHTML = "width: " + window.innerWidth + "px"; </script> </html>

Option 2 is simply .cols.col-3 { padding-right: 1%; } .cols.col-3 { padding-right: 1%; } :

 *, *:after, *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0; margin: 0; } #browserWidth { position: fixed; background: #c1c1c1; left: 0; bottom: 0; width: 100px; height: 25px; text-align: center; color: #234567; line-height: 25px; } .b-container { position: relative; margin: 0 auto; width: 90%; background: #ccc; } .cols { background: #fd4; float: left; padding: 5px; text-align: center; } .cols.col-1 { width: 8.333333333333333% } ; .cols.col-2 { width: 16.66666666666667% } ; .cols.col-3 { width: 25% } ; .cols.col-4 { width: 33.33333333333333% } ; .cols.col-5 { width: 41.66666666666667% } ; .cols.col-6 { width: 50% } ; .cols.col-7 { width: 58.33333333333333% } ; .cols.col-8 { width: 66.66666666666667% } ; .cols.col-9 { width: 75% } ; .cols.col-10 { width: 83.33333333333333% } ; .cols.col-11 { width: 91.66666666666667% } ; .cols.col-12 { width: 100% } ; .cols.col-3 { padding-right: 1%; } @media (max-width: 520px) { .cols.col-1, .cols.col-2, .cols.col-3, .cols.col-4, .cols.col-5, .cols.col-6, .cols.col-7, .cols.col-8, .cols.col-9, .cols.col-10, .cols.col-11, .cols.col-12 { width: 100%; display: block; } } .clearfix:after, .clearfix:before, .row:after, .row:before { content: " "; display: table; clear: both; } .b-header { background: black; position: relative; height: 45px; color: #fff; font-size: 20px; padding: 0; line-height: 45px; &_logo { color: #fd4; font-size: 24px; } } .b-sidebar { height: 300px; background: #1c1c1c; color: #fff; line-height: 300px; position: relative; padding: 0; } .b-content { height: 300px; position: relative; background: #c1c1c1; color: #fff; line-height: 300px; padding: 0; } .b-footer { height: 45px; background: black; position: relative; color: #fff; padding: 0; line-height: 45px; } 
 <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style/style.css"> <title>Grid And Others</title> </head> <body> <div class="b-container"> <div class="row"> <div class="cols col-12 b-header"> <div class="b-header_logo"> <a href="#">LOGO</a> </div> </div> </div> <div class="row"> <div class="cols col-3 b-sidebar"> <a href="#">.b-sidebar</a> </div> <div class="cols col-9 b-content"> <a href="#">.b-content</a> </div> </div> <div class="row"> <div class="cols col-12 b-footer"> <a href="#">.b-footer</a> </div> </div> </div> <div id="browserWidth"></div> </body> <script> document.getElementById("browserWidth").innerHTML = "width: " + window.innerWidth + "px"; </script> </html>

    Create your CSS, connect it after bootstrap.css and override the properties of the desired block: change padding-right: 0; padding-left: 0; padding-right: 0; padding-left: 0; on necessary values

    • Where does the question say that this is a bootstrap? - smellyshovel
    • The .row class implies bootstrap columns, doesn't it? - Alex
    • @Alex, no, I'm not about bootstrap'e. I needed indents between the columns (well, blocks) .. - Andrew
    • @Alex is absolutely wrong. - smellyshovel
    • @Andrew, in this case, click "Edit" in question and add the already existing code. - smellyshovel