struggling with css grid

Question

I would like to align horizontally on a single line a bunch of divs of class a within a container div.

Why is the below css code not working ?

.a {
  border: 1px solid black;
}

#container {
  display:grid;
  grid-auto-columns: minmax(10px, 35px);
  grid-template-rows:1fr;
}

I have created a jsFiddle for it. I was expecting the divs 1 to 6 there to all be on the same line but I get the following result :

use `grid-auto-flow: column`, see https://jsfiddle.net/ab401dmn/ an example: https://stackoverflow.com/questions/56062699 — kukkuz, May 13 '19 at 10:40

score 0 · Accepted Answer · answered May 13 '19 at 10:40

You need to change the default flow ^ref to column:

.a {
  border: 1px solid black;
}

#container {
  display: grid;
  grid-auto-columns: minmax(10px, 35px);
  grid-template-rows: 1fr;
  grid-auto-flow:column; /* added */
}

<div id="container">
  <div class="a">
    1
  </div>
  <div class="a">
    2
  </div>
  <div class="a">
    3
  </div>
  <div class="a">
    4
  </div>
  <div class="a">
    5
  </div>
  <div class="a">
    6
  </div>
</div>

Or define a template column like below:

.a {
  border: 1px solid black;
}

#container {
  display: grid;
  grid-template-columns:repeat(auto-fill, minmax(10px, 35px));
  grid-template-rows: 1fr;
}

<div id="container">
  <div class="a">
    1
  </div>
  <div class="a">
    2
  </div>
  <div class="a">
    3
  </div>
  <div class="a">
    4
  </div>
  <div class="a">
    5
  </div>
  <div class="a">
    6
  </div>
</div>

score 0 · Answer 2 · answered May 13 '19 at 10:49

0

Try below code:

CSS:

#container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    grid-gap: 1rem;
}

Note: Its align horizontally on a single line.

answered May 13 '19 at 10:49

HAPPY SINGH

536
4
13

struggling with css grid

2 Answers2