html - 줄 바꿈없이 임의의 수의 열이있는 그리드 컨테이너

grid-template-columns 를 사용하지 마십시오 . 이는 명시 적으로 정의한 그리드 인명시 그리드에서 열 트랙을 정의합니다.

대신 grid-auto-columns . 이는 명시 적 그리드 외부에서 자동으로 생성되는 열/행인암시 적 그리드에서 열 트랙을 정의합니다.

즉, grid-auto-columns 와 함께  열 수를 정의 할 필요가 없습니다. 그리드 컨테이너가 필요에 따라 만들도록하십시오.

그런 다음 모든 열을 수평으로 흐르게하려면 모두 grid-row: 1 로 설정하십시오. .

.grid {
  display: grid;
  grid-auto-columns: 100px;
  width: 300px;
  overflow: auto;
  border: 1px solid #000;
}
.column {
  grid-row: 1;
}

<div class="grid">
  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>
  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>
  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>
  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>
</div>

그건 그렇고, 그냥 grid-row: 1 를 추가  첫 번째 예의 열에 :

grid-template-columns: repeat(auto-fill, 100px)

...도 작동합니다. 그러나 그것은 약간의 해킹입니다. grid-auto-columns 와 함께  더 자연스러운 해결책이 있습니다.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  width: 300px;
  border: 1px solid #000;
  overflow: auto;
}
.column {
  grid-row: 1;
}

<div class="grid">
    <div class="column">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
      <div>six</div>
      <div>seven</div>
      <div>eight</div>
      <div>nine</div>
      <div>ten</div>
      <div>eleven</div>
      <div>twelve</div>
    </div>
    <div class="column">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
      <div>six</div>
      <div>seven</div>
      <div>eight</div>
      <div>nine</div>
      <div>ten</div>
      <div>eleven</div>
      <div>twelve</div>
    </div>
    <div class="column">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
      <div>six</div>
      <div>seven</div>
      <div>eight</div>
      <div>nine</div>
      <div>ten</div>
      <div>eleven</div>
      <div>twelve</div>
    </div>
    <div class="column">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
      <div>six</div>
      <div>seven</div>
      <div>eight</div>
      <div>nine</div>
      <div>ten</div>
      <div>eleven</div>
      <div>twelve</div>
    </div>
</div>

flexbox로 그렇게 할 수 있습니다. flex-item을 무 성장, 비 수축, 고정 너비 요소로 설정하십시오

.grid-1 {
  display: flex;
  width: 300px;
  border: 1px solid #000;
  overflow:auto;
}
.column {
  flex: 0 0 100px;
}

<div class="grid-1">
    <div class="column">
      <div>one</div> <div>two</div>  <div>three</div>  <div>four</div>
      <div>five</div><div>six</div><div>seven</div> <div>eight</div>     <div>nine</div> <div>ten</div> <div>eleven</div> <div>twelve</div>
    </div>
  <div class="column">
      <div>one</div> <div>two</div>  <div>three</div>  <div>four</div>
      <div>five</div><div>six</div><div>seven</div> <div>eight</div>     <div>nine</div> <div>ten</div> <div>eleven</div> <div>twelve</div>
    </div>
    <div class="column">
      <div>one</div> <div>two</div>  <div>three</div>  <div>four</div>
      <div>five</div><div>six</div><div>seven</div> <div>eight</div>     <div>nine</div> <div>ten</div> <div>eleven</div> <div>twelve</div>
    </div>
    <div class="column">
      <div>one</div> <div>two</div>  <div>three</div>  <div>four</div>
      <div>five</div><div>six</div><div>seven</div> <div>eight</div>     <div>nine</div> <div>ten</div> <div>eleven</div> <div>twelve</div>
    </div>
</div>