css grid - how do I put equal space between columns

Question

Trying to setup a css grid layout for my app navigation bar, but I am having trouble getting the justify-content property to work. Here I am trying to set it to center, but what I really want is a layout where the gutter space expands according to the space available.

Fiddle of the problem: https://jsfiddle.net/epch33vx/

My html:

<div class='test'>
  <div class='item'>
    1
  </div>
  <div class='item'>
    2
  </div>
  <div class='item'>
    3
  </div>
  <div class='item'>
    4
  </div>
</div>

My stylesheet:

.test {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 80px));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  justify-items: center;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 56px;
  font-size: 14px;
  text-decoration: none;
}

Could you provide an image of the desired outcome?

sol
– sol

2017-11-12 13:48:01 +00:00
Commented Nov 12, 2017 at 13:48 — sol
– sol, Commented Nov 12, 2017 at 13:48

Danield · Accepted Answer · 2017-11-12 13:56:16Z

4

Just replace justify-items: center; with justify-content: space-between;

From the spec (bold mine):

Note that certain values of justify-content and align-content can cause the tracks to be spaced apart (space-around, space-between, space-evenly)

.test {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 80px));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  justify-content: space-between;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 56px;
  font-size: 14px;
  text-decoration: none;
}

<div class='test'>
  <div class='item'>
    1
  </div>
  <div class='item'>
    2
  </div>
  <div class='item'>
    3
  </div>
  <div class='item'>
    4
  </div>
</div>

Updated fiddle

edited Nov 12, 2017 at 13:56

answered Nov 12, 2017 at 13:48

Danield

127k37 gold badges235 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A. Domeika · Accepted Answer · 2017-11-12 13:39:02Z

2

I would say that display: flex; justify-content: center; align-items: center; flex-direction: column; should go into test class.

answered Nov 12, 2017 at 13:39

A. Domeika

493 bronze badges

1 Comment

Miha Šušteršič Over a year ago

Want to get the same result using css grid, but in theory your solution works

Collectives™ on Stack Overflow

css grid - how do I put equal space between columns

2 Answers 2

Updated fiddle

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related