Button Grid spacing

Question

I have some problems with a button arrangement where I have several buttons forming a grid.

The problem I am encountering is, that as soon as there is more than one line of text inside the button it gets shifted downwards.

I think you see what the problem is.

<button class="boxed" dummy="0" name="x" type="submit" value="x">
  SEGEBERGER ZTG.DO
</button>

corresponding CSS

button {
  background:#fff;
  border: 1px solid #c1c1c1;
  padding-left:11px;
  padding-right:11px;
  height:29px;
  margin-top: 5px;
  white-space: normal;
}

.boxed {
  margin-left:1px;
  padding-top:10px;
  padding-left:10px;
  width:100%;
  max-width:150px;
  height:150px;
  font-size: 10pt;
  word-break: break-all;
}

I looked around but did not find anything that fixed it.

https://jsfiddle.net/k1vvsx2h/

Hope someone has a hint on how to fix this.

Have a good one :)

put it on jsfiddle and give here the link.So that we can easily see where is the problem? — Chonchol Mahmud, Jan 07 '16 at 10:25

score 3 · Accepted Answer · edited May 23 '17 at 11:59

Adding a float:left will fix this issue.

.boxed {
    float: left;
    margin-left: 1px;
    padding-top: 10px;
    padding-left: 10px;
    width: 100%;
    max-width: 150px;
    height: 150px;
    margin-right: 5px;
    font-size: 10pt;
    word-break: break-all;
}

button {
    background: #fff;
    border: 1px solid #c1c1c1;
    padding-left: 11px;
    padding-right: 11px;
    height: 29px;
    margin-top: 5px;
    white-space: normal;
}

Here also a jsFiddle for you: https://jsfiddle.net/hb8ydyba/1/. Make sure you're using a clearfix with this solution.

If you're looking for a more flexible solution maybe a CSS Framework like Bootstrap or UIKit and their Gridsystems will work out well for you.

Button Grid spacing

1 Answers1