columns not fitting into grid

StackOverflow https://stackoverflow.com/questions/14610844

  •  06-03-2022
  •  | 
  •  

题

I just started using compass blueprint and I'm making a simple frame with the following:

$blueprint_grid_columns: 12;
$blueprint_grid_width: 60px;
$blueprint-grid-margin: 20px;

@import "blueprint";

.frame {
  @include container;
  .header{
    @include column(12);
    background:#000;
    height:100px;
  }
  .left_bar{
    @include column(1);
    background:#ccc;
    height:450px;
  }
  .content{
    @include column(10);
    background: #000;
    height:450px;
  }
  .right_bar{
    @include column(1);
    backgrounf:#ccc
    height:450px;
  }
}

Html:

<body>
  <div class='frame'>

    <div class='header'>
    </div> <!-- end header -->

    <div class='left_bar'>
    </div> <!-- end left_bar -->

    <div class='content'>
    </div> <!-- end content -->

    <div class='right_bar'>  
    </div> <!-- end right_bar -->

  </div> <!-- end frame -->
</body>

The right_bar isn't fitting into the space for the last column but rather appearing exactly under the left_bar. Can anyone tell me why? Any help greatly appreciated.

C

有帮助吗？

解决方案

I think you have to add true to the header and right_bar classes:

.header{
  @include column(12, true);

....
.right_bar{
  @include column(1, true);

This lets compass know that it's the last column, and that the margin needs to be zeroed out.

其他提示

I figured that out. I added some borders that pushed the grid out of whack a bit. I fixed it by overriding widths but it seems a bit hacky. Is there a blueprint way to take borders into account?

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top