Search code examples
htmlcssblueprint-css

General question about using a CSS grid for positioning

I'm trying to implement the Blueprint CSS grid in my website.

As an example, let's say I'm using a grid with 10 columns. The text on the far left is <h1>, and the text on the far right is <h3>. At the moment, the distance between the <h1> and the button is 2.5 columns, whereas the distance between the button and the <h3> is 3 columns.

enter image description here

Is there anyway to make those two distances equal? If not, is the lack of precision just a price to pay for the convenience of the grid?

Solution

  • This isnt really different form not using a grid.... Youre essentially setting the dimensions of the box. If you text doesnt fill the box then it doesnt fill it.

    If you want them equal distance apart then put them all in one grid block and float them all left or inline them with equal padding or margin.