Highlighted

[Design]-Adobe XD -960 bootstrap Columns issue

New Here ,
Feb 04, 2020

Copy link to clipboard

Copied

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>

Topics

Design, Product performance

Views

155

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

[Design]-Adobe XD -960 bootstrap Columns issue

New Here ,
Feb 04, 2020

Copy link to clipboard

Copied

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>

Topics

Design, Product performance

Views

156

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Explorer ,
Feb 04, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Feb 05, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Feb 05, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...