>

임의의 grid-template-columns 를 표시해야합니다 .

나는 grid-template-columns: repeat(auto-fill, 100px) 를 시도했다 , 그러나 이것은 부모의 너비를 초과하는 행을 모두 래핑합니다.

grid-template-columns: repeat(999, 100px) 와 같은 큰 상한 설정 작동하지만 더 좋은 방법이 있어야합니다.

다음은 내가 작업하고있는 작업의 예입니다. https://codepen.io/anon/pen/BJbvEG

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

<h3>Auto-fill takes an arbitrary number, but wraps. </h3>
<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>

<h3>A large upper bound works, but I'm looking for a better way.</h3>
<div class="grid-2">
  <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>


  • 답변 # 1

    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>
    
    

  • 답변 # 2

    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>
    
    

관련 자료

  • 이전 sql - 테라 데이타 - 시퀀스 유효 기간의 형식 변경
  • 다음 dataframe - R의 for 루프에서 새 열을 반복적으로 채 웁니다