Grid Method Help

Design help General
1

I have a general (dumb) question on creating items on the grid. What is the best way to control the horizontal space between div elements so that you don’t have uneven spacing on the right?

  1. The top row of this image shows what I normally do which is add right margin to a div, which forces the right most element not to go to the edge of the grid.

  2. The bottom row is adding a separate div element just for margin, which doesn’t seem like the right solution either.

What’s the best way to do this? Thanks for your help!

03
032358×1492 207 KB

2

by margin “split gutters”

[box1][box2][box3]

  • box1 margin-left: 0; margin: right: 5px (.box, .is-first)
  • box2: margin-left: 5px; margin-right: 5px; (.box)
  • box3: margin-left: 5px; margin-right: 0px; (.box, .is-last)
    Simple: create box class for example “margin-right: 5px; margin-left:5px”
    Than create “is-first” and “is-last” (to override “box” class)

by padding

You can create the same effect with padding. See her:

Negative margin

Also you can set negative margin (to the row / wrapper)
[box1][box2]
box1 & box2 with padding-left:15px
grid-wrapper: with margin-left: -15px
Inspect element in this link to see this idea:
https://getuikit.com/assets/uikit/tests/grid.html

Or her:
http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

con: On webflow you always need to remember to match the plus and minus

By flexboox justification

justify-content: space-between;
Simple - if you set each box to 32% for example.
[box1-32%]- space% -[box2-32%]- space% -[box3-32%] = 100%

1 Like
3

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.