Skip to main content
E
erwinsokolski
Participant
February 4, 2020
Question

[Design]-Adobe XD -960 bootstrap Columns issue

  • February 4, 2020
  • 1 reply
  • 782 views

Hi,

I need to set up layout grid for bootstrap large container. I have 1920px artboard and want to make layout grid with 480px margin. When I try to setup 12 columns, 30 gutter width and 480 margin it gives me 486 margin left and 480 margin right. How can I fix this?

 

<The Title was renamed by moderator>

This topic has been closed for replies.

1 reply

anicaci
anicaci
Inspiring
February 4, 2020

I guess it just rounded your column width from 52.5 to 52px and added 6px to your margin left. 

You could possibly decide if you want margins 483px both sides or change gutter width to 24px or 36px so you have round number for your columns, or make some other calculation...

 

You have

2*margin width+11*gutter width+12*column width = 1920px

    E
    erwinsokolskiAuthor
    Participant
    February 5, 2020

    Is it possible to set up columns width to 52.5px?

    anicaci
    anicaci
    Inspiring
    February 5, 2020

    I don't think so, but anyway would not recommend since it should help you align your objects to the grid, so it is better to have round numbers there. If it is really something you want, I guess you can use 12 rectangles width 52.5 and type distance between them 30px. Then group them and lock them in your artboard. When you finish your design, just delete that group. Think if you really need this, since I believe this would be harder for coding and even for you to design. I would go with round numbers, either margin 483 or gutter 24/36px

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices